'@smashingmag zick/zack challenge. Versión EsCss

La propuesta de EsCss para Smashing Magazine zick/zack challenge

'@smashingmag zick/zack challenge. Versión EsCss

Por Kseso ✎ 0
@smashingmag zick/zack challenge. Versión EsCss

Esta mañana apareció en mi TL de Twitter un tuit de @smashingmag con un "juego" que captó mi interés como a otros muchos usuarios de esa red.

En él retaba a sus seguidores a reproducir con Css el efecto sesgado del fondo en cada una de las líneas de un párrafo. Puedes ver la imagen un poco más abajo.

¿Tengo que recordaete que soy un enredique de CSS? Pues eso, que no pude dejar resistir la tentación y me puse a darle un par de vueltas a cómo lograrlo.

box-decoration-break: clone;
background-image: linear-gradient

La solución es sencilla para quienes seguís este blog. En otros artículos y demos ya la he usado. Todo pasa por la vieja conocida box-decoration-break y el valor que obra la magia clone.

Con ella controlamos cómo se comportan una serie de propiedades en un elemento que se distribuye en varias líneas o páginas. Como los bordes o fondos.

Lo siguiente fue descartar el uso del borde en beneficio del fondo o background y por las características del ejemplo usar un gradiente Css aplicado con el ángulo oportuno.

Una consulta y dos prueba/fallo dieron como resultado la siguiente solución al juego planteado por @smashingmag.

Demo que seguro alguno de quienes os contáis entre mis seguidores de Twitter ya visteis esta mañana.

Enjoy Css!

See the Pen Smashing Magazine front-end challenge by Kseso (@Kseso) on CodePen.

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 Don Kseso Kseso

Comentarios: 0

EsCss RSS del Blog RSSS Comentarios ᛯ Licencia Beerware Humans.txt ᛯ Diseño por Kseso SiteMap