Los fragmentos de CSS son una excelente manera de ahorrar tiempo mientras desarrollas CSS en tu sitio. Si te encuentras usando con frecuencia el mismo conjunto de CSS, probablemente sea una buena idea guardarlos en alguna especie de biblioteca de fragmentos. Si aún no tienes una biblioteca de fragmentos de CSS, aquí hay algunos para empezar tu colección:
- Esquinas Redondeadas:
Estándar:
-
- -moz-border-radius: 10px;
- -WebKit-border-radius: 10px;
- border-radius: 10px; /* a prueba de futuro */
- -khtml-border-radius: 10px; /* para navegadores antiguos de Konqueror */
Esquinas Individuales:
-
- -moz-border-radius-topleft: 10px;
- -moz-border-radius-topright: 20px;
- -moz-border-radius-bottomright: 30px;
- -moz-border-radius-bottomleft: 0;
- -webkit-border-top-left-radius: 10px;
- -webkit-border-top-right-radius: 20px;
- -webkit-border-bottom-right-radius: 30px;
- -webkit-border-bottom-left-radius: 0;
- Sombras de Caja
.shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;}
- Sombras de Texto:
- p { text-shadow: 1px 1px 1px #000; }
Sombras Múltiples:
-
- p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }
- Rotación de Texto:
.rotate {
Safari
-webkit-transform: rotate(-90deg);
Firefox
-moz-transform: rotate(-90deg);
Internet Explorer
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
- HTML SNIPPIT BONO Hacer que IE6 se Bloquee (mi favorito, aunque aún no lo he usado):
- <style>*{position:relative}</style><table><input></table>
¿Cuáles son algunos de tus fragmentos de CSS favoritos? ¡Siéntete libre de compartir!
Claro, aquí tienes las palabras clave:
