CSS3 06 Gradientes

CSS3 06 Gradientes

Otra funcionalidad que se echaba mucho de menos en versiones anteriores de CSS era la de utilizar fondos con gradientes, o lo que es lo mismo, un color inicial que se transforma poco a poco en uno o varios colores sucesivamente. Sin embargo, en versiones anteriores a CSS3 no era posible hacerlo desde código.

En CSS3 se introducen algunas expresiones relacionadas que harán esta tarea algo muy sencillo, pudiendo utilizarlas fácilmente con la propiedad background-image.

Gradientes lineales

El primer tipo de gradiente es el gradiente lineal, que permite crear fondos con los colores gradientes indicados y una cierta dirección definida:

div {
    background-image: linear-gradient([dirección], [color1], [color2], ...)
}

CSS3 09 Textos y alineaciones

 CSS3 09 Textos y alineaciones

CSS también dispone de ciertas propiedades relacionadas con el texto con objetivos de alineación o tratamiento de espaciados. Veamos algunas de ellas:

CSS3 08 Fuentes y Tipografias

 CSS3 08 Fuentes y Tipografías

Las fuentes (tipografías) también tienen cabida dentro del mundo del CSS. De hecho, son uno de los pilares más importantes del diseño web. La elección de una tipografía adecuada, su tamaño, color, espacio entre letras, interlineado y otras características pueden cambiar, de forma consciente o inconsciente, la forma en la que una persona interpreta o accede a los contenidos de una página web.

Detalles de una tipografía

Existen multitud de características en las tipografías que convendría conocer antes de continuar, por lo que vamos a ver algunas de ellas:

Serifa: Las fuentes o tipografías que utilizan serifa o gracia, son aquellas que incorporan unos pequeños adornos o remates en los extremos de los bordes de las letras. Muchas de estas tipografías suelen terminar en «Serif» (con serifa).

CSS3 07 Tipos de Elementos

 CSS3 07 Tipos de Elementos

Cada etiqueta HTML tiene una representación visual en un navegador, lo que habitualmente se suele denominar el tipo de caja. En principio, se parte de dos tipos básicos:

Obsérvese que por defecto, todos los elementos <div> son elementos de bloque (block) y todos los elementos <span> son elementos en línea (inline). Para entender esto facilmente, vamos a crear un HTML con 3 etiquetas <div> como las siguientes:

CSS3 05 Fondos

 CSS3 05 Fondos

Imágenes de fondo

Si no quieres un color plano de fondo, sino que prefieres utilizar una imagen, puedes utilizar la propiedad background imageimage. En el valor, se introducirá el nombre de la imagen o la dirección donde está alojada, siempre rodeado del texto url().

En el caso de que sólo se coloque el nombre de la imagen (por ejemplo, imagen.jpg), el navegador buscará la imagen en la misma carpeta donde está el archivo CSS. Esto es lo que se llama ruta relativa. En el caso de que se coloque la ruta completa, por ejemplo https://miurl.com/img/logo.png, se accederá a la imagen alojada en esa dirección. 

Esto es lo que se llama ruta absoluta.

    

CSS3 04 Bordes

 CSS3 04 Bordes

En CSS es posible especificar las propiedades que tendrán los bordes de cualquier elemento, pudiendo incluso, dar valores distintos a las diferentes zonas predeterminadas del elemento (zona superior, izquierda, derecha o zona inferior).

Las propiedades básicas existentes de los bordes en CSS son las siguientes:

En primer lugar, border-color establece el color del borde, de la misma forma que lo hicimos en apartados anteriores de colores. En segundo lugar, con border-width podemos establecer la anchura o grosor del borde utilizando tanto palabras clave predefinidas como un tamaño concreto con cualquier tipo de las unidades ya vistas.