04 Mar Genera una escala cromática con css
Posted at 07:30h in Tutorial CSS. Aprende a decidir como se visualizarán tus páginas web., Ejercicios CSS 0 Comments
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:
Excalidraw, una herramienta para hacer mockups web rápidos
¿Existe alguna herramienta gratuita, rápida y sencilla de usar para dibujar el croquis de una maqueta web? + info en la publicación.
¿Existe alguna herramienta gratuita, rápida y sencilla de usar para dibujar el croquis de una maqueta web? + info en la publicación.
Escribe los selectores css adecuados en cada caso
Ejercicio css del curso web ifcd0110 para practicar con los selectores más adecuados a poner en un fragmento de html. Incluye solución.
Ejercicio css del curso web ifcd0110 para practicar con los selectores más adecuados a poner en un fragmento de html. Incluye solución.
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 nivel básico sobre selectores CSS
Ejercicio básico nivel principiante para practicar el uso de selectores CSS. Apuntos de alumno del curso web IFCD0110. Incluye solución.
Ejercicio básico nivel principiante para practicar el uso de selectores CSS. Apuntos de alumno del curso web IFCD0110. Incluye solución.
Ejemplo de centrado vertical y horizontal con CSS
Ejemplo explicado sobre como centrar verticalmente y horizontalmente una caja dentro de otra mediante position relative y absolute.
Ejemplo explicado sobre como centrar verticalmente y horizontalmente una caja dentro de otra mediante position relative y absolute.
Qué son ::before (:before) y ::after(:after) y ejemplo de uso en CSS
::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
::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
No Comments