Google+ Crear sombra con CSS3 y javascript, en blogger - Visible en internet explorer - Miopiblog

martes, 1 de enero de 2013

Crear sombra con CSS3 y javascript, en blogger - Visible en internet explorer

Te voy a enseñar como crear sombra a un div con CSS3 y javascript, en blogger. Además, gracias a CSS3 y con ayuda de un plugin de javascript llamado PIE.js, la sombra se verá en todos los navegadores, incluido Internet Explorer. Si lo que necesitas es crear la sombra en CSS3 para que se vea en todos los navegadores, pero en vez de en blogger, quieres hacerlo en otro sitio web, puedes echar un vistazo a este post en el que te explico como crear sombra con CSS3 y PIE.js en un sitio web.



Lo primero que vamos a hacer para crear sombra exterior a un div, con CSS3 y javascript, es crear una clase a la que llamaremos sombreado. Gracias a esta clase, podremos aplicar las propiedades box-shadow de CSS3 y sus correspondientes valores a cualquier div o elemento. Para ello, creamos el código CSS:


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

Ahora tienes que introducir jQuery en el blog (si no lo has hecho ya...), y el archivo PIE.js del plugin de javascript. Para hacer esto, creamos un código javascript:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!--[If IE]><script type="text/javascript" src="http://benidormexperineces.comli.com/js/PIE.js"> </ script><![endif]-->

Ten en cuenta que te facilito la dirección web para cargar el archivo PIE.js desde un dominio experimental o de pruebas (http://benidormexperineces.comli.com/js/PIE.js). Si sabes algo de html, programación o creación de sitios web, te recomiendo que subas el archivo PIE.js a un servidor de tu propiedad y luego cambies la dirección en el código javascript para usar tu propio archivo .js, así nunca te dejará colgado ni parará de funcionar correctamente el plugin.

Y ahora algo fácil, copiar y pegar lo que hemos creado. Abre el editor de código de tu plantilla blogger, expande los artilugios y busca lo siguiente:   <b:include data='blog' name='all-head-content'/> . Una vez lo hayas localizado, pega este código, justo encima:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!--[If IE]><script type="text/javascript" src="http://benidormexperineces.comli.com/js/PIE.js"> </ script><![endif]-->

A continuación, busca esto ]]></b:skin> y justo encima, pega el siguiente código:

/* Sombra divs
------------------------------------------- */
.sombreado {
box-shadow: 5px 4px 3px #000;
   -webkit-box-shadow: 5px 4px 3px #000;
   -moz-box-shadow: 5px 4px 3px #000;
}

Busca la etiqueta </body> y pega el siguiente código justo encima, Gracias a este código de jQuery, invocamos a PIE.js para que haga efecto sobre un div, elemento o clase CSS:

<script type='text/javascript'>
//<![CDATA[
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery(function() {
    if (window.PIE) {
        jQuery('.sombreado').each(function() {
            PIE.attach(this);
        });
    }
});
});
//]]>
</script>

Pues ya está, guárdalo y cierra la ventana de edición de tu plantilla, vamos a probar como funciona. Crea una nueva entrada, haz click sobre la pestaña HTML en la ventana de edición de la nueva entrada. Una vez abierto el editor de código de tu nueva entrada, introduce este div con la clase "sombreado" aplicada:


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

Haz click sobre "Publicar" y después abre tu blog para ver la nueva entrada. Si lo has hecho todo correctamente, verás algo como esto en tu nueva entrada:




Puedes comprobar la visibilidad de este div en Internet Explorer, las propiedades CSS3 de la clase "sombreado", se respetan gracias a PIE.js y la sombra sigue visible en este navegador. Si entiendes sobre html, programación, creación de sitios web... etc, lo mejor es que le eches un vistazo tu mismo a todo esto de CSS3 PIE, ya que hay otras opciones para conservar propiedades de CSS3 en Internet explorer, y no solo para box-shadow. Aquí te dejo el link a PIE.js de CSS3 PIE, espero que te sea de utilidad.

Ya sabes que tras aplicar lo que te explico en este post a tu blog de blogger, solo tienes que definir la clase del objeto o div que quieres que se vea con sombra de la siguiente manera: "<div class="sombreado">". Simplemente con aplicar la clase, conseguirás que la sombra sea visible en todos los navegadores.


Seguidores (seguir blog)

Me siguen en google plus: