Doble Dots en puro Css. Un juego

Un juego Css para lograr dots dobles ◉ en puro Css sin recurrir a caracteres de texto.

Doble Dots en puro Css. Un juego

Por Kseso ✎ 0

Los dots o puntos en sus distintas versiones como los sencillos: pequeño y relleno •, pequeño y vacío ◦, grande con relleno ● y grande vacío ○; y los dobles ◉ y ◎ son un recurso empleado en muchas ocasiones.

Doble Dots en puro Css. Un juego

La mayoría de las veces como caracteres textuales en el html (o con sus entidades) y otras veces vía css mediante la propiedad 'content' codificados.

Pero hay otras formas de lograrlos con Css sin recurrir a esos caracteres. Y de esto va el artículo. De lograr los double dots en puro Css como en la imagen superior. Un juego Css que quizás lo encuentres práctico o que quizás sólo quede en eso, juegos.

Doble dot puro Css

See the Pen Doble Dots puro Css by Kseso (@Kseso) on CodePen

Si no carga el pen aquí tienes la demo a pantalla completa:
Ver Demo

En esta ocasión como los códigos implicados directamente (el pseudoelemento :after y la propiedad box-shadow) son sencillos y ya hemos hablado muchas veces en el blog no los desmenuzo. Los puedes ver en la pestaña 'css' del pen anterior.

Pero por si tienes alguna duda sobre la sombra hace un tiempo le dediqué el artículo "Box-shadow Css: La sombra a fondo"

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