hacks-css

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

rounded1

<div id="container">
<b class="rtop">
</b><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>

<!--content goes here -->
<b class="rbottom">
</b><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></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

order

<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

<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

double

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.

gradient

<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;
}

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

< !&#91;endif&#93;-->

6. Centrar verticalemente con line-height

Si deseamos centrar horizontalmente podemos usar este ejemplo.

verticalcenter

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.

rounded2

<div class="roundcont">
<div class="roundtop">

</div>

Contenido
<div class="roundbottom">

</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.


.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