TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

Tutorial de colores CSS para principiantes

4

Los colores hacen que la página web sea significativa. La página se verá sencilla y aburrida sin diferentes colores. Puede utilizar dos tipos de propiedades de color con CSS en una página web. Uno es el color de primer plano (generalmente como color) para cambiar el color del texto o la fuente. El segundo es el color de fondo para agregar color de fondo a diferentes elementos HTML. En este tutorial, exploremos cómo usar las propiedades de color CSS con varios atributos.

Cambiar el color del texto en CSS

Tomemos un ejemplo de cómo cambiar el color de un elemento de párrafo

a rojo. Puede hacer esto con la siguiente definición de estilo en CSS:

p { color: red; }

Producirá el siguiente resultado en el navegador:

Este es un párrafo de color rojo.

Cambiar los colores de fondo en CSS

Puede cambiar el color de fondo de cualquier elemento HTML utilizando la siguiente definición de estilo CSS:

p { background-color:red;color:white; }

Producirá el siguiente resultado:

Este es un párrafo de color rojo.

Tenga en cuenta que hemos utilizado texto en color blanco para que sea claramente legible con fondo rojo.

Definición de colores en CSS

En los ejemplos anteriores, hemos utilizado colores rojo y blanco con el nombre. Puede crear millones de colores combinando los tres colores básicos de rojo, azul y verde. No es posible recordar el nombre de los colores y también la mayoría de los colores no tienen un nombre real. Para simplificar el uso, CSS permite las siguientes formas de definir el valor del color:

  • Nombres para colores como rojo, verde o blanco
  • Usando una combinación de valores decimales rojo, verde y azul como rgb (20,50,200)
  • Usando valores hexadecimales para rojo, verde y azul como #ffffff
  • Valor porcentual para colores rojo, azul y verde como rgb (10%, 80%, 25%)
  • Usando tono, saturación y luminosidad como hsl (0,80%, 70%)
  • Agregar opacidad a valores RGB como rgba (0,0,0,0.8)
  • Agregar opacidad a valores HSL como hsla (200,75% 90% 0.6)

Usar nombres de colores en CSS

Ya hemos visto cómo usar el nombre en las propiedades CSS de color y fondo. Solo hay alrededor de 150 nombres de colores que los navegadores pueden identificar. Le recomendamos que utilice números en lugar de nombres para los colores. También puede consultar los códigos de color para sitios de redes sociales populares en este artículo.

Usar colores RGB en CSS

En el método RGB, los colores rojo, azul y verde se indican con números decimales que van del 0 al 255. Por ejemplo, el color del tomate se indica como rgb (255,99,71).

<div style="background-color: rgb(255,99,71);"> This text will have a tomato color background with the RGB value as rgb(255,99,71). </div>

Producirá el siguiente resultado en el navegador:

Este texto tendrá un fondo de color tomate con el valor RGB como rgb (255,99,71).

Puede crear más de 16 millones de colores variando los tres valores de color base. Sin embargo, asegúrese de utilizar el color de texto adecuado para que sea fácil de leer. La mejor opción es elegir colores seguros para la web, como colores de interfaz de usuario planos, para su sitio web.

Uso de valores de color hexadecimales

El color tomate rgb (255,99,71) se puede convertir en un valor hexadecimal equivalente a FF6347. Esta es una mera conversión de 255 a FF, 99 a 63 y 71 a 47. Puede usar herramientas de conversión de color para convertir entre códigos RGB a hexadecimales.

Puede usar valores de color hexadecimales en CSS como se muestra a continuación:

<div style="background-color: #FF6347; padding: 15px; color: #FFFFFF"> This text will have a tomato color background with the hex code value as #FF6347. Remember to use # symbol in front the hex code value. Also both small case #ff6347 and capital case #FF6347 will produce the same result. </div>

El "padding: 15px;" se utiliza para agregar relleno al contenido del texto dentro del

elemento. Producirá el siguiente resultado en el navegador:

Este texto tendrá un fondo de color tomate con el valor del código hexadecimal como # FF6347. Recuerde usar el símbolo # delante del valor del código hexadecimal y use el color del texto como #FFFFFF. Además, tanto el caso pequeño # ff6347 como el caso capital # FF6347 producirán el mismo resultado.

Usar valores RGB como porcentaje

En lugar de rangos de números decimales de 0 a 255, también puede mencionar el valor porcentual de rojo, verde y azul.

<div style="background-color: rgb(20%,69%,74%); padding: 15px; color: #FFFFFF"> This text will have a tomato color background with the hex code value as #FF6347. Remember to use # symbol in front the hex code value. Also both small case #ff6347 and capital case #FF6347 will produce the same result. </div>

Producirá el siguiente resultado:

Este texto tendrá un fondo de color tomate con el valor del código hexadecimal como # FF6347. Recuerde utilizar el símbolo # delante del valor del código hexadecimal. Además, tanto el caso pequeño # ff6347 como el caso capital # FF6347 producirán el mismo resultado.

Agregar opacidad a los colores RGB

En CSS3, tiene la capacidad de mencionar el valor alfa u opacidad de los colores. El valor alfa se suma como un número decimal entre 0.0 y 1.0 como cuarto valor. El valor 0 representa completamente transparente que es 0% de opacidad y 1.0 indica opaco con 100% de opacidad.

A continuación se muestra la sintaxis del uso del valor alfa en color rgb con un 20% de opacidad:

<div style="background-color: rgba(255,0,0,0.2);"> Content Here...... </div>

Vamos a mostrar el color rojo con 20%, 40%, 60%, 800% y 100% de valores de opacidad para hacerlo más comprensible.

Tutorial de colores CSS para principiantes

Recuerde, también hay una propiedad CSS separada llamada “opacidad: que también se puede usar para el mismo propósito. La ventaja de la opacidad es que también se puede utilizar en imágenes. Pero no todos los navegadores lo admiten. A continuación se muestra cómo puede usar la propiedad de opacidad por separado:

p { background-color: rgb(255,0,0); opacity: 0.5; }

Usar colores HSL en CSS

CSS3 tiene una opción adicional para definir un color usando el método HSL. HSL significa tono, saturación, luminosidad y tiene tres valores:

  • El tono es un grado indicado en una rueda de colores con referencias como 0 = rojo, 120 = verde, 240 es azul.
  • La saturación es un valor porcentual de gris en un color.
  • La claridad es un valor porcentual de claro u oscuro donde el 0% es oscuro (negro) y el 100% es claro (blanco).

A continuación se muestra un ejemplo de cómo hacer un fondo verde con color HSL en CSS:

<div style="background-color: hsl(120,100%,50%,0.2);"> Content Here...... </div>

HSL con opacidad

Similar a RGBA, también puede agregar opacidad al color HSL como cuarto valor. La opacidad o alfa se indica en un número decimal entre 0.0 y 1.0, donde 0.0 indica completamente transparente y 1.0 indica opaco. A continuación se muestra un ejemplo de creación de color verde con 50% de opacidad utilizando la declaración HSLA en CSS.

<div style="background-color: hsla(120,100%,50%,0.6);"> Content Here...... </div>

Los siguientes cuadros muestran el color verde en diferentes niveles alfa:

Tutorial de colores CSS para principiantes

Ejemplo completo de uso de colores en CSS

A partir de ahora, hemos visto diferentes formas de definir colores en CSS. Muestremos un ejemplo completo de cómo crear colores de primer plano y de fondo:

<!-- This is CSS --> <style> div {background-color:tomato; padding:10px;} p {color: rgba(50,90,20,0.8);} p {color: #ffffff;} /* This will be the final paragraph color */ h1 {color: yellow;} div > h1 {color:#008754;} /* This will be the final h1 color */ h2 {background:hsla(10,20%,30%,0.8);} h2 {color:#ffffff;} em {color: #4500aa;} p > em {background-color: rgba(60,43,78,0.7); color:yellow;} </style> <!-- This is HTML --> <div> <!-- Background Tomato --> <h1>This is a H1 heading.</h1> <!-- Color #008754 --> <p>Here is a paragraph element.</p> <!-- Color #ffffff --> <h2>This is a H2 heading.</h2> <!-- Background hsla(10,20%,30%,0.8) --> <p>Here is another paragraph. <!-- Color #ffffff --> <em>This is emphasized text inside paragraph.</em> <!-- Background rgba(60,43,78,0.7) Color yellow --> </p> <em>This is emphasized text outside paragraph.</em> <!-- Color #4500aa --> </div>

El resultado final se mostrará a continuación:

Aquí hay un elemento de párrafo.

Este es un encabezado H2.

Aquí hay otro párrafo.
Este es el texto enfatizado dentro del párrafo.
Este es texto enfatizado fuera del párrafo.

  • Si define varios colores en CSS para el mismo elemento, el último tendrá prioridad sobre todas las declaraciones anteriores. En el ejemplo anterior, el párrafo tendrá color #ffffff debido a esta razón.
  • Los estilos específicos tendrán prioridad sobre el estilo principal o genérico. El color h1 será # 008754 y no amarillo.
  • También puede utilizar la propiedad abreviada de fondo para definir el color de fondo.

Si no se menciona el color de fondo, el elemento tendrá un fondo transparente. Dado que los navegadores utilizan un fondo blanco, verá que la mayoría de las páginas de la web tienen un fondo blanco. En realidad, el elemento de las páginas se declara con fondo blanco para garantizar una visualización adecuada, ya que los usuarios pueden cambiar el color de fondo del navegador.

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More