OK Amigos continuando con los tutoriales de encabezado con movimiento, en esta segunda parte vamos con algo aun mas atractivo a nuestro blog. Pondremos un titulo en el encabezado con movimiento solo con
CSS. Espero que sea de su agrado..
Encabezado de nubes en movimientos con CSS: Parte 1
Demo
Comencemos:
- Paso 1: Vamos a Blogger>> Plantilla>> Edicion HTML>>
- Paso 2: Buscamos la siguiente linea (Ctrol + F)
- Paso 3: Justo por encima de ]]></b:skin> pegamos la siguiente linea CSS
TBlogger {
cursor: default;
position: absolute;
top: 30px;
left: 0;
right: 0;
bottom: 1;
height: 0px;
margin: auto;
display: block;
-webkit-animation: bounce .3s ease infinite alternate;
font-family: 'Titan One', cursive;
font-size: 80px;
color: #FFF;
text-align: center;
line-height: 100px;
text-shadow: 0 1px 0 #CCC,
0 2px 0 #CCC,
0 3px 0 #CCC,
0 4px 0 #CCC,
0 5px 0 #CCC,
0 6px 0 transparent,
0 7px 0 transparent,
0 8px 0 transparent,
0 9px 0 transparent,
0 10px 10px rgba(0, 0, 0, .6);
}
/* ANIMATION */
@-webkit-keyframes bounce {
100% {
top: -30px;
text-shadow: 0 1px 0 #CCC,
0 2px 0 #CCC,
0 3px 0 #CCC,
0 4px 0 #CCC,
0 5px 0 #CCC,
0 6px 0 #CCC,
0 7px 0 #CCC,
0 8px 0 #CCC,
0 9px 0 #CCC,
0 30px 30px rgba(0, 0, 0, .3);
}
}
Recuerden en la primera parte de estos tutoriales buscamos la etiqueta </head> y justo debajo de ella pegamos el código HTML siguiente
<div id="nubes">
<h1>
.. Tutoriales Blogger ..
</h1>
<h3>
Nube de encabezado</h3>
</div>
- Paso 4: Elimina lo que se encuentra entre <div id="nubes"> y su etiqueta de cierre </div>
- Paso 5: Y agrega la siguiente linea HTML
- Paso 6: Guardamos los cambios realizados en nuestra plantilla
No lo sabía 0_o Gracias por compartirlo.
ResponderEliminar