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:
Ejercicio css sobre forzar y romper la propiedad de herencia
Rápido ejercicio para practicar el concepto de herencia en css. Incluye solución y explicación.
Rápido ejercicio para practicar el concepto de herencia en css. Incluye solución y explicación.
Creación de una página web en mantenimiento con html y css
Creación de una landing page de página en mantenimiento con html y css. Incluye solución.
Creación de una landing page de página en mantenimiento con html y css. Incluye solución.
Ejercicio sobre equivalencia entre em y px de CSS
¿Cómo afectaría a una página web un simple cambio como puede ser la propiedad font-size de un párrafo? Incluye solución.
¿Cómo afectaría a una página web un simple cambio como puede ser la propiedad font-size de un párrafo? Incluye solución.
Selectores CSS. Que son y como usarlos
Guía sobre los principales selectores css que existen para llamar a las etiquetas de un documento web.
Guía sobre los principales selectores css que existen para llamar a las etiquetas de un documento web.
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.
Como hacer un dropcap (letra capital) con css
La letra capital es un recurso medieval que no es de mi devoción pero que me sirve para darte un par de ejemplos prácticos de uso del pseudoselector ::first-letter.
La letra capital es un recurso medieval que no es de mi devoción pero que me sirve para darte un par de ejemplos prácticos de uso del pseudoselector ::first-letter.
No Comments