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) ; } |
5.- Cambiar la escala de un Div con css3 (ideal para utilizar con un hover para hacer zoom)
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: scale(0.478, 0.613); /* El primer valor es en escala de X y el segundo de Y */ -moz-transform: scale(0.478, 0.613); -o-transform: scale(0.478, 0.613); } |
6.-Cambiar perspectiva de un objeto 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: skew(36deg, -164deg); /* El primer valor es para X y el segundo de Y los valores son de -180 al 180*/ -moz-transform: skew(36deg, -164deg); -o-transform: skew(36deg, -164deg); } |
7.- Mover o trasladar objetos con CSS3. (esta no se va notar gráficamente así que simplemente pondré el código). Con esto podrás mover un objeto 300px a la derecha o izquierda o 300px arriba o abajo a partir del lugar en donde se encuentra.
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: translate(2px, 7px); /* Primer valor de X y el segundo de Y, ambos tienen valor desde -300 a 300px*/ -moz-transform: translate(2px, 7px); -o-transform: translate(2px, 7px); } |
Si eres uno a los que no les gusta tener mucho código, puedes hacer una combinación de los 4 anteriores(7,6,5 y 4) de la siguiente forma.
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(28deg) scale(0.478) skew(-57deg) translate(17px); -moz-transform: rotate(28deg) scale(0.478) skew(-57deg) translate(17px); -o-transform: rotate(28deg) scale(0.478) skew(-57deg) translate(17px); } |
8.- Bordes degradados con css3 (en este caso es solo para mozilla firefox).
1 2 3 4 5 6 7 8 | div { width:300px;height:90px;margin:0 auto;color:#000; border:solid 9px #333; -moz-border-bottom-colors: #333 #444 #ccc #000; -moz-border-top-colors: #333 #444 #ccc #000; -moz-border-left-colors: #333 #039 #ccc; -moz-border-right-colors: #333 #039 #ccc; } |
Mas información sobre -moz-border-#-colors
9.- Colocar sombra a un div con CSS3.
1 2 3 4 5 6 7 | div { width:300px;height:90px;margin:0 auto;color:#000; border:solid 1px #ddd; -moz-box-shadow:7px 8px 2px #333; -webkit-box-shadow:7px 8px 2px #333; box-shadow:7px 8px 2px #333; } |
10.- Posibilidad de incrementar el tamaño de un Div( Hasta ahora solo funciona en Chrome y Safari).
1 2 3 4 5 6 | div{ width:300px;height:90px;margin:0 auto;color:#000; border:solid 1px #ddd; resize: both; /*Activa resize para agrandar o disminuir el tamaño de un div*/ overflow: auto; /* Activa el scroll*/ } |
Para colocar un limite en el incremento o decremento del tamaño se puede utilizar max-width, min-width, max-height y min-height, de esta forma un div crecerá o reducirá hasta donde especifiquemos.
Lo anterior también se puede aplicar en campos input y textareas.
11.- Texto con sombra en CSS3
SoyCachanilla.com
1 | p{text-shadow:0px 1px 1px #000000; /* Primer valor indica la posición de la sombra en X y el segundo en Y, el tercer valor es el efecto blur de la sombra y por ultimo es el color de la sombra*/} |
12.- Rotar texto con CSS 3
1 2 3 4 5 6 | p{ height: 5em;line-height: 3em;color:#000; -webkit-transform: rotate(90deg); /* los valores van del 0 al 360 */ -moz-transform: rotate(90deg); -o-transform: rotate(90deg); writing-mode: bt-lr; } |
13.- Crear imagen transparente con CSS3 estilo rollover.
En el CSS utilizamos opacity combinado con a:hover, en mi caso yo lo probé con firefox e IE y funciono perfecto, en safari y chrome no, cada que pasemos el mouse por encima de la imagen se hará semi transparente.
1 2 3 | img{border:0px;} a:link img{opacity:0.4;filter:alpha(opacity=100); -moz-opacity: .75; } /* El primero es CSS3, el segundo filter:alpha es solo para IE y el ultimo -moz es solo para firefox*/ a:hover img{opacity:0.4;filter:alpha(opacity=20);-moz-opacity: .30; } |
HTML
1 | <a href="http://twitter.com/danielmd"><img src="http://i27.tinypic.com/r6y0kx.jpg" alt="Imagen transparente con CSS3" /></a> |
14.-Efecto mascara en imágenes con CSS 3 y gradientes (solo funciona en safari)
CSS
1 | img{-webkit-border-radius: 10px; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));} |
HTML
1 | <img src="http://i29.tinypic.com/2zi81uo.jpg" alt="Imagen transparente con CSS3" /> |
15.- Efecto hover a un Div.
Ya para terminar les dejo el siguiente código combinando algunos de los trucos de anteriores, se trata de un div que al pasar el mouse por arriba de el cambia su apariencia, su tamaño y su posición.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> <html> <head> <title> Efecto Hover en un div</title> <style type="text/css"> <!-- body{font-family: verdana,serif;} #contenido{margin:0 auto; padding:70px; text-align:center;} .ejemplo{ width:300px;height:90px;margin:0 auto;color:#000; border:solid 1px #ddd; color:#333; -moz-box-shadow:7px 8px 2px #333; -webkit-box-shadow:7px 8px 2px #333; box-shadow:7px 8px 2px #333; } .ejemplo:hover{ width:340px;height:100px;margin:0 auto;color:#000; border:solid 1px #ddd; background:#333; color:#fff; -webkit-transform: skew(36deg, -33deg); -moz-transform: skew(36deg, -33deg); -o-transform: skew(36deg, -33deg); -moz-border-radius-topleft: 45px; -moz-border-radius-topright:46px; -webkit-border-top-left-radius:45px; -webkit-border-top-right-radius:46px; border-top-left-radius:45px; border-top-right-radius:46px; } .ejemplo p{ height: 5em;line-height: 3em;} --> </style> </head> <body> <div id="contenido"> <div class="ejemplo"> <p>SoyCachanilla.com</p> </div> </div> </body> </html> |
Y todavía hay muchos mas como el uso de animaciones sin javascript o flash, pero la verdad yo no los se utilizar muy bien.
En realidad parecen ser crossbrowser, no los mire con safari por que me dio weba jaja, pero se mira muy bien, difícilmente aplicables en producción, pero me imagino que esto en combinación con un framework como Jquery, puede ser dinamita!, saludos
Pues yo utilizo muchos de ellos, claro, menos los efectos 3D, pero lo que son sombras, degradados, bordes redondos entre otros.. Si los uso, con muchos de ellos se pueden reemplazar imágenes, por ejemplo el fondo de una web se puede hacer con un degradado en vez de utilizar una imagen que te puede pesar no se, 20K que solo hacen que tu web sea mas pesada.
Efectos rollover con CSS en texto, imágenes e incluso divs y tablas.
Y pues si, con Jquery se pueden hacer mucho mas maravillas combinadas con esto.
Saludos!.
Me sabia todos menos el de -moz-transform, parce que lo de los degradados aun no puedo verlo en algunos navegadores y realmente me gustaria, la tecnica que mas uso es la de border-raduis y otra de bordes que añade uno despues del actual y si se desea otro antes del actual. Hay buenos trucos por ahi para hacer CSS3 cross-browser o usar jquery para emular sus efectos.
Yo me puse hacer un framework para trabajar con algunos estilos de CSS3 y que agarren en navegadores viejos, creo que le voy a meter algo o bastante de cross-browser, pero ya seria programado con php para que al entrar con un navegador se utilicen los javascript y si es uno mas nuevo, pues que se uso solo el CSS3.
A ver si lo puedo terminar y lo publico.
Muchisimas gracias, me han servido mucho para mejorar un poco mas mi blog de finanzas y resolver dudas.
copie y peque el codigo pero no funciona en internet explorer =s
En internet explorer no van a funcionar todas, y mas si se trata de un IE inferior al 9
Hola danielmd, encontré tu pagina por casualidad y me pareció todo muy interesante voy a empezar a experimentar, pero lo más llamativo es, en tu pagina, como las imágenes aparecen en el momento en que están en la pantalla. Qué es eso ? espero hayas entendido mi pregunta, si podés comentarme cuál es esa propiedad te lo agradecería. Pedro
Se llama Lazy Load utilizando JQuery, aquí puedes ver un ejemplo
http://www.appelsiini.net/projects/lazyload
Espero te sirva, saludos!
buenas disculpa he estado trabajando con css3 desde hace poco pero no ayo como resolver un problema lo que sucede es que tengo un div el cual crecera con el contenido de forma dinamica y a este div le agrego un gradiente, no se si ya ven mi problema.. el gradiente me obliga a darle un tamaño height y no sirve que lo aga auto por que no se muestra entonces si se agranda el div se deja de mostrar el gradiente, no se si podrian ayudarme espero su respuesta hasta luego 🙂
Hola tocayo, lo que puedes hacer es agregarle al gradientes porcentajes en ves de tamaños.
Por ejemplo:
background: -moz-linear-gradient(top, rgba(139,215,168,1) 0%, rgba(6,172,72,1) 48%, rgba(198,234,210,1) 100%);
Revisa esta herramienta, te puede ser útil.
http://www.colorzilla.com/gradient-editor/
Es posible girar 90 grados un archivo swf contenido en un div?
Fíjate que nunca lo he probado, tal vez con un poco de html5, prueba con el numero 6, a lo mejor y se puede..