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++
y entérate de las novedades o deja un comentario.
Ültima modificación: 29-01-2016.
Visitas este mes: 40
Visitas el mes pasado: 68
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
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
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.
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
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.
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