Top 10: Técnicas (ó hacks) CSS

0
1188

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

Safari resize not!!!

textarea }
resize: none;
}

2. Esquinas redondeadas

 Esquinas redondeadas

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

3. Transparencia

 Transparencia

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

4. Tooltips

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

 Borde Rollver inner

#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