CSS3
¿Qué es el CSS (Cascading Style Sheets, hojas de estilos en cascada)?
Las hojas de estilo en cascada son usadas para describir la presentación de las páginas
web. CSS permite la separación del contenido de la presentación del documento
(disposición, colores, fuentes, etcétera).
REGLA
Nuevas Propiedades
@font-face (web incrustación de fuentes)
Permite incrustar fuentes en sus páginas que pueden ser llamados por el simple font-
family propiedad.
Su sintaxis es la siguiente:
@font-face {
font-family: <un-nombre-de-fuente-remota>;
src: <url> [,<origen>]*;
[font-weight: <peso>];
[font-style: <estilo>];
}
Con esto definimos el tipo de letra y su ubicación en nuestro servidor. Si queremos
utilizar dicha fuente tan solo tenemos que llamarla con font-family en las reglas de
estilo que deseemos.
background-size
Permite especificar el tamaño de las imágenes de fondo que utilicen cualquiera de las
longitudes, porcentajes, o mediante el uso de una de las dos palabras
clave; contain o cover.
cover le dice al navegador para asegurarse de que la imagen siempre cubre todo el
recipiente, incluso si tiene que estirar la imagen o cortar un poco fuera de uno de los
bordes. contain por su parte, dice que siempre muestran la imagen completa, incluso si
eso deja un poco de espacio a los lados o el fondo.
La palabra clave por defecto - auto - le dice al navegador para calcular automáticamente
el tamaño basado en el tamaño real de la imagen y la relación de aspecto.
border-image
Básicamente, la propiedad declara una imagen para ser utilizado antes de decirle al
navegador cómo recortar y estirar las diferentes secciones de la misma
-webkit-border-image: url (whiteButton.png) 0 12 0 12 tramo estiramiento;
-moz-border-image: url (whiteButton.png) 0 12 0 12 tramo estiramiento;
border-radius
Permite crear esquinas redondeadas, la especificación CSS3 contiene la famosa frontera
de radio.
border-radius: 10px
box-shadow
Permite aplicar sombras a los elementos.
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 difusión. El último valor es, por supuesto, el color
de sombra.
column-count, column-width
Permite especificar el número de columnas y el ancho de las mismas.
-moz-column-count: 2; / * Para FireFox * /
-webkit-column-count: 2; / * Para Safari / Cromo * /
column-count: 2; / * Para cuando la norma se apoya plenamente * /
-moz-column-width: 250px; / * Para FireFox * /
-webkit-column-width: 250px; / * Para Safari / Cromo * /
column-width: 250px; / * Para cuando la norma se apoya plenamente * /
text-overflow
Se ocupa de las situaciones en que el texto se recorta cuando se desborda de la caja del
elemento. Puede ser recortado, o mostrar como una cadena definida por el autor.
text-shadow
Permite crear sombra en el texto.
text-shadow: 2px 2px 5px # 000;
El primer y segundo valores representan el desplazamiento de la sombra, el tercero el
radio de desenfoque, y el último valor el color de la sombra.
transition
Crear efectos de transición CSS3 le permite cambiar los valores de propiedad sin
problemas (de un valor a otro), durante un período determinado.
transition: width 2s linear 1s
