CSSBlog ES - /* El mejor recurso para enriquecer tu estilo */

CSS es un mundo en el que cada día se aprenden cosas nuevas. No hace mucho os mostrábamos una lista de 10 de los mejores hacks para CSS, pero hemos querido ir más allá y ahora os mostramos los trucos para CSS que más personas usan. Empezemos con el listado:

1. Bordes redondeados sin imágenes

<div id="container">
<b class="rtop">
<b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<!--content goes here -->
<b class="rbottom">
<b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div>

.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

Podemos ver más técnicas de bordes redondeados.

2. Estilizar tus listas

<ol>
<li>

Línea 1
</li>
<li>

Línea 2
</li>
<li>

Última línea.
</li>
</ol>

ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}

ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}

3. Tableless Forms

Transformar un form convencional en uno separado por columnas invisibles.

<form>
<label for="name">Name</label>
<input id="name" name="name"><br>
<label for="address">Address</label>
<input id="address" name="address"><br>
<label for="city">City</label>
<input id="city" name="city"><br>
</form>

label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}

label {
text-align: right;
width: 75px;
padding-right: 20px;
}

br {
clear: left;
}

4. Doble cita

blockquote:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}

5. Efecto texto degradado.

Aconsejamos mirar esta entrada antes para entender mejor dicho truco.

<h1><span></span>CSS Gradient Text</h1>

h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

<!--[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>

<![endif]-->

6. Centrar verticalemente con line-height

Si deseamos centrar horizontalmente podemos usar este ejemplo.

div{
height:100px;
}
div *{
margin:0;
}
div p{
line-height:100px;
}

7. Bordes redondeados con imágenes

Podemos ver muchos más métodos para crear bordes además de este.

<div class="roundcont">
<div class="roundtop">
<img src="tl.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>

Contenido
<div class="roundbottom">
<img src="bl.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>
</div>

.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}

.roundcont p {
margin: 0 10px;
}

.roundtop {
background: url(tr.gif) no-repeat top right;
}

.roundbottom {
background: url(br.gif) no-repeat top right;
}

img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}

8. Múltiples clases

Si no sabes lo que es class, puedes mirar esta guía acerca de las class.

<img src="image.gif" class="class1 class2" alt="" />

.class1 { border:2px solid #666; }
.class2 {
padding:2px;
background:#ff0;
}

9. Centrar horizontalmente: Centrar horizontalmente usando CSS

10. Crear letras capitales con CSS: Letra capitalizada.

11. Prevenir salto de línea en enlaces

a{
white-space:nowrap;
}

#main{
overflow:hidden;
}

12. Mostrar barra de scroll en Firefox, eliminar barra de scroll en textarea con CSS

Para este truco aconsejamos mirar la guía sobre la propiedad overflow.

html{
overflow:-moz-scrollbars-vertical;
}

textarea{
overflow:auto;
}

Vía | StylizedWeb