El dibujo inferior esta realizado integramente con código css sin usar imágenes, y es compatible con Firefox 2, IE7, IE6 y Opera 9. Aunque el autor dice que no lo ha hecho porque estaba aburrido y no tiene utilidad, yo lo he posteado porque creo que es uno de los ejercicios más complicados que he visto con éste lenguaje y he publicado también el código fuente en la parte extendida de éste post.
El código css
/* - - - - - - - - - - -*/
/* Cuadro */
/* - - - - - - - - - - -*/
div#cuadro {
margin: auto;
margin-top: 30px;
border-top: 25px solid #f8e297;
border-right: 25px solid #d1a662;
border-left: 25px solid #f2d494;
border-bottom: 25px solid #CEAA7A;
background-color: #60dbfe;
height: 400px;
width: 800px;
overflow: hidden;
position: relative
}/* - - - - - - - - - - -*/
/* Empezando Cielo */
/* - - - - - - - - - - -*/
div#cielo {
position: absolute;
z-index: 0;
width: 800px;
height: 215px
} div#ct {background-color: #36d1fe; height: 125px}
div#cb {background-color: #52d8fe; height: 90px}/* Arcoiris */
div#arcoiris {
width: 350px;
position: relative;
left: 161px;
margin: 0;
padding: 0;
top: -22px
}div#arcoiris span {margin: 0; padding: 0; position: absolute}span#arco-rojo {font-size: 165em; color: #e9232a; top: -1906px; left: -237px}
span#arco-naranja {font-size: 142em; color: #f57d2d; top: -1615px; left: -180px}
span#arco-amarillo {font-size: 119em; color: #f3df37; top: -1322px; left: -125px}
span#arco-verde {font-size: 96em; color: #4fa437; top: -1032px; left: -68px}
span#arco-azul {font-size: 73em; color: #0568ad; top: -743px; left: -12px}
span#arco-morado {font-size: 50em; color: #861e84; top: -455px; left: 45px}
span#arco-cielo {font-size: 27em; color: #60dbfe; top: -170px; left: 102px}/* Sol */
div#sol {
position: absolute;
top: 0;
left: 0;
}div#sol span {position: absolute}span#sol1 {font-size: 59em; color: #f5c520; top: -624px; left: 69px}
span#sol2 {font-size: 47em; color: #f8d356; top: -473px; left: 99px}
span#sol3 {font-size: 34em; color: #FADD7C; top: -308px; left: 132px}/* Nubes */
/* Nube 1 */
div#nube1 {
position: absolute;
width: 100px;
height: 120px;
top: 0;
left: 0
}div#nube1 span {position: absolute; color: #fff}span#nub1-1 {font-size: 39em; top: -460px; left: -70px}
span#nub1-2 {font-size: 38em; top: -425px; left: -45px}
span#nub1-3 {font-size: 30em; top: -300px; left: -60px}
span#nub1-4 {font-size: 20em; top: -250px; left: 10px}/* Nube 2 */
div#nube2 {
position: absolute;
width: 172px;
height: 123px;
top: 26px;
left: 590px
}
div#nube2 span {position: absolute; color: #fff}
span#nub2-1 {font-size: 40em; top: -460px; left: -70px}
span#nub2-2 {font-size: 28em; top: -345px; left: -55px}
span#nub2-3 {font-size: 26em; top: -320px; left: 0px}
span#nub2-4 {font-size: 32em; top: -365px; left: -115px}
span#nub2-5 {font-size: 29em; top: -315px; left: 20px}
span#nub2-6 {font-size: 25em; top: -245px; left: 10px}
/* Nube 3 */
div#nube3 {
position: absolute;
width: 52px;
z-index: 2;
height: 33px;
top: 249px;
left: 172px
}
div#nube3 span {position: absolute; color: #fff}
span#nub3-1 {font-size: 14em; top: -180px; left: 5px}
span#nub3-2 {font-size: 10em; top: -130px; left: 30px}
span#nub3-3 {font-size: 7em; top: -78px; left: 33px}
span#nub3-4 {font-size: 9em; top: -100px; left: 17px}
span#nub3-5 {font-size: 13em; top: -163px; left: -7px}
span#nub3-6 {font-size: 8em; top: -95px; left: -8px}
/* - - - - - - - - - - -*/
/* Empezando Montaña */
/* - - - - - - - - - - -*/
div#montana {
width: 478px;
height: 213px;
position: relative;
z-index: 1;
top: 168px;
left: 325px
}
div#mcima {
position: relative;
top: 0px;
width: 10px;
left: 159px;
border-left: 70px solid transparent;
border-right: 110px solid transparent;
border-bottom: 88px solid #4e505d
}
div#mfalda {
position: relative;
bottom: 0;
border-top: 0px;
border-left: 160px solid transparent;
border-right: 130px solid transparent;
border-bottom: 112px solid #4e505d
}
/* Nieve */
span#n1 {
position: absolute;
top: -9px;
z-index: 1;
left: 190px;
border-top: 0px;
border-left: 40px solid transparent;
border-right: 70px solid transparent;
border-bottom: 58px solid #fff
}
span#n2 {
position: absolute;
top: 48px;
z-index: 1;
left: 220px;
border-top: 58px solid #fff;
border-left: 5px solid transparent;
border-right: 30px solid transparent;
border-bottom: 58px solid transparent
}
span#n3 {
position: absolute;
top: 43px;
z-index: 1;
left: 149px;
border-top: 0;
border-left: 45px solid transparent;
border-right: 0;
border-bottom: 58px solid #fff
}
span#n4 {
position: absolute;
top: 53px;
z-index: 1;
left: 145px;
border-top: 0;
border-left: 75px solid transparent;
border-right: 0;
border-bottom: 50px solid #4e505d
}
span#n5 {
position: absolute;
top: 49px;
z-index: 1;
left: 190px;
border-top: 0;
border-left: 40px solid #fff;
border-right: 0;
border-bottom: 24px solid transparent
}
span#n6 {
position: absolute;
top: 40px;
z-index: 1;
left: 288px;
border-top: 0;
border-right: 46px solid transparent;
border-left: 0;
border-bottom: 34px solid #fff
}
span#n7 {
position: absolute;
top: 50px;
z-index: 1;
left: 258px;
border-top: 0;
border-right: 76px solid transparent;
border-left: 0;
border-bottom: 24px solid #4e505d
}
span#n8 {
position: absolute;
top: 48px;
z-index: 1;
left: 255px;
border-top: 40px solid #fff;
border-right: 0;
border-left: 40px solid transparent;
border-bottom: 0
}
/* Arreglando bug en IE7 */
span#n9 {
position: absolute;
top: 48px;
z-index: 1;
left: 277px;
border-top: 40px solid #60dbfe;
border-right: 0;
border-left: 50px solid transparent;
border-bottom: 0
}
span#n10 {
position: absolute;
top: 48px;
z-index: 1;
left: 174px;
border-top: 40px solid #60dbfe;
border-left: 0;
border-right: 28px solid transparent;
border-bottom: 0
}
/* - - - - - - - - - - -*/
/* Empezando suelo */
/* - - - - - - - - - - -*/
div#suelo {
position: absolute;
z-index: 2;
background-color: #acdf32;
height: 34px;
width: 800px;
bottom: 0
}
div#st {background-color: #8bba1d; height: 11px}
div#sb {background-color: #a2d922; height: 14px}
/* - - - - - - - - - - -*/
/* Empezando árbol */
/* - - - - - - - - - - -*/
div#arbol {
width: 140px;
height: 253px;
position: absolute;
z-index: 3;
top: 160px;
left: 50px
}
div#arbol span {position: absolute}
/* Tronco*/
div#tronco1 {
width: 20px;
position: absolute;
bottom: 0;
left: 0;
border-top: 0;
border-left: 20px solid transparent;
border-right: 0;
border-bottom: 150px solid #733804
}
div#tronco2 {
width: 15px;
position: absolute;
bottom: 0;
left: 30px;
border-top: 0;
border-right: 10px solid transparent;
border-left: 0;
border-bottom: 150px solid #883c02
}
/* Hojas */
span#hojas1 {font-size: 75em; top: -870px; left: -155px; color: #4aa237}
span#hojas2 {font-size: 65em; top: -750px; left: -122px; color: #85bf0d}
/* - - - - - - - - - - -*/
/* Empezando mensaje */
/* - - - - - - - - - - -*/
div#mensaje {
position: absolute;
z-index: 5;
opacity: .85;
width: 240px;
border: 3px solid #01c1fa;
background-color: #fff;
top: 5px;
font-size: 9pt;
padding: 2px 5px 2px 5px;
left: 280px
}
div#mensaje h3 {
margin: 0;
padding: 0 0 3px 0;
border-bottom: 2px solid #01c1fa
}
div#mensaje p {
margin: 0;
padding: 0
}
El código Html
<div id="cuadro"><div id="cielo"> <div id="ct"> </div> <div id="cb"> </div>
<div id="nube1"><span id="nub1-1">.</span> <span id="nub1-2">.</span> <span id="nub1-3">.</span> <span id="nub1-4">.</span> </div>
<div id="nube2"><span id="nub2-1">.</span> <span id="nub2-2">.</span> <span id="nub2-3">.</span> <span id="nub2-4">.</span> <span id="nub2-5">.</span> <span id="nub2-6">.</span> </div>
<div id="nube3"><span id="nub3-1">.</span> <span id="nub3-2">.</span> <span id="nub3-3">.</span> <span id="nub3-4">.</span> <span id="nub3-5">.</span> <span id="nub3-6">.</span> </div>
<div id="arcoiris"><span id="arco-rojo">.</span> <span id="arco-naranja">.</span> <span id="arco-amarillo">.</span> <span id="arco-verde">.</span> <span id="arco-azul">.</span> <span id="arco-morado">.</span> <span id="arco-cielo">.</span> </div>
<div id="sol"><span id="sol1">.</span> <span id="sol2">.</span> <span id="sol3">.</span> </div> </div>
<div id="montana"><span id="n1"> </span> <span id="n2"> </span> <span id="n3"> </span> <span id="n4"> </span> <span id="n5"> </span> <span id="n6"> </span> <span id="n7"> </span> <span id="n8"> </span> <!--[if IE 7]> <span id="n9"> </span> <span id="n10"> </span> <![endif]-->
<div id="mcima"> </div><div id="mfalda"> </div> </div>
<div id="suelo"><div id="st"> </div> <div id="sb"> </div> </div>
<div id="arbol"><div id="tronco1"> </div> <div id="tronco2"> </div>
<span id="hojas1">.</span><span id="hojas2">.</span> </div>
<div id="mensaje"><h3>¡Mira Mamá! ¡Sin imagenes!</h3> <p>Pintar en CSS es complicado, fastidioso, confuso, toma mucho tiempo y ni siquiera se ve bien. Entonces ¿Por qué lo hice? ¡Porque se puede! Además, creo que no me quedó tan feo... ¿O si?</p> </div>
</div>
Asier Marqués es un profesional freelance que trabaja como analista y desarrollador de aplicaciones web, así como consultor de sistemas Microsoft.
Abril 11th, 2008 at 6:13 pm
¿Como ha logrado las curvas y circulos ? he mirado el código pero no logro entender.
Octubre 10th, 2008 at 2:11 pm
Son los signos de puntuación del código HTML.
El css especifica el tamaño, color y posición.