Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 225

Visitas el mes pasado: 55

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual de CSS 3 : desarrollo web
Desarrollo Web
CSS avanzado: Libros Web.
Javier Eguíluz Pérez
Lista de nuevas propiedades CSS3
www.css3.info
Documentación CSS
mozilla: centro de documentación.
CSS Backgrounds and Borders Module Level 3
W3C Candidate Recommendation 15 February 2011
CSS Text Level 3
W3C Working Draft 1 September 2011
CSS Multi-column Layout Module
W3C Candidate Recommendation 12 April 2011
Flexible Box Layout Module
W3C Working Draft, 23 July 2009
CSS Reference
W3Schools Home
Filtros en Internet Explorer
Visual Filters and Transitions Reference. Microsoft.com
Usando CSS para poner guiones
Roberto Baca: /dd>

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




CSS3 (VII)

Transparencias

Colores transparentes: rgba

imagen css3

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.

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







Manual de CSS3

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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