Si no sabes lo que es CSS cabría decir que CSS es un lenguaje para definir el estilo o la apariencia de las páginas web, escritas con HTML o de los documentos XML. CSS se creó para separar el contenido de la forma, a la vez que permite a los diseñadores mantener un control mucho más preciso sobre la apariencia de las páginas.
He aquí una lista de las principales propiedades que son novedad en CSS3. Bordes
Fondos
Color
Texto
Interfaz
Selectores
Modelo de caja básico
Otros
Este listado de nuevas propiedades de CSS 3 lo he sacado de: http://www.css3.info/preview/. Es un sitio en inglés, pero puede estar bien visitar para ir conociendo más detalles sobre CSS3.
CSS 3 incorpora nuevas propiedades para el control de bordes de los elementos. Ahora se permiten bordes con las esquinas redondeadas, bordes con imágenes, sombras, etc. Tenemos la propiedad border-radius, que permite definir bordes redondeados en las esquinas, especificando las medidas del radio que deben darse a la curva de las esquinas. Su uso sería aproximado este:
border-radius: 5px;
Definiría un radio de 5 píxeles en el redondeo de las esquinas del elemento. Este atributo Mozilla lo ha adoptado con un nombre especial -moz-border-radius y los navegadores basados en WebKit, como Google Chrome o Safari, también soportan las esquinas redondeadas pero de la siguiente forma -webkit-borderradius. Con respecto a Internet Explorer lo incorpora en la version 10. Por el momento, para navegadores Mozilla y WebKit que son los primeros en adaptarse a CSS3, podemos utilizar el atributo border-radius de la siguiente manera:
- DIV { - border: 1px solid #000000; - -moz-border-radius: 7px; - -webkit-border-radius: 7px; - padding: 10px; - }
Con esto conseguimos que todos los div tengan un borde redondeado en las esquinas de radio de 7 píxeles. Fijarse en el uso de los atributos -moz-border-radius y -webkit-border-radius, que sirven para lo mismo, pero en navegadores basados en Mozilla y basados en WebKit. El atributo border-radius tiene otras posibles configuraciones definiendo los valores de las cuatro esquinas por separado de esta manera:
-moz-border-radius: 7px 27px 100px 0px;
Así estaríamos definiendo un borde redondeado con radio de 7 pixel para la esquina superior izquierda, luego 27px para la esquina superior derecha, de 100px para la inferior derecha y 0px para la inferior izquierda. (Hay que explicar que un border-radius de 0px es un borde con esquina en ángulo recto)Es bueno aclarar que este atributo sólo se ve si se tiene definido algún borde visible al elemento que se los asignamos, ya sea solid, dotted, etc.
Con el atributo background-image podemos conseguir que un elemento de la página tenga un fondo de imagen. Esto debemos saberlo, puesto que es algo básico de las hojas de estilo en cascada (CSS). vamos a mostrar cómo podríamos conseguir que un elemento de la web tuvisese varias imágenes de fondo al mismo tiempo. Colocar varias imágenes de fondo a un elemento en principio no se puede con CSS, por lo que mostraremos cómo hacerlo con una sencilla técnica alternativa. Pero también veremos que en CSS 3 existe la posibilidad de configurar varios fondos al mismo tiempo en un elemento, con una declaración de background-image y sin necesidad de realizar ningún tipo de técnica alternativa.
En CSS normal (CSS 1), como hemos dicho, podemos colocar un único fondo a un elemento de la página. Esto es algo soportado por todos los navegadores. Como no podemos poner más de 1 fondo por elemento, para colocar varios fondos al mismo tiempo, tenemos que utilizar varios elementos. A cada elemento le colocaremos un único fondo, pero al mostrarse los elementos en el mismo espacio, conseguiremos el efecto deseado de tener varios fondos de imagen a la vez. En nuestro caso, vamos a utilizar varias capas DIV anidadas y cada una tendrá su fondo de imagen. El código HTML que utilizaríamos para anidar varias capas DIV sería como sigue:
- <div id="fondo1"> - <div id="fondo2"> - <div id="fondo3"> - contenido del elemento que va a tener 3 fondos de imagen distintos - ... - </div> - </div> - </div>
Como se ha visto, podemos anidar varias capas DIV y cada una tendrá un identificador, o si lo preferimos una clase, para asignar estilos por CSS. Al estar anidados, todos los elementos DIV se mostrarán uno encima del otro. Ahora veamos el código CSS para darle fondos a cada uno de estos elementos DIV:
- <style type="text/css"> - #fondo1{ - background-image: url(fondo1.gif); - width: 300px; - } - #fondo2{ - background-image: url(fondo2.png); - background-repeat: no-repeat; - background-position: bottom right; - } - #fondo3{ - background-image: url(fondo3.png); - background-repeat: no-repeat; - background-position: center; - } - </style>
Los fondos se superpondrán unos a otros, siendo el fondo1 el que se vea más abajo y el fondo3 el que se verá más arriba. En principio todos los navegadores visualizarán perfectamente los fondos, Internet Explorer 6 tiene problemas con la transparencia de los archivos PNG, podemos encontrar algún defecto, pero los fondos de los elementos DIV se verán.
Una de las nuevas características de CSS 3 consiste en la posibilidad de declarar varios fondos de imagen a un elemento de la página. Lo que antes hemos visto que es posible, creando varios elementos anidados y colocando un fondo en cada uno, se puede hacer en CSS 3 con un solo elemento, al que aplicaremos varios fondos distintos. El HTML del ejemplo de varias imágenes de fondo sería el siguiente:
- <div id="fondos"> - texto de un único elemento - ... - </div>
Ahora veamos el CSS 3 válido para este ejemplo:
- <style type="text/css"> - #fondos{ - background: url(fondo3.png) bottom right no-repeat, - url(fondo2.png) center no-repeat, - url(fondo1.gif) center repeat; - width: 300px; - } - </style>
Sólo cabe comentar que las distintas imágenes de fondo se tienen que escribir en la declaración CSS separadas por comas. Además, las imágenes que declaramos se van colocando de modo que la primera aparece sobre las siguientes. Así pues, en esta declaración, fondo1.gif, que está colocada como último fondo, es la que aparece detrás del todo. Queda decir que colocar varios fondos de imagen en un elemento de CSS3 solo esta disponible en el avegador Safara.
La notación RGBA es una manera de especificar colores en la que se definen cuatro valores. Los tres primeros son los bien conocidos canales RGB (rojo, verde y azul) y el cuarto parámetro es el canal Alpha, que no es más que el grado de transparencia u opacidad del color. El canal Alpha es un valor entre cero y uno, siendo 0 totalmente transparente y 1 totalmente opaco.
Para definir un color RGBA, se deben especificar cuatro valores, de la siguiente manera:
rgba(255, 125, 0, 0.5);
Los tres primeros valores son números en sistema decimal, que corresponden con los valores de rojo, verde y azul. Siempre tienen que ser números entre 0 y 255.
El cuarto valor es un número entre 0 y 1. Por ejemplo 0 sería totalmente transparente, 1 sería totalmente opaco y 0.5 sería una transparencia al 50%, es decir, mitad opaco mitad transparente.
Ahora veamos varios ejemplos de colores definidos con CSS y la notación RGBA.
Dependiendo del navegador que se utilice, se verán o no los distintos colores, puesto que las CSS 3 no son compatibles con todos los sistemas. Este ejemplo funcionará bien en navegadores que cumplen los estándares, como Firefox, Chrome o Safari, pero no en navegadores como Internet Explorer, que hacen la guerra por su cuenta.
El código del anterior ejemplo es el siguiente:
- <html> - <head> - <title>Colores RGBA con CSS 3</title> - <style type="text/css"> - div.cuadrado{ - width: 150px; - height: 40px; - border: 1px solid #dddddd; - margin: 5px; - }d - iv.textogrande{ - font-family: verdana, arial, helvetica; - font-weight: bold; - font-size: 40pt; - } - </style> - </head> - <body> - <h1>Colores RGBA con CSS 3</h1> - <h2>Ejemplo de capas con fondo azul y varias transparencias</h2> - <div class="cuadrado" style="background-color: rgba(0, 0, 255, 0.1);"></div> - <div class="cuadrado" style="background-color: rgba(0, 0, 255, 0.4);"></div> - <div class="cuadrado" style="background-color: rgba(0, 0, 255, 0.7);"></div> - <div class="cuadrado" style="background-color: rgba(0, 0, 255, 1);"></div> - <h2>Ejemplo de capas con fondo verde y varias transparencias, sobre una capa con fondo amarillo</h2> - <div style="background-color: #ff3; padding: 10px;"> - <div class="cuadrado" style="background-color: rgba(0, 255, 0, 0.1);"></div> - <div class="cuadrado" style="background-color: rgba(0, 255, 0, 0.4);"></div> - <div class="cuadrado" style="background-color: rgba(0, 255, 0, 0.7);"></div> - <div class="cuadrado" style="background-color: rgba(0, 255, 0, 1);"></div> - </div> - <h2>Ejemplo de capas con fondo naranja y varias transparencias, sobre una capa con una imagen de fondo</h2> - <div style="background-image: url(fondo/nieve.gif); padding: 10px;"> - <div class="cuadrado" style="background-color: rgba(255, 125, 0, 0.1);"></div> - <div class="cuadrado" style="background-color: rgba(255, 125, 0, 0.4);"></div> - <div class="cuadrado" style="background-color: rgba(255, 125, 0, 0.7);"></div> - <div class="cuadrado" style="background-color: rgba(255, 125, 0, 1);"></div> - </div> - <h2>Ejemplo de texto de color rojo y varias transparencias, sobre una capa con una imagen de fondo</h2> - <div style="background-image: urlfondo/nieve.gif); padding: 10px;"> - <div class="textogrande" style="color: rgba(200, 0, 0, 0.3);">Este texto está para que se vea que puede ser también medio transparente</div> - <div class="textogrande" style="color: rgba(200, 0, 0, 0.7);">Este texto está para que se vea que puede ser también medio transparente</div> - </div> - </body> - </html>
Vamos a ver una propiedad interesante que servirá para que ciertas palabras que son demasiado largas y no caben en la anchura de una caja. Como debemos saber, en el modelo de caja de los navegadores, las palabras se van colocando en líneas para ocupar toda la anchura disponible en la caja. Puede surgir un problema cuando tenemos una palabra muy larga, que no cabe en el ancho disponible del contenedor donde se ha colocado. Entonces lo que ocurre es que la palabra aparece por fuera de la caja, o incluso puede ocurrir que la caja se deforma de tamaño, haciendo que el elemento contenedor amplíe la anchura lo suficiente para que quepa la palabra. En cualquier caso, el efecto resultante suele ser poco agradable, porque muchas veces nos descuadra nuestro diseño y hace que las páginas queden mal maquetadas. Para evitar este efecto, en CSS 3 se ha incluido un atributo llamado word-wrap que sirve para especificar que las palabras que sean demasiado largas se deben cortar, de manera que quepan en el ancho disponible de la caja. Una propiedad muy útil que seguro que pronto se comenzará a utilizarse habitualmente. Hemos de agradecer a Microsoft la incorporación de esta nueva propiedad de CSS 3, ya que el atributo word-wrap comenzó siendo una etiqueta no estándar de CSS, que estaba disponible en Internet Explorer y debido a su utilidad, el W3C se decidió a incorporarla a la nueva especificación de este lenguaje de estilo. El atributo word-wrap tiene dos posibles valores: normal o break-word.
word-wrap: normal;
Hace que las palabras no se corten, lo que sería el comportamiento normal que conocíamos hasta ahora, ocurriendo que las palabras largas nos puedan descuadrar nuestro diseño.
word-wrap: break-word;
Con este otro valor de word-wrap: break-word, lo que conseguimos es que la palabra se recorte, para caber en el ancho que habíamos definido.
Vamos a tratar sobre las nuevas características de CSS para maquetación automática de textos en columnas. Podríamos imaginarnos el texto de los periódicos si no se encontrase dividido en diversas columnas ¿no sería casi imposible seguir las líneas para hacer una lectura cómoda de la información si todo estuviera en una única columna? Este problema no lo encontramos generalmente en las páginas web, porque el texto que cabe en el cuerpo de la página no es tan grande como el que cabría en una hoja de un diario. Además, generalmente la propia página ya se encuentra dividida en diversas columnas. No obstante, aunque quisiéramos, con las características de CSS 2 no sería muy fácil hacer un texto fluído que se adaptase automáticamente en columnas, de modo que éstas crecieran homogéneamente a medida que el texto crece o se reduce. CSS 3 soluciona este problema, o más bien ofrecerá una solución al mismo, sencilla y automática. Para crear una estructura multi-columna utilizaremos varios atributos, que servirán para modelizar las columnas:
Un ejemplo de multicolumna, para que funcione en estos navegadores sería:
- .multicolumna{ - -moz-column-width: 15em; - -moz-column-gap: 15px; - -webkit-column-width: 15em; - -webkit-column-gap: 15px; - -webkit-column-rule: 1px solid #ccc; - -moz-column-rule: 1px solid #ccc; - }
Otra posibilidad para crear un multicolumna será definir simplemente el número de columnas que querríamos incorporar en el texto, por medio del atributo column-count, de esta manera:
- .multicolumna5columnas{ - -moz-column-count: 5; - -moz-column-gap: 2em; - -moz-column-rule: 1px solid #ccf; - -webkit-column-count: 5; - -webkit-column-gap: 2em; - -webkit-column-rule: 1px solid #ccf; - }
Especificar el número de columnas es quizás más cómodo, pero en páginas fluidas puede funcionar peor, porque no se sepa con certeza qué anchura va a tener el lugar donde se muestran los textos y por tanto unas veces queden columnas muy anchas y otras muy estrechas.
De manera resumida, border-image es un atributo que nos ayudará a aplicar nuevos estilos a las cajas con CSS, a través de la utilización de imágenes en los bordes de los elementos, incluso pudiendo escoger varias imágenes para varias de las partes de los bordes. Colocar imágenes en los bordes es una tarea que ya se suele realizar en el diseño web, y para ello se suelen utilizar complementariamente técnicas con los lenguajes HTML y CSS. Es decir, en el momento de escribir este artículo, para que un elemento de la página, como puede ser una división o una tabla, párrafo, etc., tenga un borde a partir de una imagen, se necesita colocar algún código HTML adicional, con algún contenedor que nos permita luego definir estilos CSS para “imitar” ese borde de imagen. En cualquier caso, estemos o no familiarizados con las técnicas de uso de imágenes en los bordes, lo importante es que con CSS 3 vamos a poder hacer eso mismo simplemente escribiendo algunos nuevos atributos a los elementos que deseemos.
Por ejemplo, tendríamos este elemento HTML:
<div id=“capaborde”> Esta capa le voy a poner un borde arriba </div>
Y ahora podríamos aplicar estilos para crear un borde en la imagen:
- #capaborde{ - border:1px; - border-radius: 10px 10px 0px 0px; - background:url(../img/barra.png); - height:26px; - width:100%; - {
A parte del atributo border-image, existen otros numerosos atributos para definir los bordes de manera independiente para cada uno de los lados o vértices de un elemento HTML. Sin embargo, según la última especificación de CSS 3, tenemos los siguientes atributos:
Explicar con ejemplos cada uno de estos atributos sería sin duda interesante, pero nos llevaría varios artículos.
CSS 3 supone una nueva revolución en el diseño web, aportando soluciones a muchas de las prácticas que utilizan los diseñadores para decorar las páginas web. Esto quiere decir que, muchas de las cosas que antes hacíamos con técnicas de diseño que requerían uso de imágenes, como las sombras o las esquinas redondeadas, a partir de ahora las vamos a poder especificar simplemente desde CSS.
A lo largo del Manual de CSS 3 ya vimos varios atributos nuevos de bastante importancia y variedad y ahora le toca el turno a box-shadow, el atributo de CSS3 que nos permitirá definir sombras a los elementos de la página.
Atributo box-shadow El atributo box-shadow requiere varios valores para especificar las características de la sombra, como difuminado, separación de la sombra y la propia caja o color. La sintaxis es como esta:
box-shadow: 5px -9px 3px #000;
Por orden de aparición, los valores que se indican en box-shadow son:
Desplazamiento horizontal de la sombra: La sombra de un elemento suele estar un poco desplazada con respecto al elemento que la produce y su posición será en función del ángulo con el que llegue la luz. En el caso de este ejemplo el primero de los valores, 5px, quiere decir que la sombra aparecerá 5 píxeles a la derecha. Si la sombra quisiéramos que apareciera un poco hacia la izquierda del elemento original que la produce, pondríamos un valor negativo a este atributo. Cuanto más desplazamiento tenga una sombra, el elemento que la produce parecerá que está más separado del lienzo de la página.
Desplazamiento vertical de la sombra: El segundo valor que colocamos en el atributo boxshadow es el desplazamiento vertical de la sombra con respecto a la posición del elemento que la produce. Este valor es similar al desplazamiento horizontal. Valores positivos indican que la sombra aparecerá hacia abajo del elemento y valores negativos harán que la sombra aparezca desplazada un poco hacia arriba. En el caso del anterior ejemplo, con -9px estamos indicando que la sombra aparecerá desplazada 9 píxeles hacia arriba del elemento.
Difuminado: El tercer valor indica cuánto queremos que esté difuminado el borde de la sombra. Si el difuminado fuera cero, querría decir que la sombra no tiene ningún difuminado y aparece totalmente definida. Si el valor es mayor que cero, como en nuestro ejemplo 3px, quiere decir que la sombra tendrá un difuminado de esa anchura, 3 píxeles en el ejemplo.
Color de la sombra: El último atributo que se indica en el atributo box-shadow es el color de la sombra. Generalmente las sombras en el mundo real tienen un color negro o grisaceo, pero con CSS3 podremos indicar cualquier gama de color para hacer la sombra, lo que nos dará bastante más versatilidad a los diseños gracias a la posible utilización de sombras en distintos colores, que puedan combinar mejor con nuestra paleta. En el ejemplo anterior habíamos indicado una sombra con color negro.
Ahora veamos varios ejemplos de sombras creadas directamente con CSS 3 y el atributo boxshadow.
- #cajasombra{ - background-color: #ddd; - width: 300px; - padding: 10px; - box-shadow: 5px 5px 0 #333; - }
Esto crearía una capa con un gris claro como color de fondo y una sombra desplazada abajo y a la derecha en 5 píxeles y sin difuminado. Además, hemos definido un color de sombra gris oscuro para el elemento.
- #sombraclara{ - width: 200px; - padding: 10px; - background-color: #999; - color: #fff; - box-shadow: 2px 2px 2px #ffc; - }
Este otro ejemplo es para una sombra un poco menor, también desplazada hacia abajo y a la derecha y con un difuminado de 2 píxeles. Además hemos indicado un color amarillo claro para la sombra, por lo que, para verla bien, tendríamos que colocar este elemento sobre un fondo oscuro.
- #sombraredondeada{ - background-color: #090; - color: #fff; - width: 400px; - padding: 10px; - -moz-border-radius: 7px; - -webkit-border-radius: 7px; - box-shadow: 15px -10px 3px #000; - }
En este tercer ejemplo tenemos un caso curioso de sombra, pues está aplicada sobre un elemento que tiene las esquinas redondeadas con CSS 3. Así pues, la sombra también debe tener las sombras redondeadas, para ajustarse al elemento que la produce. Ambos navegadores con compatibilidad a sombras y CSS 3 funcionan correctamente con sombras y bordes redondeados.