Hola, hoy les intentare explicar un poco mas acerca del CSS3 y como utilizarlo, las nuevas funciones, etc.
Para empezar debemos aclarar que CSS3 no lo acepta
IE .
Algunas de las propiedades que veremos hoy seran:
- Text-shadow
- Box-shadow
- Border-radius (Esquinas Redondeadas)
- @font-face
1. Text-shadow:
El Text-shadow es la propiedad quizas mas usada ya que es muy sencilla de usarse y la mas practica.
El codigo es:
text-shadow: 2px 2px 5px #000;El primer valor es la distancia horizontal de la sombra, el segundo la vertical y el tercero al radio del desenfoque y el ultimo al color de la sombra.
Navegadores que soportan text-shadow: Safari 3.1+, FireFox 3.5, Chrome 2.0+, Opera 9.6+
2. Box-shadow:
La propiedad box-shadow se utiliza de una manera muy similar a text-shadow, pero añade sombras a los elementos en su conjunto y no al texto dentro de ellos:
box-shadow: 5px 5px 10px 10px #000;Los dos primeros valores son el desplazamiento de la sombra, el tercero el radio de desenfoque, y el cuarto valor del radio de propagación. El último valor es, por supuesto, el color de sombra.
Navegadores que soportan box-shadow: Safari 3.1+, FireFox 3.5, Chrome 1.0+
3. Border-radius:
Porque todo el mundo le gusta las esquinas redondeadas, la especificación CSS3 contiene el popular frontera de radio. Mozilla y Webkit requieren sus prefijos estándar, así que para añadir esquinas redondeadas con un radio de 10px a un elemento, utilice la siguiente:
-moz-border-radius: 10px; /* For FireFox */
-webkit-border-radius: 10px; /* For Safari/Chrome */
border-radius: 10px; /* For when the standard gets fully supported */
Navegadores que soportar border-radius: Safari 3.1+, FireFox 2.0, FireFox 3.0+, Chrome 1.0+
4. @font-face:
Aunque técnicamente no son una propiedad, la declaración de CSS3 font-face ha estado recibiendo bastante la atención en los últimos tiempos. Håkon Wium Lie, el proponente original de la CSS, escribió un artículo de lectura obligada para todos los A List Apart sobre @font-face. Esencialmente, esto permite a los desarrolladores incorporar fuentes en sus páginas que pueden ser convocadas por el simple propiedad font-family.
Para incrustar una fuente, sólo tiene que añadir una declaración @font-face de la siguiente manera:
@font-face {
font-family: "Nombre de mi fuentet";
src: url(Font.otf) format("opentype");
}Esto le indica al navegador que cada vez que el tipo de letra "Nombre de mi fuente" se utiliza, tire de ella de "Font.otf." Simple y genial, de verdad. Así entonces para usar nuestra fuente, que acabamos de declarar, como lo haríamos con cualquier otra fuente:
h1 { font-family: "Nombre de mi fuente", sans-serif; }Navegadores que soportan @font-face: Safari 3.2+, FireFox 3.5, Chrome 2.0+, IE4+
CSS3 trae un poco de materia impresionante a la mesa, y ahora es el momento de empezar a usarlo. A medida que la comunidad de desarrollo web se vuelve más y más sobre CSS3 emocionados, los navegadores Mozilla y Webkit son rápidamente añadiendo más y más apoyo para nuevas propiedades, declaraciones y selectores. Así que toma ventaja de esto!
