MOVILIDAD | Artículos | 01 OCT 2011

Curso de programación Web con HTML 5 (III)

Uso conjunto de etiquetas HTML 5 y estilos CSS3
Jaime Peña.
En el presente artículo trataremos con cierto detalle el uso conjunto de etiquetas HTML 5 y estilos CSS 3, que mejoran de manera muy sustancial la presentación, organización y mantenimiento de nuestros documentos Web. Entre los aspectos tratados se encuentran el tratamiento de textos, el manejo de fuentes de caracteres y los bordes, fondos y transformaciones de elementos en dos dimensiones, como rotaciones, redimensionamientos, traslaciones y escalados.

Textos (sombreados, justificaciones y otros) con CSS 3
Respecto a los textos, además de las capacidades únicas que proporcionan las CSS, también hemos de tener presentes las recomendaciones de HTML 5 de utilizar preferentemente y en la medida de lo posible para la claridad y el mantenimiento del código CSS en vez de etiquetas de decoración como <i> o <b>, aunque siguen siendo admitidas.

Comenzaremos tratando el sombreado de textos mediante la propiedad text-shadow, novedad en CSS 3, cuya sintaxis se recoge en el recuadro adjunto:

text-shadow: h-shadow v-shadow blur color;

Como vemos, toma cuatro parámetros, separados por un espacio: dimensión horizontal y dimensión vertical de la sombra, difuminado (blur), que nos fija el espacio en que se difuminará el color de la sombra, y el color de la sombra; los tres primeros se miden en espacio, generalmente en pixeles (px) y el cuarto en forma de número hexadecimal de color o como una constante de color, como puede ser red, blue, etc. Los dos primeros parámetros son requeridos, los otros dos opcionales.

El listado 1, que se adjunta, nos muestra un ejemplo de uso.

Listado 1.
Propiedad text-shadow

<!DOCTYPE HTML>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Propiedad text-shadow</title>

<style type=”text/css”>
h1
{
text-shadow: 3px 3px 3px #ff0000;
}
</style>

</head>
<body>

<h1>¡Efecto Text-shadow!</h1>

<p><b>Nota:</b> Internet Explorer 9 no soporta la propiedad text-shadow.</p>

</body>
</html>


También novedad en CSS 3, la propiedad word-wrap cortará las palabras muy largas para ajustarlas al área de contenido de donde se encuentren (ajuste de línea), sin necesidad de emplear etiquetas condicionales como <wbr> de HTML 5 –con sus ventajas e inconvenientes, que las hay- que hemos tratado en el artículo anterior. Puede tomar el valor normal o break-word y en el siguiente listado podemos ver un ejemplo de su comportamiento cuando modificamos el ancho de la ventana del navegador.

Tabla1. Valores que puede tomar text-decoration
Valor Descripción
none sin decoración
underline subrayado
overline superrayado
line-through tachado
blink parpadeante
inherit heredará/recuperará la decoración del estilo superior en la CSS


Listado 2.
Propiedad word-wrap y valor break-word

<!DOCTYPE HTML>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Propiedad word-wrap</title>

