English Português

Esta es una técnica sencilla pero ingeniosa, se consigue utilizando un color de fondo y una imagen con degradado blanco a transparente. Te explicamos a continuación:

  1. Creamos una clase que con el color de fondo que deseamos y una imagen con degradado de la siguiente forma:
  2. #degradado {
    /*ponemos las dimensiones del área de degradado*/
    width:150px;
    height:150px;
    /*Nos resuelve el problema de visualización del degradado en internet explorer, solo tienes que cambiar la ruta de tu imagen*/
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='degradado.png');
    }
    
    /* Esta clase la creamos para que firefox ignore la corección de visualizacion del IE. */
    .degradado[class] {
    /*Sigue la parte importante, seleccionamos la ubicación de nuestra imagen, su posición y como queremos se repita.*/
    background:url(degradado.png) top left repeat-x;
    }
  3. Ahora sólo otorgas la clase “degradado” y selecciona el color de fondo, por ejemplo:
  4. <div class="degradado" style="background-color: #33CCFF;" >
    <p>Este texto tendra un degradado de fondo</p>
    </div>

    El resultado es algo como sigue:

    Este texto tiene un degradado de fondo

    Este texto tiene un degradado de fondo

    Este texto tiene un degradado de fondo

De acuerdo al degradado de tu imagen será el resultado en el fondo, en un ZIP te damos 2 diferentes degradados y el ejemplo que te acabamos de presentar. Recuerda que de acuerdo al tamaño del fondo que necesites será la imagen. Esperamos que te sirva. CLICK AQUÍ PARA DESCARGAR.

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. fatima / Hace 10 años /

      hola francisco como pondria el degradado en blogger
      unas presiciones porfa amor gracias

      Responder a fatima →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad