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 clase display: flex para habilitar el modo de diseño flexbox. El justify-content la propiedad está configurada para center para centrar horizontalmente el elemento secundario dentro del contenedor. El align-items la propiedad está configurada para center 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 clase display: grid para habilitar el modo de diseño de cuadrícula. El grid-template-columns la propiedad está configurada para repeat(2, 1fr) para crear dos columnas de igual ancho. El gap 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. El transition la propiedad está configurada para background-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í!
  • 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, el spin la animación se aplica para rotar el cuadro. El animation-fill-mode la propiedad está configurada para forwards 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í!
  • 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 el background-color propiedad de un elemento de botón, mediante el uso de la var() 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 y blue.png, que se cargan mediante el background-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. El background-position La propiedad se utiliza para controlar el posicionamiento de cada imagen. El background-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;
    }

    Resultado

    Douglas Karr

    Douglas Karr es CMO de AbrirINSIGHTS y el fundador de la Martech Zone. Douglas ha ayudado a docenas de nuevas empresas exitosas de MarTech, ha colaborado en la diligencia debida de más de $5 mil millones en adquisiciones e inversiones de Martech y continúa ayudando a las empresas a implementar y automatizar sus estrategias de ventas y marketing. Douglas es un orador y experto en transformación digital y MarTech reconocido internacionalmente. Douglas también es autor de una guía para principiantes y de un libro sobre liderazgo empresarial.

    Artículos Relacionados

    Volver al botón superior
    Cerrar

    Adblock detectado

    Martech Zone puede proporcionarle este contenido sin costo porque monetizamos nuestro sitio a través de ingresos publicitarios, enlaces de afiliados y patrocinios. Le agradeceríamos que elimine su bloqueador de anuncios mientras visita nuestro sitio.