<style type=”text/css”>
p.cortar
{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
</style>
</head>
<body>

<p class=”cortar”> Las palabras de éste epígrafequenoquepanenunalínea
del área seráncortadasparapasarala línea posterior
siguienteymantenertodoeltextoenelmarco.</p>

</body>
</html>


Para utilizar una nueva decoración de textos, utilizaremos la propiedad text-decoration, que viene a suplir algunas de las etiquetas obsoletas o desaconsejadas en HTML 5, como <u> (subrayado) y otras opciones nuevas. En la tabla adjunta se recogen los posibles valores de text-decoratión.

El código ejemplo que sigue define una nueva clase de área div en la que se mostrarán los textos parpadeantes.

<style type=”text/css”>
div.parpadeante
{
text-decoration:blink;
}
</style>


Otra de las nuevas propiedades de CSS 3 nos permite establecer el cómo se alinearán los textos en un área de textos determinada, solapando y mejorando las etiquetas correspondientes del lenguaje HTML.

Tabla 2. Valores posibles de la propiedad text-align
Valor Descripción
left Alineación a la izquierda
right Alineación a la derecha
center Texto centrado
justify Busca que todas las líneas tengan un tamaño igual (justificando a izquierda y derecha)
inherit heredará/recuperará la justificación del estilo superior en la CSS

Se trata de text-align y en la tabla y el pequeño listado siguiente se aclara su uso y posibles valores; en concreto, el código centrará el contenido en el área del documento en el cual se encuentre y le dará un color azul al texto:


<h1 style=”text-align:center;color:#0000ff;”>
<i>IDG Communications</i>
</h1>


En lo que respecta al manejo de textos, por último trataremos la propiedad text-transform, que en este caso siendo un método de CSS, no tiene equivalencias directas en forma de etiquetas en el lenguaje HTML y deberíamos acudir a rutinas en JavaScript. Por ejemplo:


<script type=”text/javascript”>

var cadena=”¡Hola mundo!”;
document.write(cadena.toUpperCase());

< /script>

Con CSS un equivalente sería, por ejemplo y sin más, crear una clase div que contendría los textos mayuscularizados, véase:

<style type=”text/css”>
div.toUpper
{
text-transform:uppercase;
}
</style>

Tabla 3. Valores posibles de la propiedad text-transform
Valor Descripción
none Ninguna transformación. Valor por defecto
capitalize Transforma la primera letra de cada palabra a mayúscula
uppercase Todo a mayúsculas
lowercase Todo a minúsculas
inherit heredará/recuperará la transformación del estilo superior en la CSS

Los posibles valores que puede tomar la propiedad text-transform son los recogidos en la siguiente tabla y es soportada por todos los principales navegadores del mercado.

Típicamente, una definición de estilos con clases útiles para gestionar párrafos, áreas div y otras, etc., nos serían muy versátiles en una CSS, tal vez mejor insertadas en un archivo externo; al estilo de:

<style type=”text/css”>
p.toUpper
{text-transform:uppercase;}
p.toLower
{text-transform:lowercase;}
p.toCapit
{text-transform:capitalize;}
</style>

Manejo de fuentes con CSS 3
Con anterioridad a CSS3, los diseñadores Web tenían que hacer uso de las fuentes supuestamente instaladas en los ordenadores de los usuarios (“web-safe” fonts). De lo contrario, se procedía a una sustitución de fuentes que no siempre daba un resultado satisfactorio.
Ahora CSS3 permite utilizar fuentes muy variadas, que en caso de no encontrarse en el ordenador cliente, serán descargadas en él para su uso.

Una vez que la etiqueta <font> ha sido eliminada en HTML 5 y que la etiqueta <basefont> se recomienda sustituirla por equivalencias con hojas de estilo (CSS), la declaración de fuentes mediante @font-face ha devenido en algo verdaderamente crucial, además de ágil y muy versátil para el propio manejo de fuentes en los documentos HTML. Mediante ella podremos incluir no sólo aquellas fuentes instaladas en el ordenador del usuario, sino también otras fuentes y con otros formatos de fuentes antes no accesibles para el programador Web.

Su sintaxis es mediante la declaración de un estilo:

<style>
@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Light.ttf’),
url(‘Sansation_Light.eot’) format(“opentype”); /* MSIE */
}
</style>

Observemos que los navegadores puedes utilizar fuentes TrueType para ser enviadas a través de la red, a excepción de MSIE que al presente (v. 9) sólo permite el uso de fuentes Embedded OpenType.

Para utilizar la nueva fuente creada con @font-face, se utilizará la propiedad font-family, dentro de una definición de estilo, tal que:


<style type=”text/css”>
div
{
font-family:myFirstFont;
}
</style>

Como ejemplo final de uso, en el listado adjunto se muestra el empleo de una fuente no estándar en una instalación, que se mostrará en uno de los dos apartados de texto. Si el usuario final no las tuviera instaladas en su sistema, serían enviadas para su correcta visualización, por lo que deben ser alojadas en el directorio correspondiente del servidor.

Listado 3.
Propiedades font-face y font-family

<!DOCTYPE HTML>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Propiedad font-face</title>

<style>
@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Light.ttf’),
url(‘Sansation_Light.eot’) format(“opentype”); /* MSIE */
}
</style>

<style type=”text/css”>
div.sansation
{
font-family:myFirstFont;
}
</style>
</head>
<body>

