4. Sombras
box-shadow: 3px 3px 4px #000;
•Desplazamiento horizontal de la sombra: quiere decir que la sombra aparecerá 3
píxeles a la derecha. Si la sombra quisiéramos que apareciera un poco hacia la
izquierda del elemento original que la produce, pondríamos un valor negativo a este
atributo.
•Desplazamiento vertical de la sombra: El es el desplazamiento vertical de la sombra
con respecto a la posición del elemento que la produce. Este valor es similar al
desplazamiento horizontal. Valores negativos harán que la sombra aparezca
desplazada un poco hacia arriba.
•Difuminado: El tercer valor indica cuánto queremos que esté difuminado el borde de
la sombra. Si valor fuera cero, querría decir que la sombra no tiene ningún difuminado
y aparece totalmente definida. Si el valor es mayor que cero, quiere decir que la
sombra tendrá un difuminado de esa anchura, 4 píxeles en el ejemplo.
•Color de la sombra: El último atributo que se indica en el atributo box-shadow es el
color de la sombra.
5. Transparencia
Efecto de transparencia a un div estándar: opacity
Esta propiedad necesita un valor entre 0.0 (10% trasnparente) y 1.0 (sin
transparencia.
IE 8
Para firefox filter: “alpha(opacity=60)” Chrome, Safari
IE 6– 7
estándar filter: alpha(opacity=60); estándar
Efecto transparencia Efecto transparencia estado hover
img{ a:hover img{
opacity:.50; opacity:.40;
filter:alpha(opacity=50); filter:alpha(opacity=40);
filter: “alpha(opacity=50)”; filter: “alpha(opacity=40)”;
} }
6. Fuentes
Para usar fuentes web específicas, usamos la regla: @font-face
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }
Para usar la fuente:
h3 { font-family: Delicious, sans-serif; }
Para generar fuentes @font-face
http://www.fontsquirrel.com/fontface/generator
7. Generadores de efectos CSS 3
http://www.css3maker.com/
http://css3generator.com/
http://westciv.com/tools/gradients/
http://www.intermagina.com/generadores-de-efectos-css3/