Bordes Doblados Flat – LESS mixin

8/oct/2014 2

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

  2. Xavier [#]

    Hola que tal, me gusta tu pagina, el contenido es muy bueno he logrado avanzar en el css lo que es muy bueno he visto propiedades con las que no habia trabajado antes y me ha servido de mucho ya qe la explicación y los ejemplos son muy buenos y claros ya pronto brincare a JS para obtener mejores rsultados en mis proyectos muchas gracias ..Saludos.

Deja tu Comentario

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

CSSLab