Propiedades básicas para el manejo de CSS3: Capas (parte 2)

Segunda parte de una serie que expondrá las propiedades más utilizadas de CSS3, en esta parte nos enfocamos a la estilización de capas (div).

Existe una serie de propiedades de estilo enfocados a la estilización de las capas en las que se divide nuestro sitio, dichas capas son comúnmente denominadas Divs, por el nombre dado a su etiqueta, y básicamente consisten en secciones que nos permiten mantener un cierto orden en nuestro documento HTML, estableciendo zonas y límites que nos han hecho desechar a las tablas como elemento de maquetación.

Su uso puede variar según la función que desee darle el autor de la página, por lo que su estilo puede encontrarse en constante cambio. El hecho de que deban adaptarse al entorno del sitio los convierte en una clase de elementos que deben permanecer flexibles ante la edición, por lo que no es recomendable la aplicación o uso de imágenes y patrones fijos para manejar su estilo.

Con estos elementos se ha experimentado para llevar al extremo el diseño de una página web y gracias a esto han surgido varios de los mejores diseños web conocidos, actualmente CSS3 nos ofrece la posibilidad de que con unas cuantas líneas de código podamos replicar lo que los antiguos diseñadores gráficos hacían en base a layouts y editores de imágenes.

Si aún tienes dudas sobre lo que es un Div y la función que cumple dentro del documento HTML, te recomendamos leer el siguiente artículo.

Border-radius

Uno de los efectos más populares desde antes del desarrollo de CSS3, son las esquinas redondeadas. Anteriormente este proceso se llevaba acabo mediante las llamadas “imágenes máscara”, las cuales se encargaban de cubrir únicamente las esquinas mediante una transparencia para simular que se había agregado una curvatura.

Actualmente CSS3 nos permite agregar dicho efecto a nuestros Divs con simplemente un grupo de tres líneas, border-radius, las cuales incluiremos en la declaración CSS de nuestro div:

-moz-border-radius: 5px; //Firefox
-webkit-border-radius: 5px; //Chrome, Safari
border-radius: 5px; //Safari 5, IE9

Con esto abarcamos tanto Firefox, Chrome, Safari e Internet Explorer 9, aclarando que en un futuro “border-radius” bastará para que pueda visualizarse en todos los navegadores, actualmente solamente es reconocido en Internet Explorer 9 y Safari 5.

Box-shadow

Un efecto sencillo y de buena presentación es box-shadow, el cual agrega una sensación inmediata de profundidad a los elementos y capas a las que se lo aplicamos, respetando un patrón y no exagerando los valores en la sombra podemos crear vistas bastante agradables para el espectador con tan solo agregar estas líneas:

-webkit-box-shadow: 2px 2px 25px #CCCCCC;
-moz-box-shadow: 2px 2px 25px #CCCCCC;
box-shadow: 2px 2px 25px #CCCCCC;

Al igual que en radius, usaremos tres líneas dentro de la sentencia Div, y daremos cuatro parámetros. El primer y segundo parámetro sirven para indicar la posición de la sombra (x,y), el tercer parámetro indica la difuminación, mientras que el cuarto es el color que queremos darle a la sombra.

Si queremos agregar sombras múltiples basta con separarlas con una coma de la siguiente manera: box-shadow: 2px 2px 25px #CCCCCC, -2px -2px #999;

RGBA

El modelo RGBA ha sido utilizado durante años en programas de edición de imágenes como Photoshop, sin embargo en el campo de la programación web la aplicación del campo alpha para la transparencia había estado en un constante proceso de transición, lo que provoco un dolor de cabeza al querer aplicarlas sin la ayuda de algún editor.

En mucha ocasiones se deseaba tener un Div transparente con texto contenido, pero al momento de aplicar dicha transparencia el texto también se veía afectado, por lo que se optaba por poner un div encima de otro y miles de trucos que a la larga significaban más trabajo. Para evitar este tipo de cosas RGBA entro en función.

Para aplicar el efecto basta con utilizar la declaración rgba(255, 0, 0, 0.2), donde usaremos cuatro parámetros, de los cuáles los primeros tres sirven para indicar el color que queremos utilizar en base al patrón RGB, el cual es utilizado por muchos editores de imágenes desde Paint hasta Photoshop, mientras que el último parámetro indica el nivel alpha de transparencia.

Código final

>>> Aquí puedes ver el ejemplo de CSS3 en funcionamiento <<<

En el siguiente código podemos apreciar los tres efectos en un sólo Div:

<html>
<head>
<title>Propiedades de divs</title>
<style>
body{
background: url('http://fc04.deviantart.com/fs30/f/2008/148/c/3/Wood_floor_by_gnrbishop.jpg');
}

div#prueba{
background: rgba(255, 122, 0, 0.5);
color: #FFF;
font-size: 10px;
padding: 12px;

-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;

-webkit-box-shadow: 2px 2px 25px #D2691E;
-moz-box-shadow: 2px 2px 25px #D2691E;
box-shadow: 2px 2px 25px #D2691E;
}

</style>
</head>

<body>
<div id="prueba"> La webera, lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus venenatis pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec odio mi, tempor in fermentum a, dignissim eu turpis. Nulla non sapien lorem, a blandit velit. Curabitur et nulla magna. Cras facilisis molestie dignissim. Nam luctus suscipit magna eget posuere. In pretium elementum fermentum. Fusce aliquam vulputate tempus. Vestibulum vel ultrices lectus. In at lorem sit amet tortor mattis placerat. Praesent iaculis, urna non laoreet consectetur, erat purus vehicula enim, a rutrum ipsum justo at mi.</div>

</body>
</html>