domingo, 30 de septiembre de 2012

Una curiosidad: Logos de GMail con CSS3

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:

     

No hay comentarios:

Publicar un comentario