1. CSS3
Instituto Normal de Enseñanza Técnica
Gabriela Pérez Caviglia
http://creativecommons.org/licenses/by-nc-nd/3.0/

2. Bordes redondeados
Crea un div con bordes redondeados
.demo { background: #009933; width:585 px; height: 110 px; border-
radius: 15px; -moz-border-radius:15 px; -webkit-border-radius:15px; -ms-
border-radius:15px; }
Para firefox Chrome, Safari
-moz-border-radius:15 px; -webkit-border-radius:15px;
IE8
-ms-border-radius:15 px;
border-radius-topleft: Esquina superior izquierda.
border-radius-topright: Esquina superior derecha. estándar
border-radius-bottomleft: Esquina inferior superior izquierda.
border-radius-bottomright: Esquina inferior superior derecha. border-radius

3. Sombras
Efecto de sombra para los divs
.shadow {-moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px
4px #000; box-shadow: 3px 3px 4px #000;}
Para firefox Chrome, Safari
-moz-border-radius:15 px; -webkit-border-radius:15px;
IE 8
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
IE 5.5 – 7
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
estándar
box-shadow

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/