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:
Factores que afectan al tiempo de carga de una página web
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Como crear columnas con CSS de forma fácil mediante Inline-block y float
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
Ejercicio css dar formato a una tabla de precios con display:table
Maquetar con display:table; tiene ventajas frente a las tablas html. A modo de ejercicio se propone una tabla de servicios. Incluye solución.
Maquetar con display:table; tiene ventajas frente a las tablas html. A modo de ejercicio se propone una tabla de servicios. Incluye solución.
Ejercicio css sobre la propiedad box-shadow (css3)
Ejercicio para practicar con la propiedad box-shadow de css. Incluye solución.
Ejercicio para practicar con la propiedad box-shadow de css. Incluye solución.
Creación de un menú horizontal con sub menú desplegable mediante CSS
Código CSS explicado paso a paso para crear un menú horizontal con un sub menú vertical. Apuntes de alumno IFCD0110 tutorial CSS.
Código CSS explicado paso a paso para crear un menú horizontal con un sub menú vertical. Apuntes de alumno IFCD0110 tutorial CSS.
Ejercicio css para mostrar contenido específico para teléfonos y ordenadores
Algunas webs muestran un teléfono en un lugar muy tentador en función de si es desktop o smartphone. Lo abordamos con css.
Algunas webs muestran un teléfono en un lugar muy tentador en función de si es desktop o smartphone. Lo abordamos con css.
No Comments