You are here
Atributos CSS3 overflow-x y overflow-y Sin categoría 

Atributos CSS3 overflow-x y overflow-y

Atributos CSS3 overflow-x y overflow-y

 

Descripción de los atributos de CSS3 overflow-x y overflow-y, que sirven para definir cómo renderizar un contenido cuando sobrepasa los límites de un contenedor en la horizontal o vertical.

 

Valores posibles para overflow-x y overflow-y

 

En estos dos nuevos atributos podemos colocar varios valores distintos, que nos servirán para definir diferentes tipos de comportamientos ante el desborde del contenido de una capa. Tanto overflow-x como overflow-y comparten el mismo abanico de valores posibles, pero los podemos especificar por separado, para la coordenada X y la Y. De ese modo, no tienen por qué definirse los mismos valores cuando surgen desbordamientos en la horizontal y en la vertical.

 

Visible: Esto hace que el contenido que no cabía en la capa se muestre igualmente en el navegador. Es el comportamiento predeterminado.

 

Hidden: Sirve para decirle al navegador que no muestre cualquier contenido que se salga de las dimensiones especificadas en el contenedor.

 

Scroll: Permite mostrar unas barras de desplazamiento para que el usuario pueda hacer scroll sobre el contenido y ver áreas que quedarían fuera del contenedor. En el caso que se aplique este atributo, las barras de desplazamiento aparecerían siempre en el contenedor, independientemente de si el contenido sobrepasa o no las dimensiones del contenedor.

 

Auto: Este valor indica que las barras de desplazamiento deben aparecer solo en el caso que el contenido supere los límites del contenedor. Es decir, es lo mismo que scroll, pero no aparecerían siempre las barras de desplazamiento, sino solamente cuando sean necesarias.

 

No-display: Este comportamiento a día de hoy no está implementado en los navegadores, pero serviría para que, en caso que un contenido sobrepase el límite asignado al contenedor, la capa completa contenedora sea eliminada de la página. El efecto sería el mismo que si hubiésemos colocado display:none en el contenedor (si es que había contenido que saliese de sus dimensiones, claro).

 

No-content: Esto provocaría que cualquier contenido, que no cupiese en las dimensiones del contenedor, fuera eliminado como si le hubiésemos colocado el atributo visibility:hidden. Osea, en diferencia del atributo anterior, lo que se elimina es el contenido y no el contenedor entero.

 

Como se puede comprobar, las opciones son diversas y permitirían bastantes combinaciones distintas para comportamientos en una capa, definiendo por separado lo que debe ocurrir en la horizontal y en la vertical.

 

Introducción a @font-face de CSS

 

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>


Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts