Costuras Css: Etiqueta cosida con semántica

Costuras Css: Etiqueta cosida con semántica

Por Kseso ✎ 1

¿Conoces el dicho "no dar puntada sin hilo"? Pues esto va de todo lo contrario. Un elemento con su pespunte sin dar una sola puntada.
Mira el ejemplo:

Kseso de CSS

Los códigos:

<div class="costura">Kseso de CSS</div>

Y su css asociado, una clase y su :before

.costura { background:#fff; background-image:-moz-linear-gradient(top, #fff, #eee); background-image:-ms-linear-gradient(top, #fff, #eee); background-image:-o-linear-gradient( top, #fff, #eee); background-image:-webkit-linear-gradient(top, #fff, #eee); background-image:linear-gradient(top, #fff, #eee); border:1px solid #ddd; border-radius:10px; box-shadow:0 1px 0 #9a9a9a; text-align: center; font-size: 2.5em; line-height: 1; margin:0 0 10px; padding:7px; text-shadow:0 1px 1px #111; position:relative; z-index:0 } .costura:before { content:''; position:absolute; z-index:-1; border:1px dashed #ccc; border-radius:6px; top:4px; bottom:4px; left:4px; right:4px; box-shadow:0 0 0 1px #fff }

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: 1

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap