Para todos aquellos a los que les guste el diseño web o tienen ganas de aprender, hoy les dejo algunos trucos de CSS3 que he aprendido gracias a muchos sitios que leo por Internet.
1.- Crear Div con esquinas redondeadas con CSS3:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 | div{ width:300px;height:90px;margin:0 auto;color:#333;background:#D9E7F0;padding-top:30px; border:solid 4px #B1CDE0; -moz-border-radius-topleft: 45px; /* Valores de 0 a 75 */ -moz-border-radius-topright:46px; -moz-border-radius-bottomleft:75px; -moz-border-radius-bottomright:75px; -webkit-border-top-left-radius:45px; -webkit-border-top-right-radius:46px; -webkit-border-bottom-left-radius:75px; -webkit-border-bottom-right-radius:75px; border-top-left-radius:45px; border-top-right-radius:46px; border-bottom-left-radius:75px; border-bottom-right-radius:75px; |
2.- Div con gradientes CSS3, lineal y circular.

Gradiente lineal con CSS3
1 2 3 4 5 | div{ width:300px;height:90px;margin:0 auto;color:#333; border:solid 1px #333; background:-moz-linear-gradient(73% 11% 177deg, #1128AA, #004EFF 64%); /* firefox */ background:-webkit-gradient(linear, 80% 20%, 33% 14%, from(#3924D1), to(#4166FF)) /* chrome */ } |
Gradiente circular con CSS3

1 2 3 4 5 | div { width:300px;height:90px;margin:0 auto;color:#333; border:solid 1px #333; background:-moz-radial-gradient(51% 13% 314deg, #0000FF, #000043 71%); background:-webkit-gradient(radial, 165 0, 0, 220 -257, 465, from(#0364CF), to(#000000)); } |
Explicación detallada de moz-radial-gradient y linear.
Explicación detallada de webkit-gradient.
3.- Transparencias con CSS3 (en este caso se aplica a un DIV)

1 2 3 4 5 | div { width:300px;height:90px;margin:0 auto;color:#333; border:solid 1px #333; background:#000; opacity: 0.4; /* los valores van desde 0.1 hasta 1.0 */ } |
4.- Rotar objetos con css3

1 2 3 4 5 6 7 | div { width:300px;height:90px;margin:0 auto;color:#333; border:solid 1px #333; background:#000; -webkit-transform: rotate(180deg) ; /* los valores van desde el 0 al 360 */ -moz-transform: rotate(180deg) ; -o-transform: rotate(180deg) ; } |

















