martes, 26 de julio de 2011

Fondo gradiente en Blogger con CSS3

Existen demasiados tipos de gradientes, en distintas direcciones y tamaños, pero en esta oportunidad nos centraremos únicamente en uno circular superior.

El gradiente se verá mas o menos así:

Ejemplo Fondo gradiente


Esta es una muestra de lo que se puede hacer con gradientes en CSS nivel 3.

Tutorial por Cloudx18 de Ayuda Bloggers.


¿Cómo añadir un fondo gradiente en Blogger?


Debes saber que esto funciona sobre navegadores webkit (Chrome, Safari, etc), bajo Firefox, y sobre la futura versión de Internet Explorer (IE10)

Primero, vé a ''Diseño | Edición HTML'' (''Plantilla | Editar Plantilla'' si utilizas Blogger 2011), deberás buscar en la zona CSS  el body (Antes de ]]></b:skin>), el cual se encuentra casi al inicio.

Es un código muy similar a este:
body {

Debajo de este, deberás pegar el siguiente:
background:#111; /*Color de fondo si no funciona el efecto en algun navegador*/
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px); /*Gradiente Firefox*/
background-image: -ms-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px); /*Gradiente IE10*/
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111)); /*Gradiente webkit*/

Guarda los cambios y listo.

Importante:
  • Es posible que en blogs con cabeceras muy grandes no se pueda ver porque el contenido lo sobreponga, para ello aumenta el valor 150 y 300 de todos los códigos y listo.

Offtopic: Perdón por posponer todo lo que me han pedido algunos, o si me demoro en responder los comentarios, pero necesito tiempo para estudiar (Finales de semestre), cuando me estabilice volveré a publicar nuevamente en el blog con la atención de siempre.

No hay comentarios:

Publicar un comentario