Tags o etiquetas puro Css 10.10.13

Tags o etiquetas puro Css

Unas cuantas de veces en este blog me he referido a la terminología y vocabulario empleado en Css. Y otras tantas he resaltado que hablado en propiedad no se pueden utilizar términos como "elemento", etiqueta o "tag" al referirnos ya sea a reglas, selectores, declaraciones, propiedades o valores Css. Y hasta dediqué un post a la diferencia entre tag y elemento en la terminología propia de Html.

Pues hoy tiro todo eso por la borda y te presento unas "tags Css". Sí, sin ruborizarme ni disculparme.

Pero no, no es lo que piensas ;-) Es sólo un pequeño juego Css. De esto que ves una imagen y comienzas a picar un poco de código Css sólo por "ver qué sale".

Y lo que salió, sin prestar mucha atención a detalles y optimizar nada fue lo que ves en la imagen de la derecha. Que no pensaba traerlo al blog. Creí que ni era interesante ni tenía nada reseñable.

Pero esta mañana me he encontrado que este divertimento lo han seleccionado en codepen.io para mostrarlo en portada, entre los "picks".

Así que me ha hecho reflexionar y quizás tenga algo que yo no he sabido ver y merezca la pena darle un poco más de difusión dedicándole una entrada.

Por lo tanto, por si fuese útil para alguien, aquí tienes estas etiquetas realizadas en puro Css:

See the Pen Tags by Kseso (@Kseso) on CodePen

Ver demo en Codepen

Los códigos

Cre que en esta ocasión no merecen dedicarle mucho tiempo a los códigos. En lo que respecta a los estilos verás que lo único reseñable sería la parte superior de cada etiqueta.

Los dos efectos visuales, la forma trapezoide y el agujero o vaciado circular.

El primero está conformado por el borde superior de la etiqueta y sobre él, conformando el trapecio, el borde inferior del pseudoelemento. Ambos con el mismo color.

El taladro es aún más sencillo. Un pseudoelemento con 'border-radius' al 50%, fondo del mismo color que el body y una pequeña sombra con valor 'inset' ligéramente descentrada.

Y nada más. Más largo de explicar someramente que de comprender, hacer o adaptarlo a tu proyecto si lo ves interesante o usable.

Kseso

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