Juan Manuel 8 de mayo de 2008 a las 15.48
   Imprimir artículo
elWebmaster.com

Toolbox CSS: estilos para usar en cualquier sitio web


Toolbox CSS: estilos para usar en cualquier sitio webToolbox CSS es simplemente un conjunto de fragmentos de c√≥digo CSS que no est√° relacionado con ning√ļn sitio web en particular, para que puedas copiar y usar directamente en tus proyectos. La idea es que no escribas 1.000 veces la misma clase para una propiedad float.

Toolbox CSS es completamente libre, puedes hacer lo que quieras con √©l, modificarlo, usarlo como est√°, etc. Puedes usarlo como una segunda hoja de estilos “fija” o agregarlo a tu CSS principal.

El código completo de CSS Toolbox es este (gracias a Chris Coyier):

/*
         Toolbox CSS
	 Chris Coyier
	 http://css-tricks.com
*/
/*
	LAYOUT TOOLS
*/
.floatLeft 			{ float: left; }
.floatRight			{ float: right; }
.clear				{ clear: both; }
.layoutCenter			{ margin: 0 auto; }
.textCenter			{ text-align: center; }
.textRight			{ text-align: right; }
.textLeft			{ text-align: left; }
/*
	PRINT TOOLS
*/
.page-break 			{ page-break-before: always; }
/*
	TYPOGRAPHIC TOOLS
*/
.error				{ border: 1px solid #fb4343; padding: 3px; color: #fb4343; }
.warning			{ border: 1px solid #d4ac0a; padding: 3px; color: #d4ac0a; }
.success			{ border: 1px solid #149b0d; padding: 3px; color: #149b0d; }
.callOut			{ font-size: 125%; font-weight: bold; }
.strikeOut			{ text-decoration: line-through; }
.underline			{ text-decoration: underline; }
.resetTypeStyle			{ font-weight: normal; font-style: normal; font-size: 100%;
					  text-decoration: none; background-color: none; word-spacing: normal;
					  letter-spacing: 0px; text-transform: none; text-indent: 0px; }
/*
	STYLING EXTRAS
*/
a[href^="mailto"]		{ background: url(images/emailIcon.png) left center no-repeat; padding-left: 10px; }
a[href~=".pdf]			{ background: url(images/pdfIcon.png) left center no-repeat; padding-left: 10px; }
a.button			{ color: black; border: 1px solid black; padding: 3px; }
	a.button:hover		{ background: black; color: white; }
.transpBlack			{ background: url(images/transpBlack.png); }
/*
	DISPLAY VALUES
*/
.hide				{ display: none; }
.show				{ display: block; }
.invisible			{ visibility: hidden; }

Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder