Propiedad text-shadow

La propiedad text-shadow, permite dar sombra a un determinado texto. Esta sombra se puede modificar en cuanto a posición, nitidez y color. Usar esta etiqueta es muy eficiente estéticamente y además es algo muy moderno.

Sintaxis

En esta propiedad, se pueden poner de 2 a 4 valores: Posición eje X, Posición eje Y, Nitidéz y Color.
Así usamos text-shadow con todos sus valores:

text-shadow: 1px 1px 3px #FF0400;

El primer valor se posiciona de modo horizontal. Y si pones el signo menos (-) la sombra se correrá hacia la izquierda.
El segundo valor hace que la sombra se posicione verticalmente. Si precede un signo menos a este valor, la sombra se irá hacia arriba.
El tercer valor hace que la sombra tenga una especie de "esfumado" o le quita nitidez al aumentar el valor. Este valor es opcional.
El cuarto valor hace que le de color a la sombra. Este valor es opcional.
Así usamos text-shadow en CSS:

<style>
span{
text-shadow:1px 1px 3px #FF0400;
}
</style>

Así usamos text-shadow en HTML:

<span style="text-shadow:1px 1px 3px #FF0400;">

Ejemplos

Ejemplo de texto con sombra nítida

<span style="text-shadow:1px 1px #FF0400;">Ejemplo de texto con sombra nítida</span>

Ejemplo de texto con sombra esfumado menor

<span style="text-shadow:1px 1px 1px #FF0400;">Ejemplo de texto con sombra esfumado menor</span>

Ejemplo de texto con sombra esfumado medio

<span style="text-shadow:1px 1px 3px #FF0400;">Ejemplo de texto con sombra esfumado medio</span>

Ejemplo de texto con sombra esfumado mayor

<span style="text-shadow:1px 1px 6px #FF0400;">Ejemplo de texto con sombra esfumado mayor</span>

Ejemplo de texto con sombra nítida sin color

<span style="text-shadow:1px 1px;">Ejemplo de texto con sombra nítida sin color</span>

Los colores que se ponen al final del valor de la propiedad pueden ser establecidos como Colores Hexagecimal, RGB o con el nombre.
Para tener una lista de colores y saber cómo se usa, haz click aquí.

Propiedad color

Con la propiedad color establecemos el color de letra de algún elemento. Aunque suene muy obvio, la propiedad color, se escribe como tal: color.
¿Cómo obtener un color determinado?
Lo más dificil de explicar es cómo obtener un color preciso. Para empezar, hay tres formas de definir los colores en la internet: Con los valores Hexadecimales, con los valores RGB y con el nombre del color (en inglés).

¿Qué significa hexadecimal?

