BlogDesign

Buenas :) En este tutorial veremos cómo aplicar un efecto fade al cargar el blog . Desde otro punto de vista también podemos decir que creamos una ventana de carga que oculta el contenido del blog hasta que éste se cargue por completo. El truco es muy sencillo  sólo creamos un contenedor que oculte todo el blog, y con Javascript (mejor dicho: jQuery) le ordenamos que desaparezca, luego de finalizar la carga, y que aparezca, al ingresar a un enlace. La idea y gran parte del código lo obtuve de esta entrada de Ciudad Blogger , pero tuve que modificar algunas cosas para que no sea el body quien se oculte, sino que la ventana de carga se pose sobre el mismo para ocultarlo. Antes de empezar, debes tener instalado en tu plantilla jQuery , pegando la siguiente línea antes de </head> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/> En caso de ya tenerlo, no pegues nada ;) Ahora continuemos con el HT...

Habrás visto en algunos sitios algo parecido a esto que te voy a mostrar. Puedes aplicar este efecto a cualquier cosa y en realidad le dejará un buen toque de originalidad. Se trata de simular sombras que están detrás del elemento, que parecen ser páginas. Esto lo podés aplicar tanto en imágenes como en contenedores, como el cuerpo de entradas de tu plantilla. Lo principal para aplicar el efecto es aplicar una clase al elemento, como las imágenes o contenedores, o buscar el ID del contenedor de tu plantilla que quieras aplicar el efecto, como Blog1 , que es el contenedor principal de las entradas. .imagen-sombra { box-shadow: 0 10px 0 -5px #E4E4E4,                      0 20px 0 -10px #D5D5D5; margin-bottom:15px; padding:0; } Debes reemplazar .imagen-sombra con un # seguido del ID del contenedor. Y en el HTML utilizamos (para una imagen) <img class='imagen-sombra' src=' url-imagen '/> Y ya lo obtenemos, pero si ...

¡Hola! Ya pasó mucho tiempo desde mi última publicación, ya que estuve ocupado todo este tiempo. Hoy les traigo esta idea extraída de Ayuda Bloggers  en la que, utilizando la propiedad  text-shadow , similaremos un efecto de blur. Ejemplo 1: Texto Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. El HTML: <div class="blur-texto"...