15 trucos CSS 3 en divs, texto e imágenes

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:
redondear esquinas 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 con css3
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
crear 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)
div transparente con css3

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
girar un objeto con css

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)
cambiar escala de un objeto

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
como modificar la 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).
bordes degradados con css

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.
sombra a un div con css 3

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).
incrementar el tamano de un div

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
girar 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.
imagen transparente con css

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)

efecto mask con css3 html
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" />

Mas efectos mask webkit

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.

13 Comentarios

  1. Ivan Garcia 3 agosto 2010
    • danielmd 3 agosto 2010
  2. Luis Lopez 24 agosto 2010
    • danielmd 26 agosto 2010
  3. ARIEL Castellanos 29 octubre 2010
  4. Jonathan 4 enero 2011
    • danielmd 29 enero 2011
  5. Pedro 20 abril 2011
  6. daniel nuñez 16 julio 2011
    • danielmd 17 julio 2011
  7. Miguel Angel 9 septiembre 2011
    • danielmd 10 septiembre 2011

Deja un comentario