26 Nov Ejercicio sobre web safe colors, rgb, rgba y colores hexadecimales
Posted at 23:36h in Tutorial CSS. Aprende a decidir como se visualizarán tus páginas web., Ejercicios CSS 0 Comments
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!
Entradas relacionadas:
Concepto de herencia en CSS
¿Imaginas tener que especificar una por una los estilos a cada una de las etiquetas? El concepto de CSS nos ayuda a optimizar código. Entender sus propiedades nos puede ayudar mucho a ser mejores maqu...
¿Imaginas tener que especificar una por una los estilos a cada una de las etiquetas? El concepto de CSS nos ayuda a optimizar código. Entender sus propiedades nos puede ayudar mucho a ser mejores maqu...
Lo más importante en lenguaje web es aprender a tabular
Lo más importante que debéis aprender en este curso es como tabular correctamente vuestro código. Incluye imágenes de casos bien tabulados y mal tabulados.
Lo más importante que debéis aprender en este curso es como tabular correctamente vuestro código. Incluye imágenes de casos bien tabulados y mal tabulados.
Unidades de medida absolutas y relativas en CSS
¿Como se define el tamaño de cada uno de los elementos de una página web? En CSS podemos encontrar medidas absolutas y relativas. Veamos a que equivale cada una.
¿Como se define el tamaño de cada uno de los elementos de una página web? En CSS podemos encontrar medidas absolutas y relativas. Veamos a que equivale cada una.
Colores CSS para web
Existen distintas formas de indicar los colores que queremos dar a los elementos de un documento. Básicamente necesitamos dominar los colores RGB, RGBa y Hexadecimal. Se muestran varios ejemplos de us...
Existen distintas formas de indicar los colores que queremos dar a los elementos de un documento. Básicamente necesitamos dominar los colores RGB, RGBa y Hexadecimal. Se muestran varios ejemplos de us...
Cuidado con los tutoriales pdf obsoletos sobre html, css y javascript
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?
Como usar el contador counter() de css
Numerar listas css es como con el Word es posible gracias a la propiedad counter(). Veamos un ejemplo de uso.
Numerar listas css es como con el Word es posible gracias a la propiedad counter(). Veamos un ejemplo de uso.
No Comments