Sombras con css3

26 Abr

Muchos de los sitios web utilizan en sus diseños sombras, algo que curiosamente no permite css2 o lo permite en pocos navegadores. Para solucionar este problema debíamos utilizar imágenes que hicieran una suerte de sombra. Pero con css3 la cosa es mucho más fácil.

La propiedad box-shadow nos permite crear sombras en los elementos como por ejemplo los div. Esta propiedad recibe cuatro valores.

  • Coordenada X en píxeles Si el valor es mayor a 0px dibujará una sombra a la derecha. En caso de que el valor sea menor a 0px la sombra irá a la izquierda.
  • Coordenada Y en píxeles también. Si el valor es mayor a 0px la sombra irá hacia abajo del elemento. Pero si el valor es menor a 0px la dibujará hacia arriba.
  • Nivel de suavizado. En píxeles, cuanto más grande sea el valor más efecto de sombreado le dará al elemento.
  • Color de la sombra.

 

 

 

 

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <meta charset="utf-8">
    <title>Aca va el titulo de la pagina</title>
    <style type="text/css">
       #caja_con_sombra {
          width: 100px;
          height: 100px;
          border: solid 1px #000;
          box-shadow: 5px 5px 10px #000;
          -moz-box-shadow: 5px 5px 10px #000;
          -webkit-box-shadow: 5px 5px 10px #000;
       }
   </style>
 </head>
 <body>
    <div id="caja_con_sombra"></div>
 </body>
</html>

Las propiedades -moz-box-shadow y -webkit-box-shadow son para que funcione en Firefox y Safari.

Otra posibilidad que nos da css3 es ponerle sombras a los textos. Para ello debemos usar la propiedad text-shadow que recibirá los mismos valores que box-shadow.

 

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <meta charset="utf-8">
    <title>Aca va el titulo de la pagina</title>
    <style type="text/css">
       #texto_con_sombra {
          text-shadow: 1px 1px 10px #000;
       }
    </style>
 </head>
 <body>
    <p id="texto_con_sombra"> Este es un texto con sombra. </p>
 </body>
</html>

 

Redes sociables

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


    *