Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Nuevo CSS3

Nuevas tendencias en el estilo y diseño de páginas con CSS3.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.

CSS3 (VII)

Transparencias

Colores transparentes: rgba

Una de las maneras de definir los colores en CSS es RGB. En RGB el color lo definimos de la siguiente manera:

color: rgb(255, 0, 0)

Donde cada uno de los tres números representa el grado de presencia de los tres colores básicos: rojo, verde y azul. Los valores de cada color van desde el 0 al 255.

Basándose en este sistema de definir colores, se crean los colores RGBA, para ello se añade un cuarto número, llamado canal alfa, y que indica el grado de transparencia del color.

Los valores del canal alfa son números decimales del 0 al 1, siendo el 0 la transparencia total y el 1 la opacidad total. Para hacer el ejemplo anterior semitransparente escribiremos:

color: rgba(255, 0, 0, 0.5);

Los colores semitransparentes dejan entrever, según su grado de opacidad, los elementos que tienen debajo. El sistema de colores RGBA está disponible ya en las últimas versiones de los principales navegadores. Internet Explorer lo incorpora ya en su versión 9. Puedes ver un ejemplo, con su código fuente en el siguiente enlace:

Colores semitransparentes RGBA

Colores HSL.

En CSS3 hay una nueva forma de definir los colores, la cual ya se usa en otros programas de dibujo o de tratamiento de imágenes, es los colores HSL, Hay tres factores que intervienen para definir el color: matiz, saturación, y luminosidad.

• Matiz : Es el color en sí partiendo de una rueda de colores en la que los colores básicos ocupan las siguientes posiciones: rojo 0º (ó 360º), azul 120º, verde 240º. El resto de colores son mezcla de los anteriores y se crean según estén más cerca o más lejos de los colores básicos. El matiz se mide en grados por lo que su valor va de 0 a 360.
• Saturación : Es la cantidad de color en si (matiz) que tiene. cuanto menos tenga más tonalidad grisacea tendrá el color. Se mide en porcentaje, que va del 0% (sin color) al 100% (color puro).
• Luminosidad : También llamado brillo, representa la cantidad de color en el eje blanco-negro, se mide en porcentaje de manera que el 0% nos dará siempre negro, y el 100% dará el blanco, o un color muy claro dependiendo de la saturación.

Para saber más sobre el color en HSL consultar en Wikipedia: Modelo de color HSV

Estos serían los colores básicos en el modelo HSL:

Rojo : color: hsl(0, 100%, 50%);

Verde : color: hsl(120, 100%, 50%);

Azul : color: hsl(240, 100%, 50%);

Navegadores: los colores HSL pueden usarse ya en las versiones más recientes de todos los navegadores. IE lo incorpora en su versión 9.

Colores HSLA

A la forma anterior de definir los colores se le añade el canal alfa o transparencia, con lo que tenemos los colores en HSLA. La forma de definir los colores es igual que para HSL, pero añadiendole un nuevo número, que define el grado de transparencia.

Como en los colores RGBA, el grado de transparencia se define mediante un número decimal del 0 al 1, donde 0 será la transparencia total, y el 1 la opacidad total.

Estos serían los colores básicos en el modelo HSLA en modo semitransparente:

Rojo : color: hsla(0, 100%, 50%, 0.5);

Verde : color: hsla(120, 100%, 50%, 0.5);

Azul : color: hsla(240, 100%, 50%, 0.5);

Los colores en HSLA están disponibles en las últimas veriones de todos los navegadores IE lo incorpora en su versión 9.

En el siguiente enlace vemos un ejemplo en el que usamos colores en HSLA, y su código fuente:

Colores semitransparentes HSLA

Transparencia en elementos.

Podemos conseguir que cualquier elemento tenga también un cierto grado de transparencia. Para ello CSS3 incluye la propiedad opacity. Esta propiedad tiene un único valor que será un número decimal entre 0.0 (transparencia total) y 1.0 (opacidad total). Correspondiendo el 0.5 a un elemento semitransparente. Los valores son los mismos que para el canal alfa de colores.

#capa1 {opacity: 0.5}

Todos los navegadores incluyen ya esta propiedad. Internet Explorer la incluye desde la versión 9.

Internet Explorer en versión 8 y anteriores no acepta esta propiedad, sin embargo tiene unos mecanismos llamados filtros, que funcionan como propiedades CSS. En la página anterior ya hemos usado alguno de ellos para crear sombras, y hemos visto cómo funcionan. El filtro "alpha" permite dar transparencia a cualquier elemento en Internet Explorer. su sintaxis es la siguiente:

filter: alpha(opacity=50)

Donde el valor de "opacity" es un número comprendido entre el 0 (transparencia total) y el 100 (opacidad total).

Combinando la propiedad opacity y el filtro "alpha", podemos hacer que un elemento se vea con transparencia en prácticamente todos los navegadores incluido IE8 y anteriores.

#capa1 {opacity: 0.5; filter: alpha(opacity=50)}

Con este código cada navegador interpertará el código que acepta, ignorando el resto.

---

En la siguiente página veremos otra novedad de CSS3: poder dividir un texto en columnas.

Múltiples columnas

---

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com