|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - DHTML - Clipeando una capa - 1 - 2 - 3
Clipeando una capa (I)
por Luciano Moreno, del departamento de diseño web de BJS Software.
La propiedad clip.-
Las capas definidas mediante las parejas de etiquetas <DIV>...</DIV> y <SPAN>...</SPAN>, junto con el CSS Positioning (Hojas de Estilos en Cascada Posicionadas) y el lenguaje JavaScript son el alma mater de lo que conocemos normalmente como HTML Dinámico o DHTML.
Mediante las etiquetas DIV y SPAN podemos definir en nuestras páginas rectángulos virtuales que son aptos para contener cualquier tipo de información, desde texto plano simple hasta código HTML, JavaScript, JSP, etc, permitiéndonos una libertad de acción que antes era inimaginable. A estos rectángulos los conocemos con el nombre genérico de "capas" (layers).
CSSP se nos ofrece en este entorno como la herramienta que nos permite definir con precisión la forma y posición de nuestras capas, y mediante el lenguaje JavaScript podemos acceder estas propiedades de las capas y modificarlas en tiempo real (¿Os suena ésto ya a DHTML?).
Una de las propiedades que poséen las capas viene fijada por el atributo CLIP de CSSP, que define el "recorte" que va a tener la capa, y me explico:
Una capa tiene un tamaño determinado, dado por sus atributos WIDTH (ancho) y HEIGHT (alto), que podemos expresar en cualquiera de las unidades válidas en CSS, como puntos (pt), pixels (px), milímetros (mm), etc.
Según ésto, una vez definidos el ancho y el alto de una capa mediante width y height deberíamos tener su tamaño perfectamente fijado. Pero en realidad no es así, y para verlo, nada mejor que un ejemplo. Mirad el siguiente código:
<head>
<style type="text/css">
#capa1{position:relative; top:0px; left:100px; width:250px; height:30px; background-color:red; layer-background-color:red}
</style>
</head>
<body>
<div id="capa1">Esta es la capa 1</div>
</body>
</html>
Este código debería darnos una capa que midiera 250 x 30 pixels, con fondo rojo, pero lo que en realidad obtenemos es lo siguiente:
Si véis la capa con Internet Explorer o con Nestcape Navigator 6x todo será según lo previsto, pero si estáis usando Nestcape Navigator 4x podréis observar que la capa sólo tiene el ancho necesario para abarcar el texto que contiene. ¿Y si no tuviera contenido?. Simplemente, no se vería.
Para que Nestcape 4x presente en pantalla la capa con el ancho fijado mediante el atributo width hay que recortarla, y ésto se consigue con la propiedad CLIP, que admite una única variante, RECT, que equivale a recortar la capa según un rectángulo. Su sintaxis general es:
clip:rect(a,b,c,d)
donde a,b,c y d son cadenas del tipo número/unidad (3px, 2pt, 5mm, etc.), y representan respectivamente lo que se va a recortar la capa superiormente, por la derecha, inferiormente y por la izquierda. Estos valores de recorte definen el área de la capa que vamos a ver. Gráficamente podemos apreciarlo mejor:
imagen en la que vemos una capa de 200 x 100 pixels clipeada según los valores indicados.
Cuando una capa se clipea, sólo se verá de su contenido aquello que entre dentro de la zona clipeada, es decir, en el ejemplo de la imagen todo el contenido de la capa que estuviera en la zona verde no se vería. Es como si cogiéramos unas tijeras y recortáramos la capa el tamaño dado por los valores del clip. De ahí su nombre de "recorte".
Normalmente las capas se clipean para fijar las dimensiones dadas por width y height, es decir, se clipean de la forma.
#capa{width:Wpx; height:Hpx; clip:rect(0px,Wpx,Hpx,0px);}
lo que deja la capa con sus dimensiones originales, pero ahora sí se verá igual en todos los navegadores.
En el caso de la capa antes definida, el código correcto sería:
#capa1{position:relative; top:0px; left:100px; width:250px; height:30px; clip:rect(0px,250px,30px,0px); background-color:red; layer-background-color:red}
que nos da:
que tiene sus dimensiones perfectamente definidas y se ve con las dimensiones correctas, sea cual sea el navegador usado.
Si no especificamos las unidades en el clipeo, se toman por defecto pixels, por lo que en nuestro caso podríamos haber puesto:
clip:rect(0,250,30,0)
Esta propiedad clip no es estática, si no que podemos acceder a ella y cambiar sus valores dinámicamente. Lo veremos en el próximo capítulo.
 |