Genera una escala cromática con css

Genera una escala cromática con css

Print Friendly, PDF & Email
Genera una escala cromática con css
Valora esta entrada

En este ejercicio vamos a aplicar el concepto de colores css.

Repasar esta entrada te será de utilidad.

Vayamos al enunciado del ejercicio.

Enunciado

Dado el siguiente código html haz que se represente la escala cromática del color #ff0064

<div id="contenedor">
	<div class="color-1"></div>
	<div class="color-2"></div>
	<div class="color-3"></div>
	<div class="color-4"></div>
	<div class="color-5"></div>
	<div class="color-6"></div>
	<div class="color-7"></div>
	<div class="color-8"></div>
	<div class="color-9"></div>
	<div class="color-10"></div>
<div>
Escala cromática ff0064
Escala cromática ff0064

Solución del ejercicio

Una vez escrito el css que muestre los contenedores como una cuadrícula, el primer paso es averiguar a que color rgba corresponde el #ff0064.

Por ejemplo puedes usar esta página web que transforma los colores de hexadecimal a rgb.

<style>
	#contenedor{
		margin:20px auto;
		width:100%;
		max-width:652px;
		border:1px solid red;
	}
	div[class *= "color-"]{
		width:100%;
		max-width:600px;
		border:1px solid #000000;
		padding:25px;
	}

	.color-1{background-color:rgba(255,0,100,1);}
	.color-2{background-color:rgba(255,0,100,0.9);}
	.color-3{background-color:rgba(255,0,100,0.8);}
	.color-4{background-color:rgba(255,0,100,0.7);}
	.color-5{background-color:rgba(255,0,100,0.6);}
	.color-6{background-color:rgba(255,0,100,0.5);}
	.color-7{background-color:rgba(255,0,100,0.4);}
	.color-8{background-color:rgba(255,0,100,0.3);}
	.color-9{background-color:rgba(255,0,100,0.2);}
	.color-10{background-color:rgba(255,0,100,0.1);}

	</style>

¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

Menú horizontal con submenú desplegable horizontal mediante CSS
- 367
Ejemplo de menú horizontal con submenú desplegable horizontal mediante CSS. Incluye archivo descargable.
Cuidado con los tutoriales pdf obsoletos sobre html, css y javascript
- 120
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?
Ejemplo de creación de menú horizontal en CSS: inline-block y float
- 465
Ejemplo dónde se plantean dos estrategias distintas para dar estilos a un en menú horizontal. La primera con inline-block. La segunda con float.
Factores que afectan al tiempo de carga de una página web
- 404
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...
Ejercicio sobre como ocultar cajas con css mediante visibility y/o display
- 39
Observa de forma práctica la diferencia entre el uso de la propiedad display:none y visibility:hidden. Incluye solución.
¡Veo, veo! Suplantando etiquetas html con css. Ejercicio de repaso.
- 43
Ejercicio de repaso de instrucciones básicas de css. Estiliza etiquetas para que parezcan etiquetas que en realidad no son. Incluye solución.
Mi chuleta de instrucciones CSS para dar formato al texto
- 74
Existen muchas instrucciones para dar formato al texto. Es difícil recordarlas todas. Se resumen principales instrucciones css para dar formato a letras, palabras y párrafos.
La propiedad z-index
- 110
Resumen y ejemplo de aplicación de la propiedad Z-index. Asignatura CSS curso confección y publicación de páginas web.
Ejemplo de menú vertical con submenú horizontal mediante CSS
- 421
Código html y css de como crear un menú vertical con un submenú horizontal.
Resumen de propiedades css para hacer tablas con display:table
- 27
El uso de tablas html no está muy bien visto si no es estrictamente para tabular contenidos. Pero también lo podemos hacer mediante display:table de css.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.