<div class=”sansation”>
Las palabras de éste epígrafe se mostrarán con una fuente ‘Sansation’.
</div>
<div>
Las palabras de éste nuevamente utilizan la fuente por defecto.
</div>

</body>
</html>


Tabla 4. Propiedades y sus valores posibles que pueden ser definidos en el interior de una regla de estilo @font-face
Propiedad Valores Descripción
font-family Nombre Requerido. Define el nombre de la fuente
url Dirección URL Requerido. Fija dónde se encuentra el archivo de la fuente

font-stretch normal Opcional. Indica si la fuente debería y cómo debería ser
condensed comprimida o expandida. Por defecto es “normal”, ni
ultra-condensed comprimida ni expandida
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded

font-stretch normal Opcional. Define un estilo para la fuente. Por defecto es
italic “normal”
oblique

font-weight normal Opcional. Determina el resaltado de la fuente (su ‘peso’).
bold Por defecto es “normal”
100
200
300
400
500
600
700
800
900

Tabla 5. Propiedades de estilos de fondo mediante CSS
Propiedad Descripción CSS 3

background Define todas las propiedades del fondo en una única
declaración, en el orden que se citan seguidamente

background-color Indica el color de fondo de un elemento

background-position Fija la posición inicial de la(s) imagen(es) de fondo

background-size Fija el tamaño de la(s) imagen(es) de fondo X

background-repeat Indica cómo se repetirá(n) la(s) imagen(es) de fondo

background-origin Indica la posición del área de la(s) imagen(es) de fondo X

background-clip Especifica el área de dibujo de la(s) imagen(es) de fondo X

background- Especifica si el fondo será fijo o se desplazará
attachment con el contenido global

background-image Indica la(s) imagen(es) de fondo de un elemento


A modo de índice, las nuevas fuentes soportadas pueden ser, según los navegadores y según el estado de cumplimiento de las normas de CSS 3, las siguientes:

TTF (TrueType)
EOT (Embedded OpenType) (al presente, MSIE sólo soporta éstas)
OTF (OpenType)
WOFF (Web Only Font Format)

