HTML & CSS

Cuando estamos creando una página web o bien un theme de Drupal y le queremos aplicar un diseño, nos puede interesar usar variables para darles un valor y utilizarlo en diferentes partes de nuestra hoja de estilo.

Para crear la variable y darle valor podemos hacer lo siguiente

:root{
    --bg-color: #5e5e5e;
    --font-color-white: white;
    --padding-left:10vw;
    --padding-right:10vw;
}

Si utilizamos en elemento :root podremos utilizar las variables en cualquier elemento de nuestro css.

A veces en nuestra página web queremos tener una imagen que cuando pasemos el ratón por encima aparezca un texto. 

Si os pasáis por nuestra sección de Proyectos podéis ver a lo que nos referimos. Cada vez que pasamos con el ratón por encima de una imagen, se produce un efecto de transición en el que la imagen desaparece y aparece un bloque con un color y nos muestra un texto.

En este caso necesitamos tener el siguiente código de HTML