Genera una escala cromática con css

04 Mar Genera una escala cromática con css

Publicado a las 07:30h en Ejercicios CSS, Tutorial CSS. Aprende a decidir como se visualizarán tus páginas web. por Francesc Ricart 0 Comentarios

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>

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

04 Mar Genera una escala cromática con css

Enunciado

Solución del ejercicio

Entradas relacionadas:

Francesc Ricart

No hay comentarios

Escribir un comentario