Técnicas CSS. Parte 1

Éste es el primero de una serie de post dedicados a CSS, es decir hojas de estilos.

Técnica 1. Pequeña indicación.

Consiste en que al pasar el ratón sobre la palabra coloreada muestra un mensaje:

<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>
 
 
 Mi <a class="tooltip" href="#">consejo<span>No fume</span></a>.

Técnica 2. Elegir el color del texto seleccionado

El siguiente código nos va a permitir indicar el color de selección del texto mediante un valor hexadecimal.

::selection {
  background: #ffb7b7; /* Safari */
}

::-moz-selection {
  background: #ffb7b7; /* Firefox */
}

 

Fuentes:

http://www.catswhocode.com/blog/10-astonishing-css-hacks-and-techniques