Google+ Crear sombra en elementos div o imágenes con CSS3 - Miopiblog

miércoles, 12 de diciembre de 2012

Crear sombra en elementos div o imágenes con CSS3

Vamos a crear sombra alrededor de un elemento html, como por ejemplo un div, ayudándonos de CSS3 y javascript. Es algo bastante sencillo; primero voy a definir una nueva clase de CSS en la que aplicaré la sombra mediante propiedades de CSS3. Después le voy a añadir un plugin de javascript llamado PIE.js, gracias al cual resuelvo la incompatibilidad actual de algunos navegadores con CSS3 y consigo conservar la sombra en los elementos, es decir, una correcta visualización de la sombra en casi todos o todos los navegadores de internet. Si quieres crear una sombra con CSS3 y javascript en blogger, entonces es mejor que visites este último link.

Para comenzar, creamos una nueva clase en nuestra hoja de estilos CSS. A esta clase la voy a llamar sombra, lo hacemos de la siguiente manera:


.sombra {
box-shadow: 5px 4px 3px #000;
   -webkit-box-shadow: 5px 4px 3px #000;
   -moz-box-shadow: 5px 4px 3px #000;
}

Te explico un poco lo que he escrito:

"box-shadow: 5px 4px 3px #333"; - Con esto estamos indicando que la sombra se debe desplazar 5px hacia la derecha (primer valor), 4px hacia abajo (segundo valor), y que debe tener un difuminado de 3px. Así mismo, estamos indicando también, mediante el valor #000, que el color de dicha sombra debe ser negro.

" -webkit-box-shadow: 5px 4px 3px #000;
   -moz-box-shadow: 5px 4px 3px #000;" - Debemos escribirlo así también para que los navegadores basados en webkit y mozilla puedan leerlo.

A continuación creamos un div, al cual le aplicamos la nueva clase "sombra" que hemos creado:

<div class="sombra" style="background: red; height: 100px; width: 100px;">

De momento todo fácil no? eso sí, asegúrate de que tu hoja de estilos esté vinculada al sitio web correctamente, si no no servirá para nada : -) . Si lo has hecho todo bien, en tu sitio web se debe ver algo parecido a esto:


Ya hemos creado un div con sombra ayudándonos de CSS3, el problema ahora, es que algunos navegadores, como por ejemplo algunas versiones de Internet Explorer, aún no reconocen o interpretan bien  CSS3, por lo que la sombra no es visible en estos casos... ¿que hacemos entonces? Para solucionar este problema, voy a añadir PIE.js, un plugin de javascript que soluciona este problema y gracias al cual conservaremos las propiedades de sombra de CSS3 en los navegadores que no interpretan bien nuestra hoja de estilos. También tenemos la posibilidad de utilizar PIE.htc, pero yo prefiero utilizar .js, ya que javascript es algo que está a la orden del día.

Después de hacer click sobre el enlace a PIE.js que te facilito un poco más arriba, lo único que tienes que hacer es descargarlo y descomprimir el archivo PIE.js dentro del directorio javascript de tu sitio web. Una vez realizada esta acción, solo nos queda cargar PIE.js, pero para ser más eficaces, sólo lo haremos cuando se trate de Internet Explorer.
Para ello, tienes que introducir el siguiente código entre las etiquetas <head> y </head> del sitio web:

<- [If lt IE 10]>
<script type="text/javascript" src="js/PIE.js"> </ script>
<[Endif] ->

Y por último, solo nos queda escribir un código javascript que nos sirve para invocar o llamar a PIE.js. Aprovechando que ya debes saber como empezar a usar jquery, lo haremos con este framework:

<script type="text/javascript">
$(document).ready(function() {
$(function() {
    if (window.PIE) {
        $('.sombra').each(function() {
            PIE.attach(this);
        });
    }
});
});
</script>

Pues ya está, lo único que queda es subirlo todo mediante FTP o como tú quieras y disfrutar de tu sombra en todos o casi todos los navegadores.

Recuerda seguirme en las redes sociales (si quieres) : -)

Seguidores (seguir blog)

Me siguen en google plus: