Uso de colores, fondos y redondeos
Sombras
CSS: box-shadow: inset 10px 10px 0px 10px rgba(0,0,0,0.4);
Da igual poner el color el primero o el último.
inset: si lo añadimos creará la sombra hacia dentro
Movimiento horizontal de la sombra. Valor 0 estará centrada (misma izquierda que derecha)
Movimiento vertical de la sombra. Valor 0 estará centrada (misma arriba que abajo)
Difuminado: grado de dispersión lo cual hace crecer el borde.
Escalado: expande la sombra. De no especificarse (0px) tendrá el mismo tamaño de la caja.
Distintos modos de utilizar Fonts
Enlazar desde Google Fonts
Añadir en la etiqueta <head> el siguiente enlace:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Añadir al css el siguiente código:
font-family: 'Roboto', sans-serif;
Este párrafo posee texto de fuente Roboto.
Descargar una fuente e importarla
Primero descargamos la fuente en cualquiera de los siguientes formatos:
Añadir el siguiente código CSS para enlazar el fichero
@font-face {
font-family: "FiraMono";
font-style: normal;
font-weight: 300;
src: url(FiraMono-Regular.otf) format("opentype");
}
Utilizar la fuente importada:
font-family: FiraMono, 'Caesar Dressing';
Este párrafo posee texto de fuente Fira.
Nota: Recuerda que al especificar más de una fuente, si la primera no se puede utilizar lo intentará con la siguiente.
Otro ejemplo de fuente de google
Añadir en la etiqueta <head> el siguiente enlace:
<link href='http://fonts.googleapis.com/css?family=Caesar+Dressing' rel='stylesheet' type='text/css'>
Añadir al css el siguiente código:
font-family: 'Caesar Dressing', cursive;
Este párrafo posee texto de fuente Caesar.
Multimedia
Video en server
Mi cuenta gratuita en Neocities no me permite subir videos, por lo que no puedo ponerla en práctica.
La estructura sería la siguiente:
<video src="#"> Tu navegador no soporta el elemento vídeo </video>
Video en YouTube
Nota:
Para añadir el video componer la url: https://www.youtube.com/embed/ID donde el ID se extrae de la URL donde está el video, por ejemplo:
https://www.youtube.com/watch?v=X9mGQU7rGGM.