Top 10: Técnicas (ó hacks) CSS

El uso de CSS nos ayuda separa diseño de funcionalidad ó procesos, así podemos crear diversos diseños de presentación para nuestro sitio web sin alterar su estructura.

Sin embargo, existen algunos técnicas para darle algunos efectos a nuestra presentación. Veamos algunos:

1.  Deshabilitar cambiar tamaño de Textarea en Safari

textarea }
      resize: none;
}

2. Esquinas redondeadas

.rounded{
    -moz-border-radius: 5px; /* Firefox */
    -webkit-border-radius: 5px; /* Safari */
}

3. Transparencia

.transparent_class {
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;
}

4. Tooltips

<style type="text/css">
a:hover {
    background:#ffffff;
    text-decoration:none;} /*BG color is a must for IE6*/

a.tooltip span {
    display:none;
    padding:2px 3px;
    margin-left:8px;
    width:130px;
}

a.tooltip:hover span{
    display:inline;
    position:absolute;
    background:#ffffff;
    border:1px solid #cccccc;
    color:#6c6c6c;
}
</style>

Easy <a class="tooltip" href="#">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>.

5. Bordes Rollover internos

#example-one a img, #example-one a {
    border: none;
    overflow: hidden;
    float: left;
}

#example-one a:hover {
    border: 3px solid black;
}

#example-one a:hover img {
    margin: -3px;
}

Ver más en CatsWhoCode