Fondo gradiente en Blogger con CSS3

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.

Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Cómo obtener la primera imagen del post en Blogger sin Javascript # - Cómo obtener la primera imagen del post en Blogger sin Javascript
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Ocultar entradas con determinada etiqueta en el inicio de Blogger # - Ocultar entradas con determinada etiqueta en el inicio de Blogger
Personalizar las plantillas "Vistas dinámicas" en Blogger # - Personalizar las plantillas "Vistas dinámicas" en Blogger