Sie sind auf Seite 1von 10

Interface

En este mdulo veremos varias caractersticas y mejoras que CSS incorpora en esta nueva versin, y que tienen que ver con la interface visual de un documento HTML. CSS3 incluye nuevos atributos que permiten redimensionar las cajas o DIVs, realizarles diferentes transformaciones, controlar que sucede con el contenidos que excede el temao del contenedor y la realizacion de contornos adicionales. Veamos uno por uno:

Overflow-x y Overflow-y (exceso de contenidos) Generacin de Contornos Redimensionamiento de Cajas Transformaciones (rotar, inclinar, escalar, desplazar)

Contornos
CSS3 ha extendido el uso de los contornos y para esto dispone de propiedad outline-offset la cual nos permite especificar un borde o contorno exterior adicional, en cualquier elemento HTML. Con la propiedad outline-offset especificamos la distancia en pixeles desde el borde del elemento HTML, a la que estar el contorno adicional. En este caso, a 10 pixels:

? outline-offset: 10px; Y con outline especificamos

las propiedades de ese contorno, tal cual como si

fuera un borde. En este caso, especifiqu un contorno rojo (#ffoooo) de 2 pixels, con lnea slida :
? outline: 2px solid #ff0000 El ejemplo se veria asi:

Dichas propiedades las especifiqu en una clase llamada contorno y luego apliqu esa clase al DIV. El cdigo completo seria el siguiente: ?

1 2 3 4 5 6 7 8 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 2 0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Contornos</title> <style type="text/css"> #caja { height: 200px; width: 200px; } body { margin-left: 20px; margin-top: 20px; } .contorno { border: 1px solid #000; outline-offset: 10px; outline: 2px solid #ff0000 } </style> </head> <body> <div id="caja">Caja DIV con Contorno.</div> <br /> <br /> <span>Texto SPAN con contorno.</span> </body> </html>

2 1 2 2 2 3 2 4 2 5 2 6 2 7 2 8 2 9 3 0 3 1

En este ejemplo, utilice un DIV llamado caja de 200px de ancho y 200px de alto. La clase contorno donde se especifica las caractaristicas de los mismos, con el agregado de un borde negro normal. Tambin inclu un segundo ejemplo de contorno, el cual lo apliqu no en un DIV, sino en un texto directo con la etiqueta <span> Adems, especifiqu un margen general del <body> de 20 px , sino el contorno quedaba fuera la pgina. Puedes ver y descargar los ejemplos aqu:

NOTA: esta funcionalidad no es compatible con IE7.

Overflow-x y Overflow-y
Si bien al atributo overflow no es algo nuevo de CSS3, el comportamiento de estos 2 nuevos atributos son un tanto diferentes. Como recordamos, el atributo overflow de CSS2, nos permita especificarle al navegador, que hacer cuando los contenidos sobrepasaban los limites de una capa o caja. O sea, de su contenedor.

En tal caso, el navegador nos mostraba igualmente el contenido o bien sobrepasando los lmites del contenedor (Firefox y Chrome), o bien agrandando el contenedor para que en el mismo entrara el contenido. (IE) Pero este tipo de solucin que brindaba el navegador, no es siempre la ms conveniente. Para eso son ideales los atributos overflow-x y overflow-y, los cuales nos permiten especificar comportamientos por separado, ya sea para del desbordamiento horizontal, como vertical. Estos 2 atributos de CSS3 aceptan varios valores posibles. Los mismo son: Visible: Es el comportamiento predeterminado. Esto idica que el contenido que no cabe en la capa se muestre igualmente en el navegador. Hidden: Especifica que no muestre el contenido que exceda las dimensiones especificadas del contenedor. Scroll: Muestra unas barras de desplazamiento para que el usuario pueda hacer scroll sobre el contenido y ver reas que quedaran fuera del contenedor. Si se aplica este atributo, las barras de desplazamiento apareceran siempre en el contenedor, independientemente de si el contenido sobrepasa o no las dimensiones del mismo. Auto: Indica que las barras de desplazamiento (scroll) deben aparecer solo en el caso que el contenido supere los lmites del contenedor. Es decir solamente cuando sean necesarias. No-display: No est implementado en los navegadores, pero sirve para que, si los contenidos sobrepasan los lmites del contenedor, la capa completa contenedora sea eliminada de la pgina. Sera el mismo que si hubisemos colocado display:none en el contenedor. No-content: Esto sirve para que cualquier contenido que no entrase en el contenedor, fuera eliminado como si le hubisemos colocado el atributo visibility: hidden. O sea, en diferencia del anterior, lo que se elimina es el contenido y no el contenedor. Recordemos que estos valores se pueden definir por separado para el sentido vertical, como horizontal. Veamos algunos ejemplos. Para esto he creado varios casos donde existe un contenedor principal y 2 contenedores con contenidos que exceden los lmites horizontales y verticales. El contenedor principal tiene fondo amarillo. El contenedor de ancho excedido tiene fondo rojo. El contenedor de alto excedido tiene fondo verde.

En este caso he definido los atributos overflow-x y overflow-y, directamente dentro de la etiqueta del DIV en cuestin, y no por medio de una clase. O sea, incluyendo la definicin siguiente, dentro de la etiqueta de div: ?
style="overflow-x: auto; overflow-y: auto"

Aqu puedes ver y descargar los 4 ejemplos:

Redimensin de Cajas
La propiedad resize de CSS3 nos permite redimensionar las cajas o DIVs. La misma, acepta 3 posibles valores: horizontal: permite redimensionar solo el ancho de la caja. vertical: permite redimensionar solo el alto de la caja. both: permite redimensionar ambos. En el siguiente ejemplo he creado un div o caja, de 300px de ancho, con fondo amarillo, borde negro de 1 pixel y barras de scroll automticas. ?
#caja { width: 300px; overflow:auto; border:solid 1px; background-color: #FF0;

Luego en cada DIV, le aplique la propiedad resize. La siguiente especificara el redimensionado horizontal: ?
<div id="caja" style="resize: horizontal;">

Para el siguiente ejemplo, cre 3 divs. El primero solo se podr redimensionar horizontalmente. ?
<div id="caja" style="resize: horizontal;">

El segundo solo se podr redimensionar verticalmente. ?


<div id="caja" style="resize: vertical;">

Y el tercero en ambos sentidos. ?


<div id="caja" style="resize: both;">

El cdigo completo seria: ?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Redimensionado de Cajas</title> <style type="text/css"> #caja { width: 300px; overflow:auto; border:solid 1px; background-color: #FF0; } </style> </head> <body> <h3>Permite redimensionar solo el ancho</h3> <div id="caja" style="resize: horizontal;">Texto de ejemplo. Texto de ejemplo. Texto de ejemplo. Texto de ejemplo. Texto de ejemplo. Texto de ejemplo. Texto de ejemplo. Texto de ejemplo. </div><br /> <br /> <h3>Permite redimensionar solo el alto</h3> <div id="caja" style="resize: vertical;">Texto de ejemplo. Texto de ejemplo. Texto de ejemplo. Texto de ejemplo. Texto de ejemplo. Texto de ejemplo. Texto de ejemplo. Texto de ejemplo. </div><br /> <br /> <h3>Permite redimensionar alto y ancho</h3>

<div id="caja" style="resize: both;">Texto de ejemplo. Texto de ejemplo. Texto de ejemplo. Texto de ejemplo. Texto de ejemplo. Texto de ejemplo. Texto de ejemplo. Texto de ejemplo. </div> </body> </html>

Puedes ver y descargar los ejemplos aqu:

NOTA: esta funcionalidad no es soportada por IE7.

Transformaciones (scale, rotate, skew, traslate)


CSS3 ha incorporado un atributo muy til que nos permite realizar diferentes transformaciones en nuestros elementos HTML. Dicho atributo es transform. Con dicho atributo podemos realizar diferentes transformacin como : Rotaciones (rotate)

Inclinados (skew)

Escalados (scale)

Desplazamientos (translate)

El atributo transform debe ir acompaado por el valor que especifica el tipo de transformacin a realizar (los anteriores), y adems, uno o varios parmetros que configuran la transformacin. Entonces el atributo completo tendra la siguiente forma: ?
transform: tipo(parametros);

He creado varios ejemplos para que veas los diferentes usos. Primero configure un margen de documento de 30px (arriba y a la izquierda) Luego un caja DIV de 150px de ancho y alto, y color de fondo naranja. Y luego 3 clases CSS diferentes: una que rota al elemento, otra que lo inclina, otra que lo escala y otra que lo desplaza. Luego solo basta con aplicar cada clase a una caja o DIV diferente. Cdigo CSS que utilic en los ejemplos. Rotar Aqu aplicamos una rotacin de 25 grados.

transform: rotate(25deg);

Inclinar Aqu aplicamos un inclinado vertical de 15 grados, y uno horizontal de 3 grados. ?


transform: skew(15deg,3deg);

Escalar Aqu aplicamos un escalado horizontal del 120% (lo que equivale al valor 1.2), y uno vertical del 60% (lo que equivale a un valor de 0.6. Este valor funciona como un factor que se multiplica por la medida original, entonces si la medida original es de 150px y le aplicamos un valor de 1, dicho eje no se escalar, ya que 150 x 1 = 150. ?
transform: scale(1.2,0.6);

Desplazar Aqu desplazamos el elemento 100px por el eje X, o sea, horizontalmente. Y 10 px hacia abajo, sobre el eje Y. ?
transform: translate(100px, 19px);

Recordemos que hay que utilizar los prefijos de los navegadores, para obtener compatibilidad. (-moz para Firefox y webkit para Safari y Chrome) Esta funcionalidad no es compatible con IE7. Este es el cdigo completo del ejemplo: ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sin ttulo</title> <style type="text/css"> body { margin-left: 30px; margin-top: 30px; } #caja { background-color: #F90;

height: 150px; width: 150px;

.rotar { transform: rotate(25deg); -moz-transform: rotate(25deg); -webkit-transform: rotate(25deg); } .inclinar { transform: skew(15deg,3deg); -moz-transform: skew(15deg,3deg); -webkit-transform: skew(15deg,3deg); } .desplazar{ transform: translate(100px, 19px); -moz-transform: translate(100px, 19px); -webkit-transform: translate(100px, 19px); } .escalar { transform: scale(1.2,0.6); -moz-transform: scale(1.2,0.6); -webkit-transform: scale(1.2,0.6); } </style> </head> <body> <div id="caja">Caja <br /> <div id="caja">Caja <br /> <br /> <div id="caja">Caja <br /> <br /> <div id="caja">Caja <br /> <br /> <div id="caja">Caja </body> </html>

sin transformacin.</div><br /> rotada.</div> inclinada.</div> escalada.</div> desplazada.</div>

Puedes ver y descargar el ejemplo aqu:

Das könnte Ihnen auch gefallen