Trucos Css muy básicos para texto.

Hola de nuevo. Vuelvo a la carga con algo que os puede interesar si estáis empezando con el diseño web. He creado una recopilación de efectos en CSS muy fáciles de aplicar y con un resultado mas que interesante. Podéis consultar mis anteriores post donde explico como usar el CSS para mejorar el aspecto de tu web o blog; como este o este. Y sin mas presentaciones empezamos:


Css para enlaces.

Con la propiedad a:hover podemos darle estilo a nuestros links, a continuación os dejo unos cuantos ejemplos para que practiquéis en vuestra web. Podéis ver ejemplos en mi web de pruebas, os dejaré enlaces después de cada uno.

A) Al hacer hover, el enlace cambia su color de fondo.

a { text-decoration: none; padding: 1px 3px; }
a:hover { background: #ccc; }

B) Al pasar el puntero por encima, el enlace cambia a cursiva, a negritas y cambia de color,

a {
text-decoration: none;
color: #FFBE62;
}
a:hover { font-style: italic;
font-weight: bold;   
color: #EEBFA8;
}


C) Enlace que aparece en una caja redondeada con color de fondo, este personalmente me encanta..

a { text-decoration: none; border-radius: 10px; padding: 2px 5px 5px 5px; }
a:hover { background: #ccc; }
Podéis ver un ejemplo de estos tres ejemplos anteriores en este enlace.

D) Enlaces que muestran el destino a la derecha.

a { text-decoration: none; }
a:hover:after { content: " (" attr(href) ") "; }
/* Donde href es la dirección a la que señala el enlace */ 


E) Con este código los enlaces cambia de color y de fondo con una transición. Usando la propiedad transition de CSS3, observad que hay que poner las tres versiones para que se muestre correctamente en los navegadores mas populares.

a {
text-decoration:none;
background: #1f110e;
padding: 1px 3px;
 -webkit-transition: color .4s linear;
 -moz-transition: color .4s linear;
 -ms-transition: color .4s linear; -o-transition: color .4s linear; transition: color .4s linear; }

a:hover { background: #e06c1f; color: white; webkit-transition: color .4s linear; -moz-transition: color .4s linear; -ms-transition: color .4s linear; -o-transition: color .4s linear; transition: color .4s linear; }

Ved un ejemplo en mi web de pruebas. He añadido al final un ejemplo uniendo E) y C). Nada mal ¿verdad?

Propiedad text-shadow de Css.

Con esta propiedad podemos darle estilo a nuestros títulos dándoles otro aire.
La sintaxis de la propiedad es la siguiente:

Text-shadow    0px 0px 0px #FFF

/* X-Ofsset: Define si la sombra se muestra a la derecha, (valor positivo), o se muestra izquierda, (valor negativo). */
/*   Y-Ofsset: Define si la sombra se muestra abajo (valor positivo), o se muestra arriba, (valor negativo).          */
/*   Tamaño: El tamaño de la sombra.                          */                                                                         
/*   Color: Color de la sombra                                      */

Ahora vemos dos ejemplos, el primero con la sombra en oscuro ligeramente separada del texto (1) y otra con la sombra en claro mas cerca del texto dándole un cierto efecto 3d (2).

/* sombra1 */
color: #666;
text-shadow: 0px 3px 0px #ccc;

/* sombra2 */
color: #999;
text-shadow: 0px 10px 8px #2a2a2a;


En estos dos ejemplos vemos las letras brillas con un efecto reflector; las primeras con el relleno del texto igual a la sombra/brillo con fondo obscuro (3), y las segundas con la sombra/brillo y el relleno de las letras del mismo color que el fondo (4), dando al texto un efecto mas espectacular, aunque ya veis que es muy sencillo.

/* sombra 3 */

color: #EEE;
text-shadow: 0px 0px 7px #FFF;

/* sombra 4 */
color: #999;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
background:#000;