Página personal de Miguel Ángel Santaella

Uso de colores, fondos y redondeos

Colores y redondeos

Ejemplo 1

Sombras

Ejemplo con inset
Ejemplo sin inset

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:

Imagen no cargada

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.

Incluir, imágenes de tipo bitmap y vectorial.