Blog and Web

Crear un degrado con CSS

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.