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:
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.
Ejemplo de como generar y crear un sprite css para mejorar la carga web
El sprite permite mejorar el tiempo de carga de una web. Creamos un sprite y mostramos un ejemplo de código html y css para usarlo
El sprite permite mejorar el tiempo de carga de una web. Creamos un sprite y mostramos un ejemplo de código html y css para usarlo
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 publicación se plantean 3.
Centrar un contenido horizontalmente es relativamente fácil. ¿Sin embargo cuando lo queremos hacer verticalmente que alternativas tenemos? En esta publicación se plantean 3.
Ejercicio css. Separar el css de un html
Ejercicio CSS en el que a partir de una hoja html dada se pide separar al máximo html y css en hojas separadas. Incluye solución.
Ejercicio CSS en el que a partir de una hoja html dada se pide separar al máximo html y css en hojas separadas. Incluye solución.
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 especificidad y orden de aparición. Veámoslo.
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 especificidad y orden de aparición. Veámoslo.
La propiedad background: color, image, repeat, position, size, attachment y más
La propiedad background se desarrolla en muchísimas variantes que permiten generar efectos muy interesantes. Veámoslas todas.
La propiedad background se desarrolla en muchísimas variantes que permiten generar efectos muy interesantes. Veámoslas todas.
No Comments