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:
Creación de logotipos con tipografías web
Ejercicio css en el que se muestra como mostrar logotipos sencillos mediante el uso de paletas de colores adecuadas y tipografías de google fonts.
Ejercicio css en el que se muestra como mostrar logotipos sencillos mediante el uso de paletas de colores adecuadas y tipografías de google fonts.
Ejemplo de creación de menú horizontal en CSS: inline-block y float
Ejemplo dónde se plantean dos estrategias distintas para dar estilos a un en menú horizontal. La primera con inline-block. La segunda con float.
Ejemplo dónde se plantean dos estrategias distintas para dar estilos a un en menú horizontal. La primera con inline-block. La segunda con float.
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.
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 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.
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.
No Comments