Conversión de fuentes
Si se dispone de diferentes fuentes en un determinado formato, por ejemplo TTF, y se precisan en otros formatos, en el sitio Web de FontSquirrel (http://www.fontsquirrel.com/fontface/generator) disponemos de un conversor gratuito, que además generará el correspondiente código @font-face para ser usado en nuestras páginas HTML.
¡Por cierto!, si necesitas nuevas fuentes gratuitas, incluso con fines comerciales (lee los acuerdos de licencia), no dejes de visitar este mismo sitio Web.

Tabla 6. Posibles valores de background-origin y background-clip
Valor Descripción
padding-box La imagen es posicionada relativa al relleno entre el borde y el contenido (valor por
defecto)
border-box La imagen es posicionada relativa al borde
content-box La imagen es posicionada relativa al contenido

Bordes, fondos y transformaciones 2D con CSS 3
Nos referimos en este apartado a los bordes y fondos de área definidas por etiquetas del lenguaje HTML 5 y que hemos tratado en el artículo anterior (div, section, article, aside,...). Acudiremos a la aplicación de estilos CSS 3, con su versatilidad y facilidad de mantenimiento para el programador, algo en lo que tenemos especial interés en insistir.

Para insertar un borde simple, la sintaxis completa se recoge en el recuadro adjunto.

border: width style color;

La propiedad style puede tener uno o varios de los valores {solid, dotted, double, dashed}, por ejemplo:

<style type=”text/css”>
div
{
border:2px solid #000000;
padding:10px 20px;
background:#cccc00;
width:320px;
}
</style>

Codificaría los marcos <div> con un borde de 2 pixeles de ancho sólido y de color negro. En su interior habría un área vacía (padding) de 10 pixeles de ancho y 20 de alto, alrededor y en el interior del borde; el fondo sería de color maquillaje (#cccc00) y el ancho total del marco tendría 320 pixeles. También se pueden definir separadamente las propiedades border-width, border-style y border-color:
<style type=”text/css”>
div
{
border-width:2px;
border-style: solid dotted solid dotted; /* superior derecho inferior izquierdo */
border-color:#000000;
padding:10px 20px;
background:#cccc00;
width:320px;
}
</style>

En este caso el border-style puede contener hasta cuatro parámetros para los estilos de los cuatro bordes del marco, definidos separadamente.

Recapitulando y ampliando loa anteriormente esbozado, el estilo de borde se puede alterar mediante la propiedad border-style, los posibles valores son los que siguen, se sugiere que siguiendo los ejemplos posteriores, se cambien para observar sus efectos:
none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit

También es factible fijar separadamente los estilos de los cuatro bordes, ya que podremos codificar separadamente todos o algunos de ellos según:

<style type=”text/css”>
div
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
</style>

De manera equivalente, se podría fijar el estilo en una única declaración:
<style type=”text/css”>
div
{
border-style:dotted solid dotted solid;
}
</style>

Si se fija sólo un estilo, será el estilo de los cuatro bordes, si se fijan dos, serán los estilos del 1º y 3º y del 2º y 4º, respectivamente:
<style type=”text/css”>
div
{
border-style:dotted solid;
}
</style>
Para insertar un borde redondeado en sus esquinas en CSS 3 existe la propiedad border-radius que fija, en pixeles, el radio de giro del redondeado del borde. Fíjese en el siguiente código:

<style type=”text/css”>
div
{
border:2px solid #000000;
padding:10px 20px;
background:#cccc00;
width:320px;
border-radius:32px;
-moz-border-radius:32px; /* Para Firefox 3.6 y anteriores */
}
</style>

También es posible redondear sólo una o varias de las esquinas, y con iguales o diferentes valores en pixeles, mediante las siguientes propiedades de estilo en vez de usar border-radius, que fija conjuntamente las cuatro:
border-top-left-radius: fija el radio de redondeo de la esquina superior izquierda
border-top-right-radius: ídem superior derecha
border-bottom-right-radius: ídem inferior derecha
border-bottom-left-radius: ídem inferior izquierda
NOTA: Anteponer –moz- para Firefox 3.6 y anteriores

Por ejemplo, el siguiente código fijaría bordes redondeados sólo en el margen superior izquierdo e inferior derecho:

<style type=”text/css”>
div
{
border:2px solid #000000;
padding:10px 20px;
background:#cccc00;
width:320px;
border-top-left-radius:32px;
border-bottom-right-radius:32px;
-moz-border-top-left-radius:32px; /* Para Firefox 3.6 y anteriores */
-moz-border-bottom-right-radius:32px; /* Para Firefox 3.6 y anteriores */
}
</style>

Listado 4.
Un ejemplo de página simple con un elemento con todos los bordes redondeados

<!DOCTYPE HTML>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Bordes redondeados</title>

<style type=”text/css”>
div.redondeado
{
border:2px solid #000000;
padding:10px 20px;
background:#cccc00;
width:320px;
border-radius:32px;
-moz-border-radius:32px; /* Firefox 3.6 and earlier */
}
</style>

</head>
<body>

<div class=”redondeado”>
La propiedad <i>border-radius</i> nos permite crear bordes redondeados en los elementos.<br/>
Es un modo de presentación muy atractivo para formularios, por ejemplo.
</div>

</body>
</html>

A modo de prueba, cámbiese la línea en el listado anterior, el valor correspondiente de border-radius y –moz-border-radius, por los que siguen:
border-radius: 32px 32px 32px 32px;
border-radius: 32px 0px 32px 0px;
border-radius: 32px 16px 8px 4px;
NOTA: Anteponer –moz- para Firefox 3.6 y anteriores

Bordes elípticos
Observa y prueba el siguiente código:
border-radius:32px / 16px;
-moz-border-radius:32px / 16px;

Si deseas algo todavía más espectacular prueba:
border-radius:64px 32px 16px 8px / 32px 16px 8px 4px;
-moz-border-radius:64px 32px 16px 8px / 32px 16px 8px 4px;

La propiedad background y sus derivadas (véase la tabla adjunta) nos facilita la gestión de los fondos de los elementos de áreas de contenido, su sintaxis general se recoge en el recuadro adjunto y se declara mediante un estilo.

background: color position size repeat origin clip attachment image;

Un ejemplo muy simple de su utilización es la inserción de una imagen de fondo, mediante la propiedad background-image. En el listado 5 proponemos un muy sencillo ejemplo de una imagen pequeña que se repite en todo el fondo del documento.

Listado 5.
Inserción de una imagen de fondo repetida y fija (background-image)

<!DOCTYPE HTML>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Etiqueta Background</title>

<style type=”text/css”>
body
{
background-image:url(Sprite-1.jpg);
}
</style>

</head>
<body>

<h1 style=”color:blue;”>Fondo de documento</h1>
<p>Imagen repetida y fija</p>

</body>
</html>


Los tres posibles valores de origen del ajuste y recorte del fondo son los ilustrados en la figura que sigue y su distinción se fija en el área de contenidos mediante las propiedades de CSS 3.


Posibles valores de background-origin y background-clip

Respecto a la propiedad background-size, también novedad en HTML 5, al permitir redimensionar una figura, facilita el uso de una misma imagen en diferentes contextos. Sus propiedades y posibles valores son:
length: se especifica, separado por un espacio, el ancho y el alto, por ejemplo en pixeles
percentage: lo mismo, pero en porcentajes respecto al 100% del área de la ventana
cover: escala la imagen para el menor tamaño que quepa dentro del ancho y el alto del área
contain: ídem, pero la escala al mayor tamaño

Listado 6.
Imagen expandida al 100% de ancho y alto (background-size)

<!DOCTYPE HTML>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Etiqueta Background</title>
<style type=”text/css”>

body
{
background-image:url(Sprite-1.jpg);
background-size: 100% 100%;
-moz-background-size: 100% 100%; /* Firefox 3.6 y anteriores */
}

</style>
</head>
<body>

<h1 style=”color:blue;”>Fondo de documento</h1>
<p>Imagen expandida al 100% de ancho y de alto</p>

</body>
</html>

En cuanto a las transformaciones 2D, mediante la propiedad transform podremos realizar giros en dos dimensiones de elementos (valor rotate) de una manera muy simple. Véase por ejemplo el listado siguiente:

Listado 7.
Propiedad transform y valor rotate (transformación en 2D)

<!DOCTYPE HTML>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Propiedad font-face</title>

<style type=”text/css”>

div
{
width:200px;
height:50px;
background-color:lightgray;
border:1px solid black;
}

div.rotado30
{
background-color:yellow;
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* Para MSIE */
-moz-transform:rotate(30deg); /* Para Firefox */
-webkit-transform:rotate(30deg); /* Para Safari y Chrome */
-o-transform:rotate(30deg); /* Para Opera */
}

</style>

</head>
<body>

<div>
Éste es un <i>div</i> sin rotar.
</div>
<br/><br/>
<div class=”rotado30”>
Éste es un <i>div</i> rotado 30º.
</div>

</body>
</html>

Notemos que la propiedad aún no está plenamente soportada en los navegadores y muchos de ellos necesitan anteponer prefijos para utilizar bibliotecas particulares para realizar una mimetización de su efecto.
Seguidamente proporcionamos dos breves ejemplos de transformaciones de traslación y escalado de áreas, que creemos que son suficientemente autoexplicativas.

Listado 8.
Propiedad transform y valor translate (transformación en 2D)

<style type=”text/css”>

div.movido100y100
{
background-color:yellow;
transform: translate(100px,100px);
-ms-transform: translate(100px,100px); /* Para MSIE */
-webkit-transform: translate(100px,100px); /* Para Safari y Chrome */
-o-transform: translate(100px,100px); /* Para Opera */
-moz-transform: translate(100px,100px); /* Para Firefox */
}

</style>

Listado 9.
Propiedad transform y valor scale
(transformación en 2D)

<style type=”text/css”>

div.escalado2y4
{
background-color:yellow;
transform: scale(2,4);
-ms-transform: scale(2,4); /* Para MSIE */
-webkit-transform: scale(2,4); /* Para Safari y Chrome */
-o-transform: scale(2,4); /* Para Opera */
-moz-transform: scale(2,4); /* Para Firefox */
}
</style>

Contenidos recomendados...

Comentar
Para comentar, es necesario iniciar sesión
Se muestran 0 comentarios
X

Uso de cookies

Esta web utiliza cookies técnicas, de personalización y análisis, propias y de terceros, para facilitarle la navegación de forma anónima y analizar estadísticas del uso de la web. Consideramos que si continúa navegando, acepta su uso. Obtener más información