Algunas propiedades de texto en CSS3
Algunas propiedades de texto en CSS3
Fuentes en CSS 3. Sintaxis y principales características de la regla CSS @font-face, que nos permite utilizar cualquier tipografía en una página web.
Importar fuentes tipográficas mediante CSS con @font-face
La mencionada regla @font-face nace con CSS 2 pero hasta CSS 3 no empieza a funcionar y prosperar. En un principio sólo funcionaba en IE 5 y únicamente admitía formatos de fuente .eot, pero con el paso del tiempo otros navegadores ampliaron su soporte, comenzando con Safari 3,1. En la actualidad admite otros tipos de formatos tipográficos como son .ttf y .otf y funciona también con los navegadores Opera 10, Firefox 3,1 y por supuesto, todas las versiones superiores a los navegadores ya citados.
Así pues, nada nos impide ya hacer uso de esta @font-face, para poder utilizar cualquier fuente en nuestra web, con la garantía que se verá perfectamente en todos los navegadores más actuales.
Su sintaxis es la siguiente:
@font-face{
font-family:<nombre_fuente>;
src: <source>[,<source>]*;
[font-weight:<weigth>];
[font-style:<style>];
}
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.
Debemos tener en cuenta que si no encuentra la fuente en nuestro servidor, cogerá la siguiente por defecto que tengamos definida en nuestra hoja de estilos.
Ejemplo de uso de @font-face
A continuación colocamos el código de un ejemplo con dos tipos de fuentes, una con formato .eot y otra con formato .otf. El primero se ven en todos los navegadores y en el segundo IE coge otra letra por defecto ya que no admite el formato .otf.
Código de la hoja de estilos:
@font-face {
font-family: Vivaldi;
font-style: normal;
font-weight: normal;
src: url(VIVALDI0.eot);
}
@font-face{
font-family: “gothic”;
font-style: normal;
font-weight: normal;
src: url(gothic.otf);
}
H1{
font-family: “gothic”;
}
H2{
font-family: “Vivaldi”;
}
Y a continuación el código HTML para ver el resultado:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Prueba con estilos de letra distintos</title>
<link rel=”STYLESHEET” type=”text/css” href=”estilo-font-face.css”>
</head>
<body>
<h1>Estamos probando la letra Gothic (no se verá en IE)</h1>
<h2>Aqui la letra Vivaldi</h2>
</body>
</html>
Sombras en el texto con text-shadow de CSS
Cómo aplicar sombras y otros efectos en los textos con CSS y el atributo text-shadow.
El atributo text-shadow de CSS sirve para crear sombras en el texto, pero realmente con un poco de práctica e imaginación nos puede dar soporte a muchos otros efectos interesantes. En este artículo explicaremos dicha regla de estilos y ofreceremos ejemplos variados para demostrar su versatilidad.
Sombra sólida
h1{
text-shadow: 1px 2px #999;
}
Así estamos modificando los encabezamientos de nivel 1 para que tengan una sombra sólida de color gris. Los valores que estamos indicando en la sombra son:
- Desplazamiento de la sombra a la derecha (1px).
- Desplazamiento de la sombra hacia abajo (2px).
- Color de la sombra (#999).
Sombra desenfocada
La sombra sólida está bien, pero en muchos casos vamos a desear hacer un efecto de desenfocado de la sombra, que es mucho más realista y a menudo más atractivo visualmente. Para ello podemos definir un valor adicional, que es el tamaño del difuminado.
h2{
text-shadow: 3px 3px 2px #696;
color: #666;
}
Aquí hemos definido una sombra con 3px de desplazamiento abajo y a la derecha y 2px de difuminado o desenfoque. Además la sombra es de color verdoso. También se ha definido el color del texto, con el atributo “color”, pero eso no tiene nada que ver con la sombra.
Colocar varias sombras en un mismo elemento
Podemos definir varias sombras diferentes sobre un mismo elemento de la página, con lo que se pueden obtener efectos variados y algunos de ellos bastante llamativos. Para ello se pueden colocar las sombras que se deseen separadas por comas.
h3{
text-shadow: 10px 8px #ccf, -10px 12px #fcf, -8px -12px #cfc, 12px -5px #fc9;
color: #999;
}
Esto no tiene ningún misterio, simplemente se irán colocando todas las sombras que definamos, pero habrá que tener un poco de criterio para hacer efectos que merezcan la pena.
Efectos diversos con sombras CSS
El atributo text-shadow es un excelente recurso para hacer distintos tipos de efectos gráficos que resultan visualmente atractivos, más aun teniendo en cuenta que se hacen con texto simple y asignado únicamente algunas reglas de estilo. A continuación veremos varios ejemplos que podemos anotarnos como inspiración, pero la gama de posibilidades va mucho más allá.
Sombra “Giga”:
Podemos utilizar varias sombras sólidas para generar una supersombra para nuestro texto.
h2.sombragiga{
text-shadow: #f83 -1px 1px, #f83 -2px 2px, #f83 -3px 3px, #f83 -4px 4px, #f83 -5px 5px;
color: #060;
letter-spacing: 1px;
}
Efecto de fuego:
Si usamos varias sombras de colores anaranjados podemos conseguir un efecto de fuego. Nos toca hacer un poco de prueba y ensayo para conseguir un resultado realista, pero se puede conseguir algo interesante.
h2.fuego{
text-shadow: 0 0 20px #fefcc9, 2px -2px 3px #feec85, -4px -4px 5px #ffae34, 5px -10px 6px #ec760c, -5px -12px 8px #cd4606, 0 -15px 20px #973716, 2px -15px 20px #451b0e;
color: #666;
}
Contornear el texto con un trazo:
Con cuatro sombras sólidas a un píxel de distancia del texto, situadas a los cuatro lados, podemos conseguir un efecto de trazo alrededor del texto.
h2.contornear{
text-shadow: -1px 0 #090, 1px 0 #090, 0 1px #090, 0 -1px #090;
color: #fff;
}
Texto en relieve:
Con una sombra oscura y otra clara podemos conseguir un efecto de relieve sobre el texto. Puede ser un relieve o un bajo relieve, dependiendo de dónde coloquemos ambas sombras.
h2.relieve {
text-shadow: 1px 1px white, -1px -1px #333;
background-color: #ddd;
color: #ddd;
padding: 10px;
}
Efecto Pixelart:
Con un poco más de imaginación podemos conseguir efectos de lo más diverso. En este caso hemos hecho una prueba que da un resultado de diseño “pixelart”, de aquellos gráficos creados píxel a píxel de los juegos de antaño.
h1.pixelart{
text-shadow: 1px 1px #666, 2px 2px #86D6D3, 3px 3px #666, 4px 4px #86D6D3;
color: #ccc;
}
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros
