Marketing de contenido
Características de CSS3 que quizás no conozca: Flexbox, diseños de cuadrícula, propiedades personalizadas, transiciones, animaciones y múltiples fondos
Hojas de estilo en cascada (CO) continúan evolucionando y las últimas versiones pueden tener algunas características que tal vez ni siquiera conozcas. Estas son algunas de las principales mejoras y metodologías introducidas con CSS3, junto con ejemplos de código:
- Diseño de caja flexible (Flexbox): un modo de diseño que le permite crear diseños flexibles y receptivos para páginas web. Con flexbox, puede alinear y distribuir fácilmente elementos dentro de un contenedor. En este ejemplo, el
.container
usos de clasedisplay: flex
para habilitar el modo de diseño flexbox. Eljustify-content
la propiedad está configurada paracenter
para centrar horizontalmente el elemento secundario dentro del contenedor. Elalign-items
la propiedad está configurada paracenter
para centrar verticalmente el elemento secundario. El.item
class establece el color de fondo y el relleno para el elemento secundario.
HTML
<div class="container">
<div class="item">Centered Element</div>
</div>
CO
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
background-color: #ddd;
padding: 20px;
}
Resultado
Elemento centrado
- Diseño de cuadrícula: otro modo de diseño que le permite crear diseños complejos basados en cuadrículas para páginas web. Con la cuadrícula, puede especificar filas y columnas y luego colocar elementos dentro de celdas específicas de la cuadrícula. En este ejemplo, el
.grid-container
usos de clasedisplay: grid
para habilitar el modo de diseño de cuadrícula. Elgrid-template-columns
la propiedad está configurada pararepeat(2, 1fr)
para crear dos columnas de igual ancho. Elgap
La propiedad establece el espacio entre las celdas de la cuadrícula. El.grid-item
class establece el color de fondo y el relleno para los elementos de la cuadrícula.
HTML
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
CO
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
Resultado
Artículo 1
Artículo 2
Artículo 3
Artículo 4
- Transiciones: CSS3 introdujo una serie de nuevas propiedades y técnicas para crear transiciones en páginas web. por ejemplo, el
transition
La propiedad se puede usar para animar los cambios en las propiedades de CSS a lo largo del tiempo. En este ejemplo, el.box
La clase establece el ancho, la altura y el color de fondo inicial del elemento. Eltransition
la propiedad está configurada parabackground-color 0.5s ease
para animar los cambios en la propiedad de color de fondo durante medio segundo con una función de tiempo de entrada y salida gradual. El.box:hover
class cambia el color de fondo del elemento cuando el puntero del mouse está sobre él, lo que activa la animación de transición.
HTML
<div class="box"></div>
CO
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
Resultado
Flotar
Aquí!
Aquí!
- animaciones: CSS3 introdujo una serie de nuevas propiedades y técnicas para crear animaciones en páginas web. En este ejemplo, hemos agregado una animación usando el
animation
propiedad. Hemos definido un@keyframes
regla para la animación, que especifica que el cuadro debe rotar de 0 grados a 90 grados durante una duración de 0.5 segundos. Cuando se pasa el cursor sobre el cuadro, elspin
la animación se aplica para rotar el cuadro. Elanimation-fill-mode
la propiedad está configurada paraforwards
para asegurarse de que el estado final de la animación se mantenga después de que finalice.
HTML
<div class="rotate"></div>
CO
.rotate {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
/* Add animation properties */
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
/* Define the animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(90deg); }
}
.rotate:hover {
animation-name: spin;
}
Resultado
Flotar
Aquí!
Aquí!
- Propiedades personalizadas de CSS: También conocido como Variables CSS, se introdujeron propiedades personalizadas en CSS3. Le permiten definir y usar sus propias propiedades personalizadas en CSS, que se pueden usar para almacenar y reutilizar valores en sus hojas de estilo. Las variables CSS se identifican con un nombre que comienza con dos guiones, como
--my-variable
. En este ejemplo, definimos una variable CSS llamada –primary-color y le damos un valor de#007bff
, que es un color azul comúnmente utilizado como color primario en muchos diseños. Hemos usado esta variable para establecer elbackground-color
propiedad de un elemento de botón, mediante el uso de lavar()
y pasando el nombre de la variable. Esto utilizará el valor de la variable como color de fondo para el botón.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Múltiples Fondos: CSS3 le permite especificar múltiples imágenes de fondo para un elemento, con la capacidad de controlar su posición y orden de apilamiento. El fondo está compuesto por dos imágenes,
red.png
yblue.png
, que se cargan mediante elbackground-image
propiedad. la primera imagen,red.png
, se coloca en la esquina inferior derecha del elemento, mientras que la segunda imagen,blue.png
, se coloca en la esquina superior izquierda del elemento. Elbackground-position
La propiedad se utiliza para controlar el posicionamiento de cada imagen. Elbackground-repeat
La propiedad se utiliza para controlar cómo se repiten las imágenes. la primera imagen,red.png
, está configurado para no repetir (no-repeat
), mientras que la segunda imagen,blue.png
, está configurado para repetir (repeat
).
HTML
<div id="multibackground"></div>
CO
#multibackground {
background-image: url(red.png), url(blue.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 200px;
width: 200px;
}