En el capítulo anterior de este manual vimos todo lo referente a los selectores en HTML5 y CSS3
@Font-face
@ Font-face es una regla CSS que te permite subir una fuente particular a tu servidor para incorporar al diseño de una página web. Esto significa que los diseñadores web ya no tienen que ajustarse a un conjunto particular de fuentes «web segura» que el usuario haya pre-instalado en su equipo. ¿Cómo lo hago?
1. Crea una regla font-face, dando un nombre cualquiera a esta fuente: font-family: miPrimeraFuente;
2. Incluye el archivo de la fuente en algún lugar del servidor y haz referencia de la ruta donde se encuentra: src: url (“https://direccion.com/fuentes/Hug_Bear.ttf”);
3. Si el archivo de la fuente se encuentra en un dominio diferente, utiliza la dirección URL completa en su lugar: scr: (“https://www.direccionweb.com/css3/Hug_Bear.ttf”); Ahora la fuente está lista para usar, incorporándola en el diseño de cualquier página web que realices. A continuación un ejemplo de cómo usarlo para todos los elementos div: div { font-family: MiPrimeraFuente;}
Sintaxis
@font-face { style=»color: #993300;»> Propiedades de fuente }
Tabla de propiedades para fuente
| Descriptor fuente | Valor | Descripción |
| Font-family | Nombre | Obligado. Define el nombre de la fuente. |
| scr | url | Obligado. Define la URL donde se encuentra la fuente para ser utilizada. |
| font-stretch | normalcondensedultra-condensedextra-condensedsemi-condensedexpandedsemi-expandedextra-expandedultra-expanded | Opcional. Define cómo la fuente debe ser estirada. El valor por defecto es “normal”. |
| font-style | normalItalicoblique | Opcional. Define cómo la fuente debe ser estilizada. El valor por defecto es “normal” |
| font-weight | normalbold100… hasta 900 | Opcional. Define el peso de la fuente. El valor por defecto es “normal” |
Ejemplo
@font-face {font-family: miPrimeraFuente; src: url (“https://algunsitioweb.com/fuentes/Hug_Bear.ttf”);} #titulo {font-family: “miPrimeraFuente”;}
Creando columnas con CSS3
CSS3 nos trae la nueva propiedad denominada “columns”. Con ella podremos crear una estructura de texto definiendo la cantidad de columnas y el ancho de ellas respectivamente. Esta regla de estilo es soportada por los navegadores Chrome, Safari, Firefox y Opera. Por esta razón es que los ejemplos se realizarán para dicha compatibilidad ocupando los prefijos –moz- y –webkit- respectivamente: body { -moz-column-width: 200px; -webkit-column-width: 200px; } En este ejemplo el elemento “body” se establece que el ancho de las columnas será de 200 pixeles. El número exacto de columnas dependerá del espacio disponible. 
El número de columnas también se pueden configurar de forma explícita en la hoja de estilo: body { -moz-column-count:2; -webkit-column-count:2; } En este caso, el número de columnas es fijo (2) y el ancho de las columnas puede variar en función de la anchura disponible.
La propiedad “columns” puede ser utilizada para una o ambas propiedades (ancho y número de columnas): body {-webkit-columns: 2;} body { -webkit-columns:300px;} body { -webki-columns:2 300px;} En estos tres ejemplos, el número de columnas, el ancho de las columnas y el número y ancho de las columnas se establecen respectivamente. Otro grupo de propiedades introducidas en este módulo son las que se refieren a los espacios y líneas de relleno entre las columnas: column-gap: establece la separación entre dos columnas adyacentes. (similar a “padding”) column-rule: establece una línea de relleno entre dos columnas adyacentes. Veamos algunos ejemplos para comprender de mejor forma: article { -webkit-column-count: 3; -webkit-column-gap: 15px; -webkit-column-rule: 2px solid red; } En este ejemplo la primera declaración establece la cantidad de columnas (3). La segunda declaración (column-gap) establece el espacio entre dos columnas adyacentes de 15 pixeles. En medio de este espacio habrá una línea de 2 pixeles, sólida y de color rojo. Para utilizar una linea delgada puedes usar la palabra “thin” (delgada) para definir el grosor de la línea en lugar de establecerlo en pixeles. Además se ha fijado el color por medio de su nombre en reemplazo de su valor hexadecimal.
rgba en CSS3
Y para finalizar este capítulo estimados lectores veremos cómo incorporar rgba en CSS3. Como sabrás normalmente los colores en CSS los hemos expresados en RGB y en sus valores hexadecimal. Ahora CSS3 nos incorpora más elementos a esta regla. Por un lado a los valores RGB nos añade el canal alfa, quedando, de esta manera, los valores ahora como rgba. El canal alfa (alpha) nos viene a dar el grado de transparencia u opacidad a los colores, siendo para a el valor cero (0) como la transparencia absoluta y uno (1) como la opacidad absoluta o en otras palabras como su máxima visibilidad.
En CSS2.1 y anterior la transparencia la lográbamos con la regla “opacity”. Los valores que debemos representar en la regla rgba será numérico y desde el rango que va desde 0 a 255 para cada color (rgb). Cada uno de los tres colores mezclados se representa de manera numérica en función de su intensidad de 0% a 100%. El porcentaje se indica con un número entre 0 y N donde 0 significa 0% de intensidad y N 100% de intensidad. El valor N dependerá de cuántos bits utilicemos pero para programación y diseño web se utiliza el modo 24 bit donde N será 255 que a su vez representa el 100% de intensidad. De esta manera el color amarillo sería: Rojo: 255 verde: 255 azul: 0 Cuando definimos un texto en HTML utilizamos en CSS un color RGB de 24 bits (de 0 a 255) en modo hexadecimal, de manera que el porcentaje de intensidad de un color será un número entre 00 y FF (255). Con CSS3 no tendría sentido utilizar los valores hexadecimales. Un ejemplo de cómo utilizaríamos la nueva regla rgba:
body {
background-color: rgba(77,65,30,0.7)
}
</Capítulo 6>
En el capítulo 7 veremos de forma muy detallada «Esquinas redondeadas» y «Crear Sombras» todo esto con muchos ejemplos y con la mayor cantidad posible de información, como nos ha caracterizado en cada capítulo. Recuerda leer y practicar todos los capítulos anteriores de este Manual de HTML5 y CSS3. Hasta la próxima entrega !!
