Quiero dibujar un muñeco de nieve. Tengo la cabeza hecha, pero los ojos no me aparecen. ¿Debo usar grid o flex?
#e1 #e2 son los ojos y los puse con head circle en un contenedor cnt-head.
body{ height: 100%; width: 100%; } #container{ width: 400px; height: 300px; background: #dd6b4d; } .sman{ margin: auto; } #hat{ background: #0E1F2B; width: 30px; height: 12px; } #hat-white{ background: #FFFFFF; width: 30px; height: 8px; } #hat-long{ background: #0E1F2B; width: 45px; height: 4px; } #cnt-head{ height: 30px; width: 45px; overflow: hidden; /* This hide the div under another */ } #head{ background: #FFFFFF; position: relative; width: 45px; height: 45px; border-radius: 50px; top: -5px; } #e1{ height: 8px; width: 8px; border-radius: 50px; background: #0E1F2B; } #e2{ height: 8px; width: 8px; border-radius: 50px; background: #0E1F2B; } <html> <body> <div id="container"> <div id="hat" class="sman"></div> <div id="hat-white" class="sman"></div> <div id="hat" class="sman"></div> <div id="hat-long" class="sman"></div> <div id="cnt-head" class="sman"> <div id="head" class="sman"></div> <div id="e1"></div> <div id="e2"></div> </div> </div> </body> </html>Todas las respuestas serán buenas, gracias, y ¿es posible dibujar todo el muñeco de nieve en 1 div? ¿O al menos 3 divs para cada parte del cuerpo?
Espero que te sirva!!!
body{height: 100%;width: 100%;} #container{width: 400px;height: 300px;background: #dd6b4d;} .sman{ margin: auto; } #hat{ background: #0E1F2B; width: 30px; height: 12px; } #hat-white{ background: #FFFFFF; width: 30px; height: 8px; } #hat-long{ background: #0E1F2B; width: 45px; height: 4px; } #cnt-head{ height: 30px; width: 45px; overflow: hidden; /* This hide the div under another */ position: relative; } #head{ background: #FFFFFF; position: relative; width: 45px; height: 45px; border-radius: 50px; top: -5px; } #e1{ height: 8px; width: 8px; border-radius: 50px; background: #0E1F2B; position: absolute; left: 10px; top: 10px; } #e2{ height: 8px; width: 8px; border-radius: 50px; background: #0E1F2B; position: absolute; right: 10px; top: 10px; } <div id="container"> <div id="hat" class="sman"></div> <div id="hat-white" class="sman"></div> <div id="hat" class="sman"></div> <div id="hat-long" class="sman"></div> <div id="cnt-head" class="sman"> <div id="head" class="sman"></div> <div id="e1"></div> <div id="e2"></div> </div> </div>Si hace clic con el botón derecho en el elemento, luego selecciona inspeccionar, luego, en el código, pase el mouse sobre su ojo, puede ver que están allí, pero debajo de la cabeza de su muñeco de nieve. En este caso, recomendaría usar un pseudoelemento en la cabeza para que los ojos comiencen en la posición superior izquierda dentro de ese div. Además, ahora puede eliminar el div si no lo desea.
body{ height: 100%; width: 100%; } #container{ width: 400px; height: 300px; background: #dd6b4d; } .sman{ margin: auto; } #hat{ background: #0E1F2B; width: 30px; height: 12px; } #hat-white{ background: #FFFFFF; width: 30px; height: 8px; } #hat-long{ background: #0E1F2B; width: 45px; height: 4px; } #cnt-head{ height: 30px; width: 45px; overflow: hidden; /* This hide the div under another */ } #head::before, #head::after{ content: ""; height: 8px; width: 8px; left:12px; top:15px; border-radius: 50px; background: #0E1F2B; position: absolute; } #head::after{ left:26px!important; } #head{ background: #FFFFFF; position: relative; width: 45px; height: 45px; border-radius: 50px; top: -5px; } <div id="container"> <div id="hat" class="sman"></div> <div id="hat-white" class="sman"></div> <div id="hat" class="sman"></div> <div id="hat-long" class="sman"></div> <div id="cnt-head" class="sman"> <div id="head" class="sman"></div> </div> </div>Nota al margen: recuerde hacer que la identificación sea única :)
body { height: 100%; width: 100%; } #container { width: 400px; height: 300px; background: #dd6b4d; } .sman { margin: auto; } #hat { background: #0E1F2B; width: 30px; height: 12px; position: absolute; left: 185px; top: 0px; z-index: 19; } #hat-middle { background: #0E1F2B; width: 30px; height: 12px; position: absolute; left: 185px; top: 16px; z-index: 18; } #hat-white { background: #FFFFFF; width: 30px; height: 8px; position: absolute; left: 185px; top: 8px; z-index: 17; } #hat-long { background: #0E1F2B; width: 45px; height: 4px; position: absolute; left: 178px; top: 28px; z-index: 16; } #cnt-head { height: 30px; width: 45px; overflow: hidden; /* This hide the div under another */ } #head { background: #FFFFFF; width: 45px; height: 45px; border-radius: 50px; position: absolute; left: 177px; top: 25px; z-index: 3; } #scarf_Center { background-color: rgb(255 156 20); position: absolute; left: 168px; top: 59px; width: 65px; height: 16px; z-index: 15; border-radius: 10px 10px 10px 10px; border: 4px solid #dd6b4d; } #e1_right { height: 8px; width: 8px; border-radius: 50px; background: #0E1F2B; position: absolute; left: 205px; top: 40px; z-index: 5; } #e2_left { height: 8px; width: 8px; border-radius: 50px; background: #0E1F2B; position: absolute; left: 185px; top: 40px; z-index: 4; } #head_bottom { background-color: rgb(255, 255, 255); position: absolute; left: 164px; top: 60px; width: 80px; height: 80px; z-index: 1; border-radius: 50%; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> <div id="container"> <div id="hat" class="sman"></div> <div id="hat-white" class="sman"></div> <div id="hat-middle" class="sman"></div> <div id="hat-long" class="sman"></div> <div id="scarf_Center"></div> <div id="e1_right"></div> <div id="e2_left"></div> <div id="head" class="sman"></div> <div id="head_bottom" class="sman"></div> </div> </body> </html>