04 Mar Genera una escala cromática con css
Publicado a las 07:30h en Tutorial CSS. Aprende a decidir como se visualizarán tus páginas web., Ejercicios CSS 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!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Todavía no hay votos. Sé el primero en valorar la entrada.
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
Ejercicio diferencia entre centrado de texto y de cajas en css
Ejercicio css dónde se compara el centrado de contenidos en una caja con el centrado de una caja. Incluye solución completa.
Ejercicio css dónde se compara el centrado de contenidos en una caja con el centrado de una caja. Incluye solución completa.
Como hacer banderas del mundo mediante la propiedad background
Ejercicio css sobre background en el que se pintan mediante gradientes algunas banderas (fáciles) del mundo. Incluye solución.
Ejercicio css sobre background en el que se pintan mediante gradientes algunas banderas (fáciles) del mundo. Incluye solución.
Ejercicio sobre como ocultar cajas con css mediante visibility y/o display
Observa de forma práctica la diferencia entre el uso de la propiedad display:none y visibility:hidden. Incluye solución.
Observa de forma práctica la diferencia entre el uso de la propiedad display:none y visibility:hidden. Incluye solución.
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.
Guía rápida para crear botones personalizados con CSS
Hacemos un repaso rápido a :hover :active y las propiedades box-shadow, border-radius, cursor y background para estilizar botones.
Hacemos un repaso rápido a :hover :active y las propiedades box-shadow, border-radius, cursor y background para estilizar botones.
Ejercicio css para mostrar contenido específico para teléfonos y ordenadores
Algunas webs muestran un teléfono en un lugar muy tentador en función de si es desktop o smartphone. Lo abordamos con css.
Algunas webs muestran un teléfono en un lugar muy tentador en función de si es desktop o smartphone. Lo abordamos con css.
No hay comentarios