El código hexadecimal es una manera de definir un determinado color en una planilla de estilo. El código siempre está compuesto por seis dígitos (de ahí hexa-) que puede adoptar números del 0-9 y también letras de la A-F. Además siempre adelante habrá un numeral (#).
Ejemplo: #FFA500

¿Qué significa Valor RGB?

Principalmente RGB significa Red Green y Blue: Rojo Verde y Azul. Para entenderlo más sencillamente, estos tres colores se mezclan para formar muchos más. El valor máximo que puede tener uno de los tres colores es 255.
Si prestamos atención, la partícula sigue su orden "RGB", por ejemplo:
color: rgb(255, 0, 0); = Hola
color: rgb(o, 255, 0); = Hola
color: rgb(o, 0, 255); = Hola
Entonces si aumentamos más algún color de los tres (Rojo, Verde y azul) más se va a parecer a este. Si mezclamos el azul y el rojo vamos a obtener violeta:
color: rgb(255, 0, 255); = Violeta

Nombres de colores y sus respectivos códigos

Nombre	Color	Código Hexadecimal	Código RGB
red	rojo	#FF0000	rgb(255, 0, 0)
blue	azul	#0000FF	rgb(0, 0, 255)
yellow	amarillo	#FFFF00	rgb(255, 255, 0)
orange	Naranja	#FFA500	rgb(255, 165, 0)
green	Verde	#008000	rgb(0, 128, 0)
purple	Morado	#800080	rgb(128, 0, 128)
chocolate	Chocolate	#D2691E	rgb(210, 105, 30)
brown	Marrón	#A52A2A	rgb(165, 42, 42)
maroon	Granate	#800000	rgb(128, 0, 0)
salmon	Salmón	#FA8072	rgb(250, 128, 114)
olivedrab	Verde olivo	#6B8E23	rgb(107, 142, 35)
fuchsia/magenta	Fuccia	#FF00FF	rgb(255, 0, 255)
skyblue	Celeste	#87CEEB	rgb(135, 206, 235)
gold	Dorado	#FFD700	rgb(255, 215, 0)
violet	Violeta	#EE82EE	rgb(238, 130, 238)
silver	Plateado	#C0C0C0	rgb(192, 192, 192)
gray	Gris	#808080	rgb(128, 128, 128)
black	Negro	#000000	rgb(0, 0, 0)
white	Blanco	#FFFFFF	rgb(255, 255, 255)

Para ver una lista completa de nombres de colores Click aquí.

Utilización/Sintáxis

Para aplicar un color, copiamos el valor hexagecimal, rgb o el nombre del dicho color y lo pegamos como un valor de la propiedad color.
Ejemplo utilizando color en CSS:
<style>
span {
color:#008000;
}
</style>
Propiedad: En este caso la propiedad que modifica al objeto (span) es color.
Valor: Aquí es donde va el nombre de un color, ejemplo red; el código hexagecimal, ejemplo #FF0000; o el código rgb, ejemplo rgb(255, 0, 0).

Usando "color" en HTML	Usando "color" en CSS
<span ></span>	span { color:#008000; }
<span style="color: rgb(0, 128, 0);"></span>	span { color:rgb(0, 128, 0); }
<span ></span>	span { color:green; }

Propiedad border

Esta propiedad permite asignar un borde y establecer su grosor, tipo de borde y color. Para entender qué es precisamente esto, principalmente es una propiedad que se puede usar en códigos CSS y en códigos HTML siempre y cuando lo agregues dentro del atributo style. Por ejemplo:

Usando "border" en HTML	Usando "border" en CSS
<p style="border: 1px solid #2F2F2F;"></p>	p { border: 1px solid #2F2F2F; }

Hay varios tipos de bordes que se pueden cambiar y cada uno tiene una trama distinta. Para cambiar de borde, reemplaza uno de los siguiente tipos de borde por el que está en el ejemplo (solid): inset, outset, double, solid, none, dotted, dashed, groove, ridge.

Tipo de borde	Ejemplo de borde	Código
inset	Inset	<span style="margin: 2px; padding: 2px; border: 3px inset rgb(0, 0, 0);">Inset</span>
outset	Outset	<span style="margin: 2px; padding: 2px; border: 3px outset rgb(0, 0, 0);">Outset</span>
double	Double	<span style="margin: 2px; padding: 2px; border: 3px double rgb(0, 0, 0);">Double</span>
solid	Solid	<span style="margin: 2px; padding: 2px; border: 3px solid rgb(0, 0, 0);">Solid</span>
none	No implementa un borde, es nulo.
dotted	Dotted	<span style="margin: 2px; padding: 2px; border: 3px dotted rgb(0, 0, 0);">Dotted</span>
dashed	Dashed	<span style="margin: 2px; padding: 2px; border: 3px dashed rgb(0, 0, 0);">Dashed</span>
groove	Groove	<span style="margin: 2px; padding: 2px; border: 3px groove rgb(0, 0, 0);">Groove</span>
ridge	Ridge	<span style="margin: 2px; padding: 2px; border: 3px ridge rgb(0, 0, 0);">Ridge</span>

Partes de la propiedad

border: 1px solid #2F2F2F;

Lo que esta marcado en rojo, es el grosor del borde.
Lo que esta marcado en verde es el tipo de borde. Puedes cambiarlo por uno de los mencionados en el cuadro.
Y lo que esta marcado en azul es opcional y establece el color del borde.
Utilización
Esta propiedad como vimos se puede usar tanto para HTML como para CSS. Y también se puede implementar en cualquier etiqueta que esté relacionado con imágenes, textos y cuadros.