Costuras Css: Etiqueta cosida con semántica 2.3.12
Costuras Css: Etiqueta cosida con semántica
¿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
}
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
Muchas Gracias! Es excelente!!
ResponderEliminar