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:
Como poner iconos flotantes de redes sociales en nuestra web con html y css
Ejercicio css dónde se muestra el código necesario para centrar verticalmente iconos flotantes en el lateral de una página web. Incluye solución.
Ejercicio css dónde se muestra el código necesario para centrar verticalmente iconos flotantes en el lateral de una página web. Incluye solución.
Tipografía CSS: como usar web safe fonts y tipografías personalizadas.
La sal es a la cocina lo que las tipografías son al mundo web. Debemos conocerlas y usarlas con conocimiento. En esta entrada se explica que CSS se de...
La sal es a la cocina lo que las tipografías son al mundo web. Debemos conocerlas y usarlas con conocimiento. En esta entrada se explica que CSS se de...
La propiedad opacidad en css (opacity)
Qué es la propiedad opacity de css y como podemos usarla. Atención porqué para transaprencias no siempre es la mejor opción.
Qué es la propiedad opacity de css y como podemos usarla. Atención porqué para transaprencias no siempre es la mejor opción.
Introducción al CSS. Que significa Cascading Style Sheets.
Se explica que es el CSS, que significa en realidad el acrónimo y porqué se le llama así y hacemos una primera toma de contacto con este lenguaje web.
Se explica que es el CSS, que significa en realidad el acrónimo y porqué se le llama así y hacemos una primera toma de contacto con este lenguaje web.
Como decorar un texto seleccionado con el ratón
En alguna páginas web el texto se decora cuando es seleccionado mediante el ratón. Aquí encontrarás toda la información de esta pseudo clase.
En alguna páginas web el texto se decora cuando es seleccionado mediante el ratón. Aquí encontrarás toda la información de esta pseudo clase.
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.
No hay comentarios