Juan Barrós Pazos: Css3

Mostrando entradas con la etiqueta Css3. Mostrar todas las entradas

jueves, 2 de febrero de 2023

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], ...)
}

sábado, 17 de diciembre de 2022

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:

lunes, 5 de diciembre de 2022

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.

CSS3 03 Modelo de Cajas

CSS3 03 Modelo de Cajas

Durante varios años, el denominado modelo de cajas fue una pesadilla para los desarrolladores web, puesto que se trataba de forma diferente en Internet Explorer y los demás navegadores. Por fortuna, todos los navegadores actuales ya interpretan de la misma forma el modelo de cajas.

La representación básica del modelo de cajas es el siguiente:

Dimensiones

Para dar tamaños específicos a los diferentes elementos de un documento HTML, necesitaremos asignarles valores a las propiedades width (ancho) y height (alto). Además, ambas tienen propiedades hermanas para establecer el tamaño máximo y mínimo que pueden alcanzar:

CSS3 02 Unidades

CSS3 02 Unidades

Antes de comenzar a utilizar propiedades que utilicen medidas, como por ejemplo width (que sirve para establecer un ancho a un elemento concreto), es conveniente conocer los tipos de Unidades que pueden utilizarse en CSS para indicar un determinado Tamaño. Existen varios tipos de unidades, vamos a desglosarlas en grupos y explicar cada una de ellas. Más adelante veremos las propiedades que pueden utilizarlas.

Unidades absolutas

Las unidades absolutas son un tipo de medida fija que no cambia, que no depende de ningún otro factor. Son ideales para medios no variables como pueden ser los medios impresos, por ejemplo, pero son poco flexibles y adecuados para la web en la actualidad, ya que no tienen la capacidad de adaptarse a diferentes resoluciones o pantallas, que es lo que tendemos a hacer actualmente.

CSS3 01 Colores

CSS3 01 Colores

Uno de los primeros cambios de estilo que podemos pensar realizar en un documento HTML es hacer variaciones en los colores de primer plano y de fondo. Esto es posible con las primeras dos propiedades que veremos a continuación:

Colores CSS

La propiedad color establece el color del texto, mientras que la propiedad background-color establece el color de fondo del elemento.

Todas las propiedades CSS

CSS3 00 Que es CSS y como incluirlo en nuestro html

¿Qué es CSS? Y cómo incluirlo

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de
los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de
separar los contenidos y su presentación y es imprescindible para crear páginas web
complejas.