Diez atributos CSS3 imprescindibles (Segunda parte 10/10)

6 – Media Queries

Las Media Queries nos permiten “ejecutar” cierto código CSS cuando se cumple una o más condiciones. Y por “ejecutar” me refiero a que el código contenido en esta Media Querie se superpondrá al resto de los valores ya definidos para los elementos que estemos modificando con la misma. Suena un poco confuso pero es bastante sencillo, especialmente si vemos el código:

1
2
3
4
5
6
7
8
9
10
11
.caja{
      width:200px;
      height:100px;
 }
 
 @media only screen and (max-width:768px) and (min-width:480px){
     .caja{
           width:100px;
           height:50px;
     }
 }
.caja{
      width:200px;
      height:100px;
 }

 @media only screen and (max-width:768px) and (min-width:480px){
     .caja{
           width:100px;
           height:50px;
     }
 }

Como se puede ver en el código, tenemos una clase llamada caja que tiene un ancho de 200 píxeles y un alto de 100 píxeles, y también tenemos declarada una Media Querie debajo, básicamente lo que esta Media Querie hace, es cambiar el alto y el ancho cuando la pantalla se encuentra entre 768 y 480 píxeles, tan simple como eso. Mientras el ancho de la página se mantenga en ese rango estos valores se superpondrán a los declarados anteriormente. Las Media Queries se utilizan principalmente para realizar páginas Responsives, o sea páginas que se adapten al tamaño de la pantalla del usuario solo utilizando CSS y HTML. Para más datos sobre la utilización de Media Queries les dejo un vínculo a un post que realizamos anteriormente sobre Responsive Web Design y otro a las especificaciones de la W3C sobre Media Queries.

7 – @Font-face

La norma @font-face nos permite importar un estilo de fuente desde una archivo .ttf o .otf (IE9 solo soporta .otf y las versiones anteriores no soportan @font-face) ubicado en nuestro servidor o en un externo. La sintaxis es la siguiente:

1
2
3
4
5
6
7
8
9
10
11
@font-face{
           font-family: miPrimeraFuente;
           src: url('../fuentes/Sansation_Light.ttf')
           ,url('../fuentes/Sansation_Light.eot'); /* IE9 */
           font-weight: normal;
           font-style: normal;
 }
 
.caja{
      font-family:myFirstFont;
 }
@font-face{
           font-family: miPrimeraFuente;
           src: url('../fuentes/Sansation_Light.ttf')
           ,url('../fuentes/Sansation_Light.eot'); /* IE9 */
           font-weight: normal;
           font-style: normal;
 }

.caja{
      font-family:myFirstFont;
 }

En el caso que la fuente no se encuentre en nuestro servidor simplemente deberemos colocar la ruta completa a la misma. Luego podremos utilizar el atributo font-family para utilizar esa fuente en el elemento deseado.

8 – Border-image:

Como su nombre lo indica border-image nos permite colocar una imagen como borde. Su funcionamiento tiene algunas dificultades a la hora de entender como alinear las imágenes. En el código siguiente podemos ver la estructura del atributo:

1
2
3
4
5
6
.caja{
   -moz-border-image:url("border.png") 30 30 round; /* Firefox */
   -webkit-border-image:url("border.png") 30 30 round; /* Safari */
   -o-border-image:url("border.png") 30 30 round; /* Opera */
   border-image:url("border.png") 30 30 round;
 }
.caja{
   -moz-border-image:url("border.png") 30 30 round; /* Firefox */
   -webkit-border-image:url("border.png") 30 30 round; /* Safari */
   -o-border-image:url("border.png") 30 30 round; /* Opera */
   border-image:url("border.png") 30 30 round;
 }

Donde primero definimos la ruta de la imagen, luego el valor de desplazamiento interno de la imagen con respecto al borde, luego el ancho de la imagen y por último si la imagen debe ser redondeada, repetida o estirada. Se le pueden colocar algunos valores más a este atributo, sin embargo creo que ya es bastante útil así, para todos aquellos que necesiten más información les dejo el vínculo a w3schools con las características y ejemplos (necesarios para entender) de border-image.

9 – Reflejos

Permite reflejar un elemento sin utilizar Javascript. De momento solo es compatible con Chrome y Safari, y el código es el siguiente:

1
2
3
.caja {
       -webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.3)));
 }
.caja {
       -webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.3)));
 }

Donde primero se indica que el reflejo será por debajo 5px y luego se declara el color del mismo utilizando una gradiente que ya vimos en el post pasado.

10 – Word-wrap

Este atributo nos permite elegir si cuando un texto sin espacios es muy largo y no entra en el elemento contenedor lo corta o no, en caso de que si, el texto cortado pasará a la otra linea. Una herramienta bastante útil cuando un inadaptado escribe una concatenación de letras sin sentido o simplemente escribe colocando comas para separar pero sin espacio luego de las misma, un verdadero fastidio. El código es el siguiente:

1
2
3
.caja {
       word-wrap: break-word; /* o "normal" */
 }
.caja {
       word-wrap: break-word; /* o "normal" */
 }

Creo que no precisa explicación, terminamos con algo sencillo.

Para finalizar aclaro que no todos estos atributos son ampliamente compatibles entre navegadores, la mayoría son compatibles con Firefox, Chrome, Opera y Safari, los más usados como border-radius y box-shadow (junto con otros) son compatibles con IE9 y IE10, y por último casi ninguno es compatible con IE8 y versiones anteriores. En algunos casos puede ser conveniente agregar el prefijo propio de cada navegador para escribir estos atributos. Espero que sea de utilidad.

Author: gp2

Desarrollador Web, Programador PHP y MySQL, conocedor de HTML5, CSS3 y Javascript. Del culto JQuery, gran coleccionador de funciones ajenas y especialista en hacer código redundante. Últimamente programador Java.

Deja un comentario