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. 0 Comentarios
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:
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 publicac...
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 publicac...
Concepto de cascada en CSS
En CSS existen una serie de normas que dan prioridad a las instrucciones que afectan a cada etiqueta html en función de su importancia, grado de espec...
En CSS existen una serie de normas que dan prioridad a las instrucciones que afectan a cada etiqueta html en función de su importancia, grado de espec...
Ejemplo de menú vertical con submenú horizontal mediante CSS
Código html y css de como crear un menú vertical con un submenú horizontal.
Código html y css de como crear un menú vertical con un submenú horizontal.
Ejercicio sobre selectores css (III)
Ejercicio css en que dadas varias propuestas de selectores se pide escribir para que html serviría. Incluye solución.
Ejercicio css en que dadas varias propuestas de selectores se pide escribir para que html serviría. 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.
Centrado vertical de un contenido web con css
Centrar un contenido horizontalmente es relativamente fácil. ¿Sin embargo cuando lo queremos hacer verticalmente que alternativas tenemos? En esta pub...
Centrar un contenido horizontalmente es relativamente fácil. ¿Sin embargo cuando lo queremos hacer verticalmente que alternativas tenemos? En esta pub...
No hay comentarios