soy Kseso y esto EsCSS

Enredando con Css: esquina plegada interactiva y headline triangular

Dos demos por falta de una. Una esquina plegada doblemente interactiva y un headline original todo en puro Css.

Enredando con Css: esquina plegada interactiva y headline triangular

·Por Kseso ✎ 1

Un encabezado un tanto particularLo que hoy te propongo es símplemente el resultado de enredar (en el sentido de jugar sin finalidad alguna y por lo general haciendo perder el tiempo a otros al hacerlos partícipes contra su voluntad en el juego) con un par de realizaciones de terceros.

El primer pasatiempos es el que puedes ver en la imagen adyacente: un encabezado o "headline" con un par de triángulos simétricos antes y después del texto. El segundo en base a una propuesta de Chris Coyier.

La idea de este tipo de encabezado la vi en un pen obra de Danny Librarian construido en base a pseudoelementos. Lo que no me terminó de convencer fue el hecho de que, mientras que su altura se adapta perfectamente bien a la longitud del título, en la realización original la anchura del encabezado es fija y todas las medidas principales están declaradas en em.

Estos pequeños detalles y la vistosidad y originalidad de la idea fue lo que me llevó a enredar un poco con la propuesta de Danny Librarian y ver qué resultaba.

Simple Heading Style versión Ksesocss

Antes de pasar a ver algún detalle de mi versión, la demo:

See the Pen Simple Heading Style. Changed a bit by Kseso (@Kseso) on CodePen.

Ver demo a full _ Descargar demo

Una pequeña explicación

Como verás, el encabezado básicamente consiste en un elemento contenedor header y el propio título, un h1,

En mi case study el "header" aporta los catetos de los triángulos con su borde en los cuatro lados. Y es el "h1" en que logra el efecto visual de crear los 2 triángulos. Las hipotenusas (tercer lado del triángulo) son sus bordes superior e inferior y la transformación transform: skew(0,-30deg);.

El triángulo superior se conforma "sólo". Es el inferior el que tenemos que forzar su aparición. Para ello sólo hay que declarar al "header" un padding-bottom de valor apropiado.

La altura de los triángulos (y por lo tanto el valor del paddign inferior del título) es función del ángulo declarado en la transformación.

Hecho lo anterior aún queda por tapar la parte de los bordes verticales de "header" que coinciden con los laterales del título con el fondo de éste. Para ello desplazamos el "h1" hacia fuera (valor negativo) la anchura del borde en dos lados y en los de enfrente aplicamos márgenes negativos:

left: -3.5px; margin-right: -6.5px; top: -4px; margin-bottom: -3.5px;

Como verás por la propia naturaleza de la realización todo son números mágicos que hay que ajustar para lograr el efecto buscado. Y si te preguntas la razón del medio píxel del código es forzado por Firefox que por momentos y según la anchura (al redimensionar la ventana) deja sin cubrir un px blanco el el lateral del h1. También se palía en parte un pequeño desajuste en el ensamble de la diagonal con el cateto mayor.

Esquina plegada interactiva

Hace unas fechas Chris Coyier planteaba vía Twitter este "pequeño reto" acompañado de un pen para "mejorar" su idea de lo que llamó bent corner

El pen de Chris Coyier:

See the Pen Alternate way to do page corner thing. by Chris Coyier (@chriscoyier) on CodePen.

Déjame que te resalte las dos particularidades buscadas:

  1. La esquina es interactiva por partida doble:
    1. Animada al hacer :hover sobre el texto "Read Article →". Aumenta la superficie plegada.
    2. Mantiene la funcionalidad: el enlace también funciona en ella
  2. El "recorte" que produce el doblez de la esquina en su caja debe ser transparente. Por eso el gradiente en el fondo.

Como ves en la demo, Chris Coyier resuelve estos requisitos con js. Sin embargo el método empleado tiene problemas con ie10 según manifiestan en sus respuestas muchos tuiteros.

Mi versión del pen no podía ser otra que prescindir del javascript y darle una oportunidad a Css. Y a fe que lo consigue, además de aportar otro pequeño detalle: la parte transparente del recorte de la esquina no es sensible al cursor. No hay respuesta al pasar sobre ella.

See the Pen Who needs js for "bent corners"? by Kseso (@Kseso) on CodePen.

Ver demo a full _ Descargar demo

La base son técnicas ya vista en otras demos del blog. El "Read Article →" está posicionado de forma estática para que no sirva de referencia al situar la esquina doblada, que es su pseudoelemento.

La esquina es el borde izquierdo del pseudoelemento del enlace "Read Article →". Con el borde superior transparente y anchura y altura puestas a cero, así como los otros dos bordes. En caso de situar en otra esquina de la caja blanca el pseudoelemento basta con cambiar el borde izquierdo y superior por los apropiados para que el corte mantenga la orientación correcta.

Al mismo tiempo, el contenedor general no tiene declarado fondo, lo aporta el pseudoelemento. Es su sombra (box-shadow) desplazada para que no tape el recorte y de color sólido y sin degradar (sin transparencia).

.read-article:before { content:''; position: absolute; right:0px;top:0px; width: 0px; height:0px; border-top: 40px solid transparent; border-left: 40px solid #cdcdcd; box-shadow: -100px -150px 0 50rem #fafafa; transition: .5s; }

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso