26 Nov Ejercicio sobre web safe colors, rgb, rgba y colores hexadecimales
En este ejercicio vamos a comprobar la relación que existe entre los web safe colors, los colores rgb, rgba y los colores hexadecimales.
A partir de un web safe colors comprobaremos la traducción de este color en otros sistemas.
Te será útil leer esta entrada
Y hacer este ejercicio:
Pasemos al ejercicio propuesto.
Enunciado
A continuación se te proporciona un código html en el que algunas instrucciones css dentro de la etiqueta <style> están todavía por rellenar.
Rellena las instrucciones según el código de color indicado y usando para cada contenedor la clase indicada.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="francesc ricart"/>
<title>06 - colores web</title>
<style>
div{
width:300px;
height:16px;
border:1px solid #000000;
margin:1px;
}
/*negro*/
.negro-safeColor{background-color:black;}
.negro-rgb{background-color:;}
.negro-rgba{background-color:;}
.negro-hex{background-color:;}
/*gris*/
.gris-safeColor{background-color:grey;}
.gris-rgb{background-color:;}
.gris-rgba{background-color:;}
.gris-hex{background-color:;}
/*rojo*/
.rojo-safeColor{background-color:red;}
.rojo-rgb{background-color:;}
.rojo-rgba{background-color:;}
.rojo-hex{background-color:;}
/* rgba */
.rosa-1{background-color:rgba(255,20,147,);}
.rosa-2{background-color:rgba(255,20,147,);}
.rosa-3{background-color:rgba(255,20,147,);}
.rosa-4{background-color:rgba(255,20,147,);}
.rosa-5{background-color:rgba(255,20,147,);}
.rosa-6{background-color:rgba(255,20,147,);}
.rosa-7{background-color:rgba(255,20,147,);}
.rosa-8{background-color:rgba(255,20,147,);}
.rosa-9{background-color:rgba(255,20,147,);}
.rosa-10{background-color:rgba(255,20,147,1);}
</style>
</head>
<body>
<h2>color negro</h2>
<div class="negro-safeColor"></div>
<div class="negro-rgb"></div>
<div class="negro-rgba"></div>
<div class="negro-hex"></div>
<h2>color gris</h2>
<div class="gris-safeColor"></div>
<div class="gris-rgb"></div>
<div class="gris-rgba"></div>
<div class="gris-hex"></div>
<h2>color rojo</h2>
<div class="rojo-safeColor"></div>
<div class="rojo-rgb"></div>
<div class="rojo-rgba"></div>
<div class="rojo-hex"></div>
<h2>escala cromática del rosa</h2>
<!-- div.rosa-$*10 -->
<div class="rosa-1"></div>
<div class="rosa-2"></div>
<div class="rosa-3"></div>
<div class="rosa-4"></div>
<div class="rosa-5"></div>
<div class="rosa-6"></div>
<div class="rosa-7"></div>
<div class="rosa-8"></div>
<div class="rosa-9"></div>
<div class="rosa-10"></div>
</body>
</html>
Solución del ejercicio
El negro es el color rgb(0,0,0) o #000;
El gris es el color rgb(127,127,127) o #888;
El rojo es el color rgb(255,0) o #f00;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="francesc ricart"/>
<title>06- colores web</title>
<style>
div{
width:300px;
height:16px;
border:1px solid #000000;
margin:1px;
}
/*negro*/
.negro-safeColor{background-color:black;}
.negro-rgb{background-color:rgb(0,0,0);}
.negro-rgba{background-color:rgba(0,0,0,1);}
.negro-hex{background-color:#000000;}
/*gris*/
.gris-safeColor{background-color:grey;}
.gris-rgb{background-color:rgb(127,127,127);}
.gris-rgba{background-color:rgba(127,127,127,1);}
.gris-hex{background-color:#888;}
/*rojo*/
.rojo-safeColor{background-color:red;}
.rojo-rgb{background-color:rgb(255,0,0);}
.rojo-rgba{background-color:rgba(255,0,0,1);}
.rojo-hex{background-color:#ff0000;}
/*
web safe colors
rgb()
rgba()
hexadecimal, #
hay más pero no los veremos en clase
*/
/* rgba */
.rosa-1{background-color:rgba(255,20,147,0.1);}
.rosa-2{background-color:rgba(255,20,147,0.2);}
.rosa-3{background-color:rgba(255,20,147,0.3);}
.rosa-4{background-color:rgba(255,20,147,0.4);}
.rosa-5{background-color:rgba(255,20,147,0.5);}
.rosa-6{background-color:rgba(255,20,147,0.6);}
.rosa-7{background-color:rgba(255,20,147,0.7);}
.rosa-8{background-color:rgba(255,20,147,0.8);}
.rosa-9{background-color:rgba(255,20,147,0.9);}
.rosa-10{background-color:rgba(255,20,147,1.0);}
</style>
</head>
<body>
<h2>color negro</h2>
<div class="negro-safeColor"></div>
<div class="negro-rgb"></div>
<div class="negro-rgba"></div>
<div class="negro-hex"></div>
<h2>color gris</h2>
<div class="gris-safeColor"></div>
<div class="gris-rgb"></div>
<div class="gris-rgba"></div>
<div class="gris-hex"></div>
<h2>color rojo</h2>
<div class="rojo-safeColor"></div>
<div class="rojo-rgb"></div>
<div class="rojo-rgba"></div>
<div class="rojo-hex"></div>
<h2>escala cromática del rosa</h2>
<!-- div.rosa-$*10 -->
<div class="rosa-1"></div>
<div class="rosa-2"></div>
<div class="rosa-3"></div>
<div class="rosa-4"></div>
<div class="rosa-5"></div>
<div class="rosa-6"></div>
<div class="rosa-7"></div>
<div class="rosa-8"></div>
<div class="rosa-9"></div>
<div class="rosa-10"></div>
</body>
</html>
¡Hola!
Querido lector,
Deseo que este ejercicio te haya resultado de utilidad.
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Todavía no hay votos. Sé el primero en valorar la entrada.
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
Si no te atrae la idea de usar list-style-image para decorar listas, entonces puedes hacerlo con ::before y el uso de iconos de fontawesome.
En alguna páginas web el texto se decora cuando es seleccionado mediante el ratón. Aquí encontrarás toda la información de esta pseudo clase.
Creación de una landing page de página en mantenimiento con html y css. Incluye solución.
Las pseudoclases sirven para definir estados en los que se encuentra una etiqueta html. Vemos las pseudoclases link, active, hover y visited.
::before y ::after tienen muchos usos interesantes para dar estilos en nuestros documentos web. Este conocimiento te puede ayudar por ejemplo a estilizar listas html
Código CSS explicado paso a paso para crear un menú horizontal con un sub menú vertical. Apuntes de alumno IFCD0110 tutorial CSS.
No hay comentarios