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