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.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.


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: 56

Visitas el mes pasado: 78

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

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




10. Trucos CSS (IV)

10.4 Otros trucos CSS

css

Sombras

Una de las carencias que tiene el lenguaje CSS 2.1 es la posibilidad de mostrar sombras en los elementos. La nueva versión CSS3 incluye una propiedad llamada box-shadow que permite incluir sombras a los elementos de una página.

Los principales navegadores modernos en sus últimas versiones ya contemplan esta propiedad de CSS, por lo que podemos usarla para ver en ellos los elementos con sombras.

Sin embargo en los navegadores más antiguos, que no admiten CSS3 La solución más común es insertar la sombra mediante una imagen. Para ello haremos lo siguiente:

El problema de esta técnica es que sólo se puede aplicar a elementos de tamaño fijo preestablecido, y que no varíen al variar el tamaño de la página.

.

Así, elementos como títulos o párrafos resaltados en otros colores, no puede aplicarseles una sombra (tipo imagen), si no están previamente encuadrados en un elemento tipo "div".

Sin embargo los navegadores Mozilla-Firefox, Safari y Google Chrome incluyen la propiedad box-shadow aunque con otro nombre: Para Mozilla se llama -moz-box-shadow y en Safari y Google Chrome webkit-box-shadow Su sintaxis es la misma que se describe para la propiedad box-shadow en el lenguaje CSS 3, y es la siguiente:

box-shadow: <medida> <medida> <medida>? <medida>? <color>

La primera y la segunda medida son obligatorias, y designan respectivamente el desplazamiento horizontal y vertical de la sombra.

La tercera medida es opcional. Indica el radio utilizado para difuminar la sombra. Cuanto mas grande sea su valor, mas borrosa aparece la sombra. Si se utiliza el valor 0, la sombra se muestra como un color sólido.

La cuarta medida tambien es opcional. Indica el radio con el que se expande la sombra. Si tiene un valor positivo, la sombra se expande en todas direcciones. Si se utiliza un valor negativo, la sombra se comprime.

El color indicado es el color en que se muestra la sombra.

Un ejemplo de código para mostrar una sombra en estos dos navegadores sería el siguiente:

.elemento {-webkit-box-shadow: 2px 2px 5px #999; -moz-box-shadow: 2px 2px 5px #999; }

Para ver un ejemplo de página con un elemento con sombra pulsa en el siguiente enlace (sólo en navegadores Mozilla, Safari y Google Chrome, u otros navegadores actualizados):

Elemento con sombra.


NOTA: las nuevas versiones de los navegadores anteriores incluyen ya la propiedad box-shadow sin necesidad de prefijos. También la nueva versión de Opera, y la última versión de Internet Explorer (IE 10), incluyen ya la propiedad box-shadow sin necesidad de prefijos. Podemos ver más sobre la propiedad box-shadow en el Manual de CSS· - Sombras


Transparencias

Otra de las carencias del lenguaje CSS 2.1, y que incluye CSS 3 es controlar la opacidad del color de un elemento. La propiedad se llama opacity y permite incluir transparencias en el color de fondo de un elemento.

El valor de la propiedad opacity se establece mediante un número decimal entre 0.0 y 1.0. de tal forma que el valor 0.0 es la máxima transparencia (el elemento es invisible) y el valor 1.0 es la máxima opacidad (el elemento es completamente opaco). Así, el valor 0.5 se corresponde a un elemento semitransparente.

.elemento {opacity: 0.5; }

La mayoría de los navegadores en sus versiones más modernas ya incluyen esta propiedad. (Mozilla, Safari, Opera, Google Chrome), la excepción entre los más importantes es Internet Explorer, aunque en su última versión (IE10) ya la incluye. Sin embargo muchos usuarios siguen utilizando versiones anteriores a IE10, ya que IE10 no es compatible con windows XP o versiones anteriores de windows (debiendo utilizar IE8).

Sin embargo en Internet Explorer hay otra forma de mostrar esta propiedad, y es mediante la aplicación de un mecanismo llamado filtros, el cual aunque no forma parte de ningún estándar de CSS funciona como una propiedad CSS.

Los filtros permiten aplicar operaciones complejas a elementos de la página. El filtro que se aplica en este caso es el filtro "alpha" y tiene varias funciones, una de ellas es controlar la opacidad. Se aplica igual que una propiedad CSS, y su sintaxis en este caso es la siguiente:

filter: alpha(opacity=numero);

Donde "numero" es un número entre 0 y 100: el valor 0 corresponde a la máxima transparencia (elemento invisible) y 100 a la máxima opacidad (elemento totalmente visible).

la solución compatible con todos los navegadores para que un elemento de la página se muestre semitransparente sera:

.elemento {opacity: 0.5; filter: alpha(opacity=50); }

A continuación se muestra una página con elementos semitransparentes a los que se les ha aplicado este código.

Elementos semitransparentes


Insertando la propiedad opacity y el filtro alpha de Internet Explorer es posible ver elementos semitransparentes en todos los navegadores modernos.




En la siguiente página veremos Algunas herramientas útiles en el diseño con CSS.

Herramientas y recursos.







manual de CSS

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