Ejercicio de programación con CSS: Reto fondos background CSS
Código
0h 4m
Practica la creación de fondos multicapa en CSS con color base, patrón, logo y degradado usando la propiedad shorthand background.
Crea un elemento div con la clase "card" que tenga las siguientes características de fondo:
- Un color de fondo base azul claro (#e6f7ff).
- Una imagen de patrón de puntos (dots.png) que se repita por todo el fondo.
- Una imagen de logo (logo.png) que aparezca una sola vez en la esquina superior derecha, con un tamaño de 50px.
- Un degradado lineal semitransparente que vaya de blanco con 70% de opacidad en la parte superior a blanco con 30% de opacidad en la parte inferior.
Las capas deben estar ordenadas de manera que el logo esté por encima del degradado, el degradado por encima del patrón, y el patrón por encima del color base.
El elemento debe tener un ancho de 300px, una altura de 200px, y un borde redondeado de 8px.
Utiliza la propiedad shorthand background para definir todas las capas de fondo en una sola declaración CSS.
Todos los ejercicios de programación de CSS
Evalúa tus conocimientos con ejercicios de programación en CSS de tipo Test, Puzzle, Código y Proyecto con VSCode.
Reto modelo caja CSS
Código
Propiedades de posicionamiento
Puzzle
Modelo de caja
Código
Sombras en texto y cajas
Test
Reto implementación de fuentes web
Código
Sintaxis básica
Test
Estilos de fuente
Test
Diseño responsive con media queries
Test
Animaciones y transiciones
Test
Proyecto CSS Landing page simple
Proyecto
Reto unidades de medida
Código
Propiedades de texto
Puzzle
Metodologías BEM, SMACSS, OOCSS
Puzzle
Herencia y cascada
Test
Sintaxis avanzada
Puzzle
Reto sintaxis CSS
Código
Flexbox en diseños modernos
Puzzle
Elementos 'float' y 'clear'
Test
Pseudo-clases y pseudo-elementos
Puzzle
Reto grid de columnas en CSS
Código
Selectores avanzados
Puzzle
Reto componente responsive
Código
Reto formulario estilizado
Código
Proyecto CSS crear una navbar
Proyecto
Proyecto CSS Dashboard Responsive
Proyecto
Reto Flexbox Hero
Código
Propiedades de fondo
Puzzle
Introducción a CSS
Test
Reto selectores básicos CSS
Código
Reto Flexbox Card
Código
Reto propiedades texto
Código
Modelo de caja
Test
Propiedad 'display'
Test
Variables en CSS
Puzzle
Grid en diseños de cuadrícula
Test
Selectores básicos
Test
Reto tema claro/oscuro con variables
Código
Reto especificidad y cascada
Código
Tutorial para resolver este ejercicio de programación
CSS
Propiedades de fondo
Estilización de texto y fondo