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:
Menú horizontal con submenú desplegable horizontal mediante CSS
Ejemplo de menú horizontal con submenú desplegable horizontal mediante CSS. Incluye archivo descargable.
Ejemplo de menú horizontal con submenú desplegable horizontal mediante CSS. Incluye archivo descargable.
Dimensiones reales de una caja en CSS
Las dimensiones reales de una caja, por defecto, no son las que indica el width. Veamos como se calculan y en que nos puede ayudar aprenderlo.
Las dimensiones reales de una caja, por defecto, no son las que indica el width. Veamos como se calculan y en que nos puede ayudar aprenderlo.
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
Veo veo ¿de qué color se verá? | ejercicio sobre especificidad css
Los selectores css a veces son intuitivos y otras veces no. ¿Tienes una buena intuición?. ¿De qué color ser verá? Incluye solución.
Los selectores css a veces son intuitivos y otras veces no. ¿Tienes una buena intuición?. ¿De qué color ser verá? Incluye solución.
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.
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 hay comentarios