Introducción
Los sliders son una serie de marcos que permiten desplazarse secuencialmente. Los marcos de un slider pueden ser imágenes, vídeos o incluso elementos HTML (como descripciones o comentarios). Los sliders están presentes en muchos sitios web modernos. Los desarrolladores los utilizan cuando necesitan transmitir información sobre el sitio web sin que ocupe demasiado espacio.
Por ejemplo, supongamos que un desarrollador está desarrollando un sitio web de productos y podría querer mostrar testimonios o reseñas al usuario para que confíe en ellos y compre su producto. El desarrollador puede crear un slider donde los usuarios puedan explorar y leer fácilmente cada reseña. Lo mismo puede hacerse con las imágenes del producto: un desarrollador puede crear un slider con imágenes del producto para que el usuario tenga una vista de 360 grados del mismo.
Requisitos previos
Aprenderemos a crear un slider de imágenes CSS básico usando HTML, CSS y JavaScript. Para comprender completamente qué sucede y qué hacemos, hay ciertos conceptos que debes conocer de antemano. Analicémoslos.
- HTML: Debes tener conocimientos básicos de HTML, como elementos y etiquetas. Usaremos diversas etiquetas y elementos para crear un slider, por lo que debes saber la función de cada etiqueta o elemento en nuestro slider.
- CSS: Usaremos CSS extensamente para crear el slider. Debes conocer varios conceptos intermedios de CSS, como apilamiento, índice z, posición y animaciones. Todos estos serán necesarios para crear el slider.
- JavaScript: Debes conocer los conceptos básicos de JavaScript, como la declaración de variables, el uso de bucles for y la manipulación del DOM. Estos se utilizan para manipular el control deslizante y crear efectos.
Una vez que te familiarices con todos estos conceptos, crearemos un control deslizante. Repasaremos cada concepto paso a paso y explicaremos por qué hacemos lo que hacemos.
Paso 1: Crea un diseño básico de control deslizante de imágenes usando código HTML
Creemos la estructura básica de nuestro slider. Como ya explicamos, los sliders son una colección de marcos. Crearemos un slider de imágenes CSS.
Primero, creamos el div principal que contiene las imágenes y la funcionalidad del slider. También añadimos algunos estilos, como cambiar el color de fondo y configurar la altura y el ancho del div principal.
<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>
</style>
</head>
<body>
<div id="parent-container">
<!-- This div will contain all images and buttons we will be using for Slider
-->
</div>
</body>
</html>Una vez hecho esto, pasemos a la siguiente parte.
Paso 2: Agregar botones Anterior y Siguiente
Los controles deslizantes tienen dos botones: anterior y siguiente. Estos se utilizan para navegar por los marcos. Añadiremos botones básicos a nuestra sección principal. Estos botones ayudarán al usuario a navegar por las imágenes del carrusel. Para simplificar, usaremos < y > como texto de los botones, que representan anterior y siguiente, respectivamente.
Además de añadir los botones HTML básicos, también los ajustaremos ligeramente para que estén alineados verticalmente con respecto al div central. Esto facilita el desplazamiento por el control deslizante. Usaremos posicionamiento relativo para alinear verticalmente los botones.
<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>
body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;
}
.navigation-buttons .previous {
position: absolute;
z-index: 10;
font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}
.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}
.navigation-buttons .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}
.navigation .nav-btn:hover {
background: white;
}
</style>
</head>
<body>
<div id="parent-container">
<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>
</div>
</body>
</html>Producción
Paso 3: Agrega las imágenes y el texto necesarios al control deslizante
Una vez añadidos los botones, es hora de añadir las imágenes. Usaremos las imágenes de flores para crear un slider de imágenes CSS. Las imágenes se apilarán unas sobre otras mediante la posición y el índice z. Como solo necesitamos que una imagen sea visible, usaremos una clase base y estableceremos su visibilidad como visible. El resto de las imágenes se ocultarán para evitar que se muestren al usuario.
El control deslizante también incluye texto que muestra la imagen que el usuario está viendo. Esto le permite hacerse una idea de cuántas imágenes hay en el carrusel y su orden.
<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>
body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;
}
.navigation-buttons .previous {
position: absolute;
z-index: 10;
font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}
.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}
.navigation-buttons .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}
.navigation .nav-btn:hover {
background: white;
}
.slider-carousel {
margin-top: 20px;
transition: all 0.3s ease;
}
.slider-carousel img {
width: 100%;
transition: all 0.3s ease;
border:8px solid white;
}
.images {
position: absolute;
display: none;
}
.main {
display: block;
}
.image-text {
position: absolute;
bottom: 0;
width: 103%;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.3);
height: 35px;
}
</style>
</head>
<body>
<div id="parent-container">
<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>
<div class="slider-carousel">
<div class="images main">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg" alt="flower 1" />
<div class="image-text">Image 1</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg" alt="flower 2" />
<div class="image-text">Image 2</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="flower 3" />
<div class="image-text">Image 3</div>
</div>
</div>
</div>
</body>
</html>
Producción
Paso 4: Habilite los dos botones mediante código JavaScript
Hemos creado nuestra clase de control deslizante y le hemos añadido todas las imágenes. Ahora necesitamos habilitar los botones anterior y siguiente. Usaremos JavaScript.
Primero, necesitamos agregar un detector de eventos a estos botones. Cada vez que el usuario haga clic en el botón anterior o siguiente, se realizará una acción relacionada con ese botón. ¿Cómo lo haremos?
Hemos usado la clase principal para indicar qué imagen debe ser visible para el usuario. Necesitamos controlar qué imagen tiene esta clase. Cualquier otra imagen se ocultará y solo la imagen con la clase principal será visible para el usuario. Para lograr esto, usaremos la manipulación del DOM. La manipulación del DOM nos permite eliminar la clase principal de una imagen existente y añadirla a una nueva.
Para determinar qué imagen debe tener la clase principal, usamos los detectores de eventos de los botones "Anterior" y "Siguiente". Primero, necesitamos obtener todas las imágenes del control deslizante. Vemos que el carrusel principal tiene una división de imágenes. Podemos obtener esto usando el Selector de Consultas en el DOM. Una vez que tengamos todos los divs de imagen, debemos seleccionar el apropiado y agregarle la clase principal. El resto no tendrá una clase principal y, por lo tanto, serán invisibles para el usuario. Podemos inicializar una variable que inicialmente apunte a 0. Esta variable nos indica qué imagen es visible actualmente para el usuario. Cada vez que el usuario hace clic en "Siguiente" o "Anterior", incrementamos o decrementamos el valor de la variable según corresponda. Si el valor es 0 y el usuario hace clic en el valor anterior, cambiamos el valor a (número de imágenes en el div - 1). De igual forma, si la variable está en la última imagen y el usuario hace clic en "Siguiente", cambiamos el valor a 0.
<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>
body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;
}
.navigation-buttons .previous {
position: absolute;
z-index: 10;
font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}
.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}
.navigation-buttons .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}
.navigation .nav-btn:hover {
background: white;
}
.slider-carousel {
margin-top: 20px;
transition: all 0.3s ease;
}
.slider-carousel img {
width: 100%;
transition: all 0.3s ease;
border:8px solid white;
}
.images {
position: absolute;
display: none;
}
.main {
display: block;
}
.image-text {
position: absolute;
bottom: 0;
width: 103%;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.3);
height: 35px;
}
</style>
</head>
<body>
<div id="parent-container">
<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>
<div class="slider-carousel">
<div class="images main">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg" alt="flower 1" />
<div class="image-text">Image 1</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg" alt="flower 2" />
<div class="image-text">Image 2</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="flower 3" />
<div class="image-text">Image 3</div>
</div>
</div>
</div>
<script>
const previous = document.querySelector('.previous');
const next = document.querySelector('.next');
const images = document.querySelector('.slider-carousel').children;
const totalImages = images.length;
let currentIndex = 0;
// Event Listeners to previous and next buttons
previous.addEventListener('click', () => {
previousImage()
})
next.addEventListener('click', () => {
nextImage();
})
// Function to go to next Image
function nextImage(){
images[currentIndex].classList.remove('main');
if(currentIndex == totalImages-1){
currentIndex = 0;
}
else{
currentIndex++;
}
images[currentIndex].classList.add('main');
}
// Function to go to previous Image
function previousImage(){
images[currentIndex].classList.remove('main');
if(currentIndex == 0){
currentIndex = totalImages-1;
}
else{
currentIndex--;
}
images[currentIndex].classList.add('main');
}
</script>
</body>
</html>
Producción
Felicitaciones, ha creado un control deslizante CSS utilizando HTML, CSS y JavaScript.
Función de presentación de diapositivas
Nuestro control deslizante actualmente funciona de forma manual. Es decir, la imagen no cambia hasta que el usuario hace clic en el botón anterior o siguiente. Sin embargo, la mayoría de los controles deslizantes disponibles en línea no funcionan así. Tienen un efecto de presentación que les permite cambiar de fotograma automáticamente después de un tiempo determinado.
También podemos hacer esto en nuestro control deslizante. Con JavaScript, podemos usar la función setInterval, que llama automáticamente a la siguiente función después de un tiempo especificado. Esto permite que el control deslizante funcione automáticamente y cambie de estado después del tiempo especificado.
<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>
body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;
}
.navigation-buttons .previous {
position: absolute;
z-index: 10;
font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}
.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}
.navigation-buttons .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}
.navigation .nav-btn:hover {
background: white;
}
.slider-carousel {
margin-top: 20px;
transition: all 0.3s ease;
}
.slider-carousel img {
width: 100%;
transition: all 0.3s ease;
border:8px solid white;
}
.images {
position: absolute;
display: none;
}
.main {
display: block;
}
.image-text {
position: absolute;
bottom: 0;
width: 103%;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.3);
height: 35px;
}
</style>
</head>
<body>
<div id="parent-container">
<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>
<div class="slider-carousel">
<div class="images main">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg" alt="flower 1" />
<div class="image-text">Image 1</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg" alt="flower 2" />
<div class="image-text">Image 2</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="flower 3" />
<div class="image-text">Image 3</div>
</div>
</div>
</div>
<script>
const previous = document.querySelector('.previous');
const next = document.querySelector('.next');
const images = document.querySelector('.slider-carousel').children;
const totalImages = images.length;
let currentIndex = 0;
// Event Listeners to previous and next buttons
previous.addEventListener('click', () => {
previousImage()
})
next.addEventListener('click', () => {
nextImage();
})
setInterval(()=>{
nextImage();
},1000);
// Function to go to next Image
function nextImage(){
images[currentIndex].classList.remove('main');
if(currentIndex == totalImages-1){
currentIndex = 0;
}
else{
currentIndex++;
}
images[currentIndex].classList.add('main');
}
// Function to go to previous Image
function previousImage(){
images[currentIndex].classList.remove('main');
if(currentIndex == 0){
currentIndex = totalImages-1;
}
else{
currentIndex--;
}
images[currentIndex].classList.add('main');
}
</script>
</body>
</html>
Producción
Puntos de navegación
Además de usar un título o texto de imagen en tu slider, también puedes usar botones de navegación. Estos botones funcionan de forma similar al texto o al título: indican al usuario en qué marco se encuentra. Se utilizan en muchos sliders modernos por su comodidad y facilidad de creación. Suelen ser botones de opción.
La ventaja de usar puntos de navegación es que permiten al usuario acceder a cada fotograma del control deslizante sin complicaciones. A diferencia de un control deslizante tradicional, donde el usuario debe acceder a cada imagen individualmente, los puntos de navegación permiten visitar cada fotograma o imagen haciendo clic en el punto correspondiente.
El principio básico de los puntos de navegación es similar al de las imágenes deslizantes. La imagen actual tendrá un botón de navegación correspondiente con una clase activa. Tras cambiar la imagen, la clase activa se mueve o se añade a la imagen actual y al punto de navegación actual.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.images {display: none}
img {
vertical-align: middle;
width:100%;
}
/* Slideshow container */
.carousel-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.previous, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit seethrough */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* The dots/bullets/indicators */
.navigation-dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .navigation-dot:hover {
background-color: #717171;
}
</style>
</head>
<body>
<div class="carousel-container">
<div class="images fade">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg">
</div>
<div class="images fade">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg">
</div>
<div class="images fade">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg">
</div>
<!-- Previous and Next Buttons -->
<a class="previous" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- Navigation Dots-->
<div style="text-align:center">
<span class="navigation-dot" onclick="currentSlide(1)"></span>
<span class="navigation-dot" onclick="currentSlide(2)"></span>
<span class="navigation-dot" onclick="currentSlide(3)"></span>
</div>
<script>
var currentIndex = 1;
//Show current image
showSlides(currentIndex);
//Function to move Next
function plusSlides(n) {
showSlides(currentIndex += n);
}
//Function to move back
function currentSlide(n) {
showSlides(currentIndex = n);
}
//Initiate moving of slides
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("images");
var dots = document.getElementsByClassName("navigation-dot");
if (n > slides.length) {currentIndex = 1}
if (n < 1) {currentIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[currentIndex-1].style.display = "block";
dots[currentIndex-1].className += " active";
}
</script>
</body>
</html>
Producción
Ejemplo alternativo
Los controles deslizantes creados con JavaScript funcionan correctamente siempre que JavaScript esté habilitado en el navegador. En cuanto el usuario desactive JavaScript, el control deslizante dejará de funcionar, ya que utiliza JavaScript para su funcionalidad.
No necesitas usar JavaScript para crear un slider. Incluso puedes crear uno usando solo HTML y CSS. Solo necesitas entender cómo funciona cuando el usuario hace clic en el botón anterior o siguiente. Un slider creado con HTML y CSS consume menos memoria del navegador y funcionará incluso si JavaScript está deshabilitado.
Puedes usar sus atributos y propiedades para crear una clase activa. Para el botón de navegación, puedes crear una clase activa que funcione al hacer clic o pasar el cursor sobre él. Esto funciona de forma similar a JavaScript; sin embargo, en lugar de manipular el DOM, usaremos funciones CSS como "target", etc.
Hemos creado un slider de ejemplo con HTML y CSS. Usamos clases pseudoactivas como check para determinar en qué punto de navegación ha hecho clic el usuario recientemente. Luego, mostramos la imagen al usuario según corresponda. Para cada imagen, configuramos el margen y el relleno, ya que no las ocultamos.
<!DOCTYPE html>
<html>
<head>
<title> Slider using HTML and CSS </title>
<style>
img{
height:100%;
width:100%;
}
#frame {
margin: 0 auto;
height:400px;
width: 600px;
max-width: 100%;
}
#frame input[type=radio] {
display: none;
}
#frame label {
cursor: pointer;
text-decoration: none;
}
#slides {
padding: 10px;
background: #00F;
position: relative;
z-index: 1;
}
#overflow {
width: 100%;
overflow: hidden;
}
#frame1:checked~#slides .inner {
margin-left: 0;
}
#frame2:checked~#slides .inner {
margin-left: -100%;
}
#frame3:checked~#slides .inner {
margin-left: -200%;
}
#slides .inner {
transition: margin-left 800ms
cubic-bezier(0.770, 0.000, 0.175, 1.000);
width: 400%;
line-height: 0;
height: 300px;
}
#slides .frame {
width: 25%;
float: left;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: black;
}
#controls {
margin: -180px 0 0 0;
width: 100%;
height: 50px;
z-index: 3;
position: relative;
}
#controls label {
transition: opacity 0.2s ease-out;
display: none;
width: 50px;
height: 50px;
opacity: .4;
}
#controls label:hover {
opacity: 1;
}
/* active class for images*/
#frame1:checked~#controls label:nth-child(2),
#frame2:checked~#controls label:nth-child(3),
#frame3:checked~#controls label:nth-child(1){
float: right;
margin: 0 -50px 0 0;
display: block;
}
/* active class for navigation button*/
#frame1:checked~#controls label:nth-last-child(2),
#frame2:checked~#controls label:nth-last-child(3),
#frame3:checked~#controls label:nth-last-child(1){
float: left;
margin: 0 0 0 -50px;
display: block;
}
#bullets {
margin: 150px 0 0;
text-align: center;
}
#bullets label {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 100%;
background: #ccc;
margin: 0 10px;
}
#frame1:checked~#bullets label:nth-child(1),
#frame2:checked~#bullets label:nth-child(2),
#frame3:checked~#bullets label:nth-child(3){
background: #444;
}
</style>
</head>
<body>
<div id="frame">
<input type="radio" name="frame" id="frame1" checked />
<input type="radio" name="frame" id="frame2" />
<input type="radio" name="frame" id="frame3" />
<div id="slides">
<div id="overflow">
<div class="inner">
<div class="frame">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg">
</div>
<div class="frame">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg">
</div>
<div class="frame">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg">
</div>
</div>
</div>
</div>
<div id="controls">
<label for="frame1"></label>
<label for="frame2"></label>
<label for="frame3"></label>
</div>
<div id="bullets">
<label for="frame1"></label>
<label for="frame2"></label>
<label for="frame3"></label>
</div>
</div>
</body>
</html>Producción
Resultado
- Los controles deslizantes son una serie de marcos donde se puede desplazarse por cada marco en secuencia.
- Hoy en día se utilizan en muchos sitios web para mostrar comentarios o testimonios.
- Para crear un control deslizante, el usuario debe conocer conceptos como etiquetas HTML, conceptos CSS como apilamiento, posicionamiento, etc., y JavaScript básico como variables y manipulación DOM.
- Los controles deslizantes funcionan con una clase activa que se muestra activa. El resto de los marcos se muestran desactivados. Cuando el usuario pasa el cursor sobre un botón o punto, modificamos el elemento que tiene la clase activa mediante manipulación del DOM.
- Si el usuario no tiene JavaScript habilitado en el navegador, el control deslizante no funcionará.
- Puedes usar solo HTML y CSS para crear un control deslizante. Esto ahorra memoria del navegador y tiempo de procesamiento. Además, funciona en cualquier navegador compatible con HTML y CSS.
