JMiur [E]

Es probable que a nadie se le ocurra usar algo como esto pero, no deja de ser una curiosidad y bien armada.

Digo que sería raro que alguien quisiera utilizarlo porque está armado exclusivamente con CSS3, no se vería en todos los navegadores y la cantidad de reglas es ... bueno, muchas.

.gmail-logo, .gmail-logo *, .gmail-logo *:before, .gmail-logo *:after{margin:0;padding:0;background:transparent;border:0;outline:0;display:block;font:normal normal 0/0 serif;}
.gmail-logo{margin:0 auto;background:rgb(201, 44, 25);width:600px;height:400px;border-top:4px solid rgb(201, 44, 25);border-bottom:4px solid rgb(201, 44, 25);border-radius:10px;}
.gmail-logo .gmail-box{overflow:hidden;float:left;width:440px;height:400px;margin:0 0 0 80px;background:white;border-radius:5px;}
.gmail-logo .gmail-box:before{position:relative;content:'';z-index:1;background:white;float:left;width:320px;height:320px;border:100px solid rgb(201, 44, 25);margin:-310px 0 0 -40px;border-radius:10px;-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);}
.gmail-logo .gmail-box:after{content:'';float:left;width:360px;height:360px;border:2px solid rgb(201, 44, 25);margin:10px 0 0 40px;-o-transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);}
.gmail-logo:after{content:'';position:relative;z-index:2;content:'';float:left;margin-top:-404px;width:600px;height:408px;display:block;background:-moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);background:-o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.1)));}
.gmail-logo:hover{background:#313131;border-color:#313131;}
.gmail-logo:hover .gmail-box:before{border-color:#313131;}
.gmail-logo:hover .gmail-box:after{border-color:#313131;border-bottom-color:#fff;border-right-color:#fff;}


Sólo son ejemplos que muestran la versatilidad de estas nuevas propiedades y además, en este caso, Irham Kendeni, que es su desarrollador, se ha esmerado en darnos as explicaciones paso a paso lo que permite tratar de entender la idea y de ese modo, poder aplicar esas cosas ara resolver nuestras propias necesidades que, seguramente, serán mucho más modestas.

Y si alguno cree que eso fue excesivo, es porque no vieron este otro:

     

Sin comentarios

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR