Bordes Doblados Flat – LESS mixin

8/oct/2014 1

El siguiente es un mixin para LESS que creé que genera el efecto de bordes doblados dado un elemento HTML y con colores sólidos asociados.

Uso:

.flatCornerFold(@foldSize,color,bgcolor,direction,intensity);
  • foldSize: tamaño del doblez en forma de triángulo.
  • color: HEX para doblez (más claro) y sombra (más oscuro).
  • bgcolor: HEX para el fondo del triángulo; debería ser el mismo del fondo de la página (body) para dar el efecto de transparencia.
  • direction: valores: bottomright (por defecto) | topright | topleft | bottomleft.
  • intensity: opacidad (0% ~ 100%) del efecto del doblez.

Ejemplo:

@color: #ecf0f1;
@bgcolor: #ecf0f1;
@foldSize: 3rem;
selector {
    .flatCornerFold(@foldSize,@color,@bgcolor,bottomright,25%);
}

Ejemplo Avanzado:

selector {
    .flatCornerFold(1rem,#ecf0f1,#ecf0f1,bottomright,25%);
}
selector:after,
    selector:before {
        transition: .3s;
    }
selector:hover {
    .flatCornerFold(3rem,#ecf0f1,#ecf0f1,bottomright,25%);
}

Ver en GitHub

Comentarios

  1. RamndRall JimRaénez [#]

    Muchas gracias por compartir tu conocimiento, es increible lo que haces con las páginas, soy de pensar de que todo entra por los ojos, si el aspecto es tan llamativo, vistoso o armonioso a la vista de nosotros es casi un hecho de que le daremos clic para ver el resto. sos un profecional.
    Estoy apenas aprendiendo todavía no he hecho una página web, pero con estos ejemplos por lo menos trataré de aproximarme un poquito a lo tuyo.

    mil gracias desde Costa Rica, hermano

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab