box-shadow

Soportada por prácticamente todos los navegadores, aplica una sombra al elemento sobre el que se establece esta propiedad.
box-shadow: [eje-x] [eje-y] [radio] [color];
Recibe cuatro parámetros que determinan la sombra:
  • Posición en el eje X
  • Posición en el eje Y
  • Radio de la sombra
  • Color
Un ejemplo podría ser:
box-shadow: 2px 2px 15px #252525;
Que aplicado a una imagen daría el siguiente resultado:

Además, podemos establecer varias sombras para un mismo elemento, lo que nos permite crear un gran número de efectos diferentes, por ejemplo:
box-shadow: 14px 14px 16px #67C3E6, -4px -4px 6px #FEF9BF;

text-shadow

Soportada también por la mayoría de navegadores sin necesidad de usar prefijos, es muy similar a box-shadow, usando la misma sintaxis, pero aplicada a un texto:
text-shadow: [eje-x] [eje-y] [radio] [color];
Y acepta los mismos parámetros:
  • Posición en el eje X
  • Posición en el eje Y
  • Radio de la sombra
  • Color
Por ejemplo:
text-shadow: 2px 2px 3px #67C3E6;
Propiedad de CSS text-shadow
Esta propiedad es muy útil si, por ejemplo, queremos hacer un contorno al texto combinando varias sombras:
text-shadow: 0 1px 0 #67C3E6, 0 -1px 0 #67C3E6, 1px 0 0 #67C3E6, -1px 0 0 #67C3E6;
Propiedad de CSS múltiple text-shadow

transition

Posiblemente una de las mejores funcionalidades que se añadieron en CSS3. Esta propiedad nos permite, según la especificación de la W3C, cambiar los valores de CSS de manera progresiva durante un tiempo determinado.
Su sintaxis es la siguiente:
transition: [propiedad-css] [tiempo] [curva-tiempo] [retardo];
Donde:
  • Propiedad CSS: nombre o nombres de propiedades CSS a las que se aplicarán la transición. Podemos utilizar ‘all‘ para indicar que se aplique a todas las propiedades compatibles.
  • Tiempo: duración de la transición, en segundos.
  • Curva de tiempo: curva cúbica bézier, que determina la velocidad de la animación en cada momento. Aunque podemos establecer una curva personalizada, también disponemos de las siguientes, ya establecidas: linear, ease, ease-in, ease-out y ease-in-out.
Un ejemplo podría ser:
transition: all 1s ease-out;

gradient

Otra de las características que incorpora CSS3 es la creación gradientes, tanto lineales como circulares, a través de sus funciones linear-gradient y radial-gradient.
La sintaxis de los lineales es:
linear-gradient([dirección], [color-1], [color-2]...);
Donde:
  • Dirección: orientación del gradiente. Se pueden usar ángulos (360deg, 180deg) o palabras clave (to top, to top left, to bottom…).
  • Colores: podemos establecer, como mínimo, dos colores al gradiente.
Para aplicar un gradiente como fondo a un div podríamos usar:
background: linear-gradient(to top left, #67C3E6, #FEF9BF);
CSS gradiente lineal
La sintaxis de los circulares es:
radial-gradient([forma] [tamaño] at [posicion], [color-1], [color-2]...);
Donde:
  • Forma: círculo (circle) o elipse (ellipse).
  • Tamaño: podemos indicar un tamaño específico (en píxeles, porcentaje,…) o usar algunos ya definidos como, por ejemplo, closest-corner, que cubre hasta la esquina más próxima.
  • Posición: su valor por defecto es center. Establece la posición del gradiente, de manera similar a background-position.
  • Colores: colores que formarán el gradiente.
Un ejemplo sería:
background: radial-gradient(#FEF9BF, #67C3E6);
CSS gradiente radial

@font-face o @import

Otra de las características más usadas, ya que nos permite definir e importar cualquier tipografía para usarla en nuestro sitio web.
La sintaxis de @font-face es:
@font-face {
    font-family: [nombre];
    src: url([direccion]);
}
Una vez importada, podremos usarla en cualquier elemento:
h1 {
    font-family: [nombre];
}
Para importar fuentes con @import el procedimiento es similar:
@import url([direccion]);
Cabe destacar que las tipografías pueden estar almacenadas en el propio servidor de la página, o en otros externos, como en Google Fonts, que nos ofrece una amplia colección de fuentes compatibles con todos los navegadores.

Media Queries

Con el auge de los dispositivos móviles y tablets en los últimos años, los desarrolladores web se han visto obligados a adaptar sus páginas web a cualquier resolución de pantalla. De esa problemática surge una nueva técnica, conocida como media queries.
La regla @media nos permite especificar cierto tipo de propiedades a elementos en función de diversas características del dispositivo desde el que se accede a la página, como las dimensiones, orientación o resolución.
Por ejemplo, para establecer propiedades que se cumplirán solo cuando la pantalla del dispositivo esté en horizontal y tenga un ancho de menos de 700px.
@media (min-width: 700px) and (orientation: landscape) {
    img {
        width: 700px;
    }
}