Gonzalo Almanza Segundo

Gonzalo Almanza Segundo

1650615372

Creación De Controles Deslizantes Modernos Con HTML, CSS Y Swiper

Los controles deslizantes son unidades de interfaz de usuario funcionales que organizan piezas de información de manera condensada y cíclica dentro de un espacio limitado. Los controles deslizantes constan de los siguientes componentes:

  • Contenedores, o las cajas que albergan los componentes deslizantes
  • Diapositivas o el área de contenido que incluye texto, imágenes, videos y botones
  • Íconos de navegación que guían a los usuarios a través de las diapositivas
  • Visualizadores de paginación que sirven como navegación adicional, generalmente viñetas o números colocados en la parte inferior del contenedor.

Además, los controles deslizantes están construidos con efectos de transición para evitar cambios abruptos de un bloque de contenido a otro. Construir estos controles deslizantes desde cero y cubrir sus componentes y transición puede ser intimidante. Es por eso que en este artículo usaremos Swiper para crear controles deslizantes táctiles modernos, rápidos, con capacidad de respuesta y nativos (móviles primero) con transiciones sorprendentes.

¿Qué es Swiper?

Swiper es una biblioteca de JavaScript que crea controles deslizantes táctiles modernos con transiciones aceleradas por hardware (utilizando GPU para descargar transiciones con uso intensivo de gráficos y crear imágenes más fluidas) y un excelente comportamiento nativo. Swiper está disponible para JavaScript estándar, Angular, React, Vue.js y Svelte.

Algunos de los mejores sitios web que usan Swiper JS se pueden encontrar aquí .

Swiper es una biblioteca completamente gratuita y de código abierto con más de 30,100 estrellas y 9,600 bifurcaciones en GitHub . Algunas características clave de Swiper incluyen:

  • Diseño de respuesta
  • API enriquecida
  • Imagen de carga diferida
  • agnóstico de la biblioteca
  • Compatible con dispositivos móviles
  • Diseño de diapositivas de varias filas
  • Diseño de caja flexible
  • Diapositivas virtuales para un mejor rendimiento
  • Deslizadores anidados
  • Control total de navegación
  • Efectos de transición (fundido, cubo 3D, desbordamiento 3D, parallax, tarjetas y creatividad)
  • Funciona en iOS, Android y los navegadores de escritorio más recientes
  • Diseño RTL (de derecha a izquierda)
  • Interacción y control del teclado y el mouse
  • observador de mutaciones
  • Auto-reproducción
  • Modo cíclico

Primeros pasos con Swiper

En el momento de escribir este artículo, Swiper se encuentra actualmente en v.8; sin embargo, consulte la guía de migración respectiva para actualizar de Swiper 6 a Swiper 7 o de Swiper 7 a Swiper 8 .

Hay tres opciones para importar Swiper a su proyecto:

  1. Descargue y use los activos de Swiper localmente aquí
  2. Use Swiper como una red de entrega de contenido (CDN) agregando lo siguiente al encabezado y al cuerpo de su archivo HTML, respectivamente:
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>

    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
  1. Instalar desde npm usando el comando de instalación$ npm install swiper

Para este artículo, usaremos la opción dos.

Definición del marcado

El marcado HTML para estructurar la página web de nuestro proyecto, el diseño y su contenido se muestran en la imagen de arriba. El marcado HTML es el siguiente:

 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Swiper Article</title>
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>


</head>
<body>
   <div class="container">
       <!-- Project content container -->
       <div class="project_content">
           <h1>Swiper JS</h1>
           <h2>Building modern sliders with HTML, CSS and Swiper JS</h2>
           <h2>Author: Aboze Brain</h2>
           <p>Bio: Aboze Brain John is a data scientist. He has experience in data science and analytics, software engineering, product research and technical writing</p>
           <p>The code can be found on GitHub <a href="#">here</a> and the article can be found on Logrocket blog <a href="#">here</a></p>
           <p></p>
           <img src="/logrocket.png" alt="logrocket logo">
       </div>
       <!-- Slider main container -->
       <div class="swiper mySwiper">
           <div class="swiper-wrapper">
             <div class="swiper-slide slide_1">Slide 1</div>
             <div class="swiper-slide slide_2">Slide 2</div>
             <div class="swiper-slide slide_3">Slide 3</div>
             <div class="swiper-slide slide_4">Slide 4</div>
             <div class="swiper-slide slide_5">Slide 5</div>
           </div>
         </div>
   </div>


   <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
   <script src="/script.js"></script>
</body>
</html>

En el marcado HTML, puede ver que nuestro proyecto consta de cinco diapositivas. A continuación, diseñemos el marcado HTML predeterminado usando CSS como se muestra a continuación:

/* Import google font (Balsamiq Sans) */
@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');


/* Box sizing rules */
*,
*::before,
*::after {
   box-sizing: border-box;
}


/* Remove default padding and margin */
* {
   padding: 0;
   margin: 0;
}


/* Default anchor tag styling */
a {
   text-decoration: none;
   color: black;
}


a:hover {
   cursor: pointer;
}


/* Default image styling */
img {
   padding: 1rem;
   max-width: 75%;
   height: auto;
}


/* Body styling */
html,
body {
 position: relative;
 height: 100%;
}


body {
   font-family: 'Balsamiq Sans', cursive, "Roboto Mono";
   font-size: 1.2rem;
   text-align:justify;
}


.container {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: 1rem;
}


.container > div {
   top: 25vh;
   height: 50vh;
}


div.project_content {
   padding-top: 25vh;
   justify-items: center;
   align-items: center;
}
.project_content h1,h2, p {
   padding: 0.2rem 1rem;
}


.project_container img {
   height: 75%;
}


/* Swiper container stylng */
.swiper {
   right: 1rem;
   width: 100%;
   height: 100%;
}


.swiper-slide {
   text-align: center;
    /* Center slide text vertically */
   display: -webkit-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center;
}
 .swiper-slide img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }


.slide_1 {
   background-color:#643ca3 ;
}


.slide_2 {
   background-color:#e38364 ;
}


.slide_3 {
   background-color:#faf47a ;
}


.slide_4 {
   background-color:#64e3c1 ;
}


.slide_5 {
   background-color:#9e6ffd ;
}

A continuación, inicializamos Swiper en este proyecto con JavaScript. El JavaScript es el siguiente:

//  Initialize Swiper
let swiper = new Swiper(".mySwiper", {});

Tenga en cuenta que la clase en el contenedor Swiper ".mySwiper"se usa para crear un objeto Swiper en el archivo JavaScript.

Implementación de movimiento y navegación.

Para la página web predeterminada, podemos ver que las cinco diapositivas se superponen entre sí, y no hay forma de ver las diapositivas una a la vez, excepto usando el mouse para deslizar el dedo.

Esta no es la forma más intuitiva o clara de comunicar información. Se supone que los Swipers son herramientas para mostrar mucha información en un espacio pequeño, así que veamos cómo podemos mejorar este sistema con Swiper.

Paginación

Como aprendimos anteriormente, la paginación es solo un conjunto de viñetas o números tradicionales colocados en la parte inferior del contenedor (en este caso, el cuadro que cubre las diapositivas). La paginación muestra cuántos controles deslizantes se superponen en el contenedor.

Se puede implementar fácilmente en los archivos predeterminados que tenemos, haciendo algunos cambios. En el archivo HTML, debemos agregar el contenedor de paginación debajo del contenedor de controles deslizantes de la siguiente manera:

<div class="swiper mySwiper">
           <div class="swiper-wrapper">
             <div class="swiper-slide slide_1">Slide 1</div>
             <div class="swiper-slide slide_2">Slide 2</div>
             <div class="swiper-slide slide_3">Slide 3</div>
             <div class="swiper-slide slide_4">Slide 4</div>
             <div class="swiper-slide slide_5">Slide 5</div>
           </div>
           <div class="swiper-pagination"></div>
</div>

El CSS sigue siendo el mismo, pero debemos realizar cambios en nuestro archivo JavaScript para iniciar el efecto de paginación:

//  Initialize Swiper
let swiper = new Swiper(".mySwiper", {
   pagination: {
     el: ".swiper-pagination",
   },
 });

Ahora, nuestro control deslizante indica cuántas diapositivas tenemos en total y qué diapositiva estamos viendo en este momento.

Navegación

La navegación, al igual que la paginación, sirve como una herramienta para guiar a través de las diapositivas con un clic en lugar de deslizar el mouse. Consiste en una flecha hacia la izquierda y hacia la derecha ubicadas a los lados del contenedor de portaobjetos.

Hagamos los cambios respectivos a nuestros archivos predeterminados. En nuestro archivo HTML, al igual que la paginación, debemos agregar los contenedores de navegación debajo del contenedor de controles deslizantes de la siguiente manera:

<div class="swiper mySwiper">
           <div class="swiper-wrapper">
             <div class="swiper-slide slide_1">Slide 1</div>
             <div class="swiper-slide slide_2">Slide 2</div>
             <div class="swiper-slide slide_3">Slide 3</div>
             <div class="swiper-slide slide_4">Slide 4</div>
             <div class="swiper-slide slide_5">Slide 5</div>
           </div>
           <div class="swiper-button-next"></div>
           <div class="swiper-button-prev"></div>
       </div>

A continuación, debemos agregar algo de estilo a nuestro CSS para el posicionamiento de la flecha (en el centro del contenedor de diapositivas) y eliminar el contorno del componente de flecha de la siguiente manera:

.swiper-button-next,
.swiper-button-prev {
   outline: none;
}


div.swiper-button-next, div.swiper-button-prev {
  top: 70%
}

A continuación, iniciamos el efecto de navegación en nuestro archivo JavaScript de la siguiente manera:

//  Initialize Swiper
let swiper = new Swiper(".mySwiper", {
   navigation: {
     nextEl: ".swiper-button-next",
     prevEl: ".swiper-button-prev",
   },
 });

 

Desplazarse

El desplazamiento ayuda a los controles deslizantes desplazables horizontales simples que se mueven para comenzar de izquierda a derecha. Se puede implementar fácilmente haciendo los siguientes cambios en la configuración predeterminada.

Primero, en el marcado HTML, realizaremos cambios en el contenedor Swiper de la siguiente manera:

<div class="swiper mySwiper">
           <div class="swiper-wrapper">
             <div class="swiper-slide slide_1">Slide 1</div>
             <div class="swiper-slide slide_2">Slide 2</div>
             <div class="swiper-slide slide_3">Slide 3</div>
             <div class="swiper-slide slide_4">Slide 4</div>
             <div class="swiper-slide slide_5">Slide 5</div>
           </div>
           <div class="swiper-scrollbar"></div>
       </div>

A continuación, usando el CSS predeterminado, iniciemos el efecto de desplazamiento en el archivo JavaScript de la siguiente manera:

//  Initialize Swiper
letswiper = new Swiper(".mySwiper", {
 scrollbar: {
   el: ".swiper-scrollbar",
   hide: true,
 },
});

Ahora, puede ver una barra de desplazamiento en la parte inferior de nuestras diapositivas.

Vertical

Vertical significa paginación vertical; la paginación vertical es como la paginación regular que cubrimos anteriormente, pero las viñetas están en una orientación vertical.

El marcado HTML es el mismo que la paginación horizontal, solo necesitamos especificar la orientación en nuestro archivo JavaScript de la siguiente manera:

//  Initialize Swiper
let swiper = new Swiper(".mySwiper", {
 direction: "vertical",
 pagination: {
   el: ".swiper-pagination",
   clickable: true,
   hide: true,
 },
});

Ahora, podemos ver las diapositivas moviéndose hacia arriba y hacia abajo en lugar de de lado a lado.

Anidado

Los controles deslizantes anidados son un poco más complicados. Son una combinación de la visualización horizontal y vertical de los controles deslizantes con paginación para brindarle más información sobre la cantidad de diapositivas en cada eje.

Implementemos esto usando la configuración predeterminada, en nuestro marcado HTML. Se deben realizar los siguientes cambios en el contenedor swiper de la siguiente manera:

<div class="swiper mySwiper swiper-h">
           <div class="swiper-wrapper">
             <div class="swiper-slide slide_1">Horizontal Slide 1</div>
             <div class="swiper-slide slide_2">Horizontal Slide 2</div>
             <div class="swiper-slide">
               <div class="swiper mySwiper2 swiper-v">
                 <div class="swiper-wrapper">
                   <div class="swiper-slide slide_3">Horizontal Slide 3 & Vertical Slide 1</div>
                   <div class="swiper-slide v_slide_2">Vertical Slide 2</div>
                   <div class="swiper-slide v_slide_3">Vertical Slide 3</div>
                 </div>
                 <div class="swiper-pagination"></div>
               </div>
             </div>
             <div class="swiper-slide slide_4">Horizontal Slide 4</div>
           </div>
           <div class="swiper-pagination"></div>
         </div>

A continuación, debemos especificar algunos cambios en nuestro archivo CSS predeterminado para acomodar el color de la diapositiva vertical de la siguiente manera:

.v_slide_2 {
   background-color: #c164e3;
}


.v_slide_3 {
   background-color: #e3c164;
}

Luego, tenemos que iniciar los controles deslizantes verticales y horizontales con paginación en nuestro script de JavaScript:

let swiper = new Swiper(".mySwiper", {
 spaceBetween: 50,
 pagination: {
   el: ".swiper-pagination",
   clickable: true,
 },
});


let swiper2 = new Swiper(".mySwiper2", {
 direction: "vertical",
 spaceBetween: 50,
 pagination: {
   el: ".swiper-pagination",
   clickable: true,
 },
});

Implementación de efectos de transición

Los controles deslizantes en los diseños web se incorporan con una variedad de efectos de transición para evitar cambios abrumadores y abruptos entre bloques de información. Para el contexto de este artículo, nos centraremos en el efecto del cubo y el efecto de las cartas.

efecto cubo

La transición del efecto de cubo hace que las diapositivas parezcan lados de un cubo giratorio. Al cambiar de una diapositiva a la siguiente, el cubo gira para traer la diapositiva deseada al frente.

Para implementar el efecto cubo, en nuestros archivos predeterminados haremos los siguientes cambios.

En nuestro marcado HTML, actualizaremos el contenedor swiper de la siguiente manera:

<div class="swiper mySwiper">
           <div class="swiper-wrapper">
             <div class="swiper-slide slide_1">Slide 1</div>
             <div class="swiper-slide slide_2">Slide 2</div>
             <div class="swiper-slide slide_3">Slide 3</div>
             <div class="swiper-slide slide_4">Slide 4</div>
             <div class="swiper-slide slide_5">Slide 5</div>
           </div>
       </div>

En el CSS, tenemos que hacer algunos cambios en el selector de contenedor de swiper al reducir el tamaño de la diapositiva para acomodar la transición del efecto de la siguiente manera:

.swiper {
   width: 280px;
   height: 320px;
}

A continuación, tenemos que iniciar un efecto de cubo en nuestro archivo JavaScript:

//  Initialize Swiper
let swiper = new Swiper(".mySwiper", {
 effect: "cube",
 grabCursor: true,
 cubeEffect: {
   shadow: true,
   slideShadows: true,
   shadowOffset: 20,
   shadowScale: 0.94,
 },
 pagination: {
   el: ".swiper-pagination",
 },
});

 

Efecto de cartas

Este es un efecto de transición para cambiar entre diapositivas como el cubo de arriba. Con el efecto de las cartas, cada diapositiva parece una carta en una baraja que se baraja para traer la diapositiva deseada al frente.

El HTML y CSS es el mismo que el efecto de cubo, solo cambie el efecto a las tarjetas de la siguiente manera:

//  Initialize Swiper
let swiper = new Swiper(".mySwiper", {
 effect: "cards",
 grabCursor: true,
});

 

Implementación de controles deslizantes para galerías de imágenes.

En esta sección, veremos algunos controles deslizantes que son ideales para imágenes o galerías. En mi opinión, dos excelentes opciones para los controles deslizantes de la galería son las galerías de miniaturas y la carga diferida, que aprenderemos a implementar en las siguientes secciones.

Galerías de miniaturas

Este control deslizante consta de una imagen de vista previa comprimida del original que se utiliza como marcador de posición. La imagen en miniatura debe ser más pequeña que la original, pero el tamaño exacto depende de usted. Este control deslizante crea un módulo de galería de miniaturas simple para contener contenido y también funciona como un medio de navegación.

Usando la configuración predeterminada, podemos implementar esto haciendo cambios en nuestro marcado HTML predeterminado de la siguiente manera:

<div class="swiper-container">
           <div class="swiper mySwiper2">
               <div class="swiper-wrapper">
                   <div class="swiper-slide slide_1">Slide 1</div>
                   <div class="swiper-slide slide_2">Slide 2</div>
                   <div class="swiper-slide slide_3">Slide 3</div>
                   <div class="swiper-slide slide_4">Slide 4</div>
                   <div class="swiper-slide slide_5">Slide 5</div>
               </div>
               <div class="swiper-button-next"></div>
               <div class="swiper-button-prev"></div>
           </div>


           <div thumbsSlider="" class="swiper mySwiper">
               <div class="swiper-wrapper">
                   <div class="swiper-slide slide_1">Slide 1</div>
                   <div class="swiper-slide slide_2">Slide 2</div>
                   <div class="swiper-slide slide_3">Slide 3</div>
                   <div class="swiper-slide slide_4">Slide 4</div>
                   <div class="swiper-slide slide_5">Slide 5</div>
               </div>
           </div>
 </div>

A continuación, debemos realizar cambios en nuestro CSS en el control deslizante y las miniaturas dentro de nuestro contenedor de swiper de la siguiente manera:

div.swiper-container {
   padding-top: 25vh;
}


.swiper-slide {
   display: flex;
   align-items: center;
   justify-content: center;
}


.swiper {
   width: 480px;
}


.mySwiper2 {
   width: 480px;
   height: 320px;
}


.mySwiper {
   height: 30%;
   box-sizing: border-box;
   margin: 10px;
}


.mySwiper .swiper-slide {
   opacity: 0.4;
}


.swiper-slide {
   background-position: center;
}


.mySwiper .swiper-slide-thumb-active {
   opacity: 1;
}

Luego, iniciamos los controles deslizantes de la galería de miniaturas en nuestro archivo JavaScript predeterminado:

//  Initialize Swiper
let swiper = new Swiper(".mySwiper", {
 spaceBetween: 10,
 slidesPerView: 4,
 freeMode: true,
 watchSlidesProgress: true,
});


let swiper2 = new Swiper(".mySwiper2", {
 spaceBetween: 10,
 navigation: {
   nextEl: ".swiper-button-next",
   prevEl: ".swiper-button-prev",
 },
 thumbs: {
   swiper: swiper,
 },
});

Carga lenta

La carga diferida es una estrategia que retrasa la carga o la inicialización de los recursos hasta que realmente se necesitan para reducir el tiempo de carga de la página y ahorrar recursos del sistema. Imagínese a un usuario descargando toda la galería en el caso de uso anterior, pero el usuario se va después de ver solo la primera diapositiva; da como resultado un desperdicio de memoria y ancho de banda.

La carga diferida se produce en las interacciones de algunos usuarios, como la navegación y el desplazamiento. Para ver el efecto de carga diferida, usaremos imágenes de Pexels .

Para comenzar, en el archivo HTML predeterminado, realice los siguientes cambios en el contenedor del control deslizante de la siguiente manera:

div class="swiper mySwiper">
           <div class="swiper-wrapper">
              <div class="swiper-slide">
               <img data-src="https://images.pexels.com/photos/1824273/pexels-photo-1824273.jpeg?cs=srgb&dl=pexels-victor-miyata-1824273.jpg&fm=jpg"
               class="swiper-lazy"/>
              </div>
              <div class="swiper-slide">
               <img data-src="https://images.pexels.com/photos/3219549/pexels-photo-3219549.jpeg?cs=srgb&dl=pexels-engin-akyurt-3219549.jpg&fm=jpg"
               class="swiper-lazy"/>
              </div>
              <div class="swiper-slide">
               <img data-src="https://images.pexels.com/photos/1579240/pexels-photo-1579240.jpeg?cs=srgb&dl=pexels-stas-knop-1579240.jpg&fm=jpg"
               class="swiper-lazy"/>
              </div>
              <div class="swiper-slide">
               <img data-src="https://images.pexels.com/photos/51415/pexels-photo-51415.jpeg?cs=srgb&dl=pexels-max-deroin-51415.jpg&fm=jpg"
               class="swiper-lazy"/>
              </div>
           </div>


           <div class="swiper-button-next"></div>
           <div class="swiper-button-prev"></div>
           <div class="swiper-pagination"></div>
       </div>

En el archivo CSS predeterminado, elimine todos los estilos relacionados con la clase swiper y agregue el siguiente estilo:

.swiper {
   width: 70%;
   --swiper-navigation-color: #000000;
   --swiper-pagination-color: #000000;
}


.swiper-slide img {
   width: auto;
   height: auto;
   max-width: 85%;
   max-height: 100%;
   -ms-transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   position: absolute;
   left: 50%;
   top: 50%;
 }

A continuación, debemos iniciar el efecto de carga diferida en nuestro archivo JavaScript de la siguiente manera:

let swiper = new Swiper(".mySwiper", {
 lazy: true,
 pagination: {
   el: ".swiper-pagination",
   clickable: true,
 },
 navigation: {
   nextEl: ".swiper-button-next",
   prevEl: ".swiper-button-prev",
 },
});

Controles personalizados

Estos controles son solo algunas formas de navegar por las diapositivas. Son relativamente simples de implementar, solo necesitamos especificarlos en el archivo JavaScript para que surtan efecto. Veamos tres de los más populares.

Primero está el control del teclado. Este control utiliza las teclas de navegación del teclado (teclas de flecha o WASD) para controlar el desplazamiento de las diapositivas. Se puede iniciar agregando lo siguiente al objeto swiper de la siguiente manera:

    keyboard: {
       enabled: true,
     },

El segundo es el control de la rueda del mouse: este control ayuda a navegar por las diapositivas mediante el desplazamiento del mouse. Esto es ideal para controles deslizantes verticales, ya que la rueda del mouse puede desplazarse rápidamente por el contenido. Se puede iniciar agregando lo siguiente al objeto swiper en JavaScript:

    mousewheel: true,

En tercer y último lugar está agarrar el cursor. Este es un control intuitivo que permite que el cursor del mouse tome contenido y lo mueva en diferentes direcciones para navegar a través de las diapositivas. Se puede inicializar en el JavaScript de la siguiente manera:

    grabCursor: true,

Conclusión

Los controles deslizantes son unidades importantes de diseño web que merecen una atención especial. A pesar de sus ventajas en la gestión de contenidos en un espacio, tienen algunas desventajas, como inhibir las estrategias de SEO y crear errores de UX. Los controles deslizantes son una cuestión de preferencia personal y, cuando se implementan de manera eficiente, pueden producir una impresión favorable. Swiper te facilita hacerlos, en caso de que decidas incluirlos en tu próximo proyecto.

Fuente: https://blog.logrocket.com/building-modern-sliders-html-css-swiper/ 

#css #html 

What is GEEK

Buddha Community

Creación De Controles Deslizantes Modernos Con HTML, CSS Y Swiper
Gonzalo Almanza Segundo

Gonzalo Almanza Segundo

1650615372

Creación De Controles Deslizantes Modernos Con HTML, CSS Y Swiper

Los controles deslizantes son unidades de interfaz de usuario funcionales que organizan piezas de información de manera condensada y cíclica dentro de un espacio limitado. Los controles deslizantes constan de los siguientes componentes:

  • Contenedores, o las cajas que albergan los componentes deslizantes
  • Diapositivas o el área de contenido que incluye texto, imágenes, videos y botones
  • Íconos de navegación que guían a los usuarios a través de las diapositivas
  • Visualizadores de paginación que sirven como navegación adicional, generalmente viñetas o números colocados en la parte inferior del contenedor.

Además, los controles deslizantes están construidos con efectos de transición para evitar cambios abruptos de un bloque de contenido a otro. Construir estos controles deslizantes desde cero y cubrir sus componentes y transición puede ser intimidante. Es por eso que en este artículo usaremos Swiper para crear controles deslizantes táctiles modernos, rápidos, con capacidad de respuesta y nativos (móviles primero) con transiciones sorprendentes.

¿Qué es Swiper?

Swiper es una biblioteca de JavaScript que crea controles deslizantes táctiles modernos con transiciones aceleradas por hardware (utilizando GPU para descargar transiciones con uso intensivo de gráficos y crear imágenes más fluidas) y un excelente comportamiento nativo. Swiper está disponible para JavaScript estándar, Angular, React, Vue.js y Svelte.

Algunos de los mejores sitios web que usan Swiper JS se pueden encontrar aquí .

Swiper es una biblioteca completamente gratuita y de código abierto con más de 30,100 estrellas y 9,600 bifurcaciones en GitHub . Algunas características clave de Swiper incluyen:

  • Diseño de respuesta
  • API enriquecida
  • Imagen de carga diferida
  • agnóstico de la biblioteca
  • Compatible con dispositivos móviles
  • Diseño de diapositivas de varias filas
  • Diseño de caja flexible
  • Diapositivas virtuales para un mejor rendimiento
  • Deslizadores anidados
  • Control total de navegación
  • Efectos de transición (fundido, cubo 3D, desbordamiento 3D, parallax, tarjetas y creatividad)
  • Funciona en iOS, Android y los navegadores de escritorio más recientes
  • Diseño RTL (de derecha a izquierda)
  • Interacción y control del teclado y el mouse
  • observador de mutaciones
  • Auto-reproducción
  • Modo cíclico

Primeros pasos con Swiper

En el momento de escribir este artículo, Swiper se encuentra actualmente en v.8; sin embargo, consulte la guía de migración respectiva para actualizar de Swiper 6 a Swiper 7 o de Swiper 7 a Swiper 8 .

Hay tres opciones para importar Swiper a su proyecto:

  1. Descargue y use los activos de Swiper localmente aquí
  2. Use Swiper como una red de entrega de contenido (CDN) agregando lo siguiente al encabezado y al cuerpo de su archivo HTML, respectivamente:
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>

    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
  1. Instalar desde npm usando el comando de instalación$ npm install swiper

Para este artículo, usaremos la opción dos.

Definición del marcado

El marcado HTML para estructurar la página web de nuestro proyecto, el diseño y su contenido se muestran en la imagen de arriba. El marcado HTML es el siguiente:

 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Swiper Article</title>
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>


</head>
<body>
   <div class="container">
       <!-- Project content container -->
       <div class="project_content">
           <h1>Swiper JS</h1>
           <h2>Building modern sliders with HTML, CSS and Swiper JS</h2>
           <h2>Author: Aboze Brain</h2>
           <p>Bio: Aboze Brain John is a data scientist. He has experience in data science and analytics, software engineering, product research and technical writing</p>
           <p>The code can be found on GitHub <a href="#">here</a> and the article can be found on Logrocket blog <a href="#">here</a></p>
           <p></p>
           <img src="/logrocket.png" alt="logrocket logo">
       </div>
       <!-- Slider main container -->
       <div class="swiper mySwiper">
           <div class="swiper-wrapper">
             <div class="swiper-slide slide_1">Slide 1</div>
             <div class="swiper-slide slide_2">Slide 2</div>
             <div class="swiper-slide slide_3">Slide 3</div>
             <div class="swiper-slide slide_4">Slide 4</div>
             <div class="swiper-slide slide_5">Slide 5</div>
           </div>
         </div>
   </div>


   <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
   <script src="/script.js"></script>
</body>
</html>

En el marcado HTML, puede ver que nuestro proyecto consta de cinco diapositivas. A continuación, diseñemos el marcado HTML predeterminado usando CSS como se muestra a continuación:

/* Import google font (Balsamiq Sans) */
@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');


/* Box sizing rules */
*,
*::before,
*::after {
   box-sizing: border-box;
}


/* Remove default padding and margin */
* {
   padding: 0;
   margin: 0;
}


/* Default anchor tag styling */
a {
   text-decoration: none;
   color: black;
}


a:hover {
   cursor: pointer;
}


/* Default image styling */
img {
   padding: 1rem;
   max-width: 75%;
   height: auto;
}


/* Body styling */
html,
body {
 position: relative;
 height: 100%;
}


body {
   font-family: 'Balsamiq Sans', cursive, "Roboto Mono";
   font-size: 1.2rem;
   text-align:justify;
}


.container {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: 1rem;
}


.container > div {
   top: 25vh;
   height: 50vh;
}


div.project_content {
   padding-top: 25vh;
   justify-items: center;
   align-items: center;
}
.project_content h1,h2, p {
   padding: 0.2rem 1rem;
}


.project_container img {
   height: 75%;
}


/* Swiper container stylng */
.swiper {
   right: 1rem;
   width: 100%;
   height: 100%;
}


.swiper-slide {
   text-align: center;
    /* Center slide text vertically */
   display: -webkit-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center;
}
 .swiper-slide img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }


.slide_1 {
   background-color:#643ca3 ;
}


.slide_2 {
   background-color:#e38364 ;
}


.slide_3 {
   background-color:#faf47a ;
}


.slide_4 {
   background-color:#64e3c1 ;
}


.slide_5 {
   background-color:#9e6ffd ;
}

A continuación, inicializamos Swiper en este proyecto con JavaScript. El JavaScript es el siguiente:

//  Initialize Swiper
let swiper = new Swiper(".mySwiper", {});

Tenga en cuenta que la clase en el contenedor Swiper ".mySwiper"se usa para crear un objeto Swiper en el archivo JavaScript.

Implementación de movimiento y navegación.

Para la página web predeterminada, podemos ver que las cinco diapositivas se superponen entre sí, y no hay forma de ver las diapositivas una a la vez, excepto usando el mouse para deslizar el dedo.

Esta no es la forma más intuitiva o clara de comunicar información. Se supone que los Swipers son herramientas para mostrar mucha información en un espacio pequeño, así que veamos cómo podemos mejorar este sistema con Swiper.

Paginación

Como aprendimos anteriormente, la paginación es solo un conjunto de viñetas o números tradicionales colocados en la parte inferior del contenedor (en este caso, el cuadro que cubre las diapositivas). La paginación muestra cuántos controles deslizantes se superponen en el contenedor.

Se puede implementar fácilmente en los archivos predeterminados que tenemos, haciendo algunos cambios. En el archivo HTML, debemos agregar el contenedor de paginación debajo del contenedor de controles deslizantes de la siguiente manera:

<div class="swiper mySwiper">
           <div class="swiper-wrapper">
             <div class="swiper-slide slide_1">Slide 1</div>
             <div class="swiper-slide slide_2">Slide 2</div>
             <div class="swiper-slide slide_3">Slide 3</div>
             <div class="swiper-slide slide_4">Slide 4</div>
             <div class="swiper-slide slide_5">Slide 5</div>
           </div>
           <div class="swiper-pagination"></div>
</div>

El CSS sigue siendo el mismo, pero debemos realizar cambios en nuestro archivo JavaScript para iniciar el efecto de paginación:

//  Initialize Swiper
let swiper = new Swiper(".mySwiper", {
   pagination: {
     el: ".swiper-pagination",
   },
 });

Ahora, nuestro control deslizante indica cuántas diapositivas tenemos en total y qué diapositiva estamos viendo en este momento.

Navegación

La navegación, al igual que la paginación, sirve como una herramienta para guiar a través de las diapositivas con un clic en lugar de deslizar el mouse. Consiste en una flecha hacia la izquierda y hacia la derecha ubicadas a los lados del contenedor de portaobjetos.

Hagamos los cambios respectivos a nuestros archivos predeterminados. En nuestro archivo HTML, al igual que la paginación, debemos agregar los contenedores de navegación debajo del contenedor de controles deslizantes de la siguiente manera:

<div class="swiper mySwiper">
           <div class="swiper-wrapper">
             <div class="swiper-slide slide_1">Slide 1</div>
             <div class="swiper-slide slide_2">Slide 2</div>
             <div class="swiper-slide slide_3">Slide 3</div>
             <div class="swiper-slide slide_4">Slide 4</div>
             <div class="swiper-slide slide_5">Slide 5</div>
           </div>
           <div class="swiper-button-next"></div>
           <div class="swiper-button-prev"></div>
       </div>

A continuación, debemos agregar algo de estilo a nuestro CSS para el posicionamiento de la flecha (en el centro del contenedor de diapositivas) y eliminar el contorno del componente de flecha de la siguiente manera:

.swiper-button-next,
.swiper-button-prev {
   outline: none;
}


div.swiper-button-next, div.swiper-button-prev {
  top: 70%
}

A continuación, iniciamos el efecto de navegación en nuestro archivo JavaScript de la siguiente manera:

//  Initialize Swiper
let swiper = new Swiper(".mySwiper", {
   navigation: {
     nextEl: ".swiper-button-next",
     prevEl: ".swiper-button-prev",
   },
 });

 

Desplazarse

El desplazamiento ayuda a los controles deslizantes desplazables horizontales simples que se mueven para comenzar de izquierda a derecha. Se puede implementar fácilmente haciendo los siguientes cambios en la configuración predeterminada.

Primero, en el marcado HTML, realizaremos cambios en el contenedor Swiper de la siguiente manera:

<div class="swiper mySwiper">
           <div class="swiper-wrapper">
             <div class="swiper-slide slide_1">Slide 1</div>
             <div class="swiper-slide slide_2">Slide 2</div>
             <div class="swiper-slide slide_3">Slide 3</div>
             <div class="swiper-slide slide_4">Slide 4</div>
             <div class="swiper-slide slide_5">Slide 5</div>
           </div>
           <div class="swiper-scrollbar"></div>
       </div>

A continuación, usando el CSS predeterminado, iniciemos el efecto de desplazamiento en el archivo JavaScript de la siguiente manera:

//  Initialize Swiper
letswiper = new Swiper(".mySwiper", {
 scrollbar: {
   el: ".swiper-scrollbar",
   hide: true,
 },
});

Ahora, puede ver una barra de desplazamiento en la parte inferior de nuestras diapositivas.

Vertical

Vertical significa paginación vertical; la paginación vertical es como la paginación regular que cubrimos anteriormente, pero las viñetas están en una orientación vertical.

El marcado HTML es el mismo que la paginación horizontal, solo necesitamos especificar la orientación en nuestro archivo JavaScript de la siguiente manera:

//  Initialize Swiper
let swiper = new Swiper(".mySwiper", {
 direction: "vertical",
 pagination: {
   el: ".swiper-pagination",
   clickable: true,
   hide: true,
 },
});

Ahora, podemos ver las diapositivas moviéndose hacia arriba y hacia abajo en lugar de de lado a lado.

Anidado

Los controles deslizantes anidados son un poco más complicados. Son una combinación de la visualización horizontal y vertical de los controles deslizantes con paginación para brindarle más información sobre la cantidad de diapositivas en cada eje.

Implementemos esto usando la configuración predeterminada, en nuestro marcado HTML. Se deben realizar los siguientes cambios en el contenedor swiper de la siguiente manera:

<div class="swiper mySwiper swiper-h">
           <div class="swiper-wrapper">
             <div class="swiper-slide slide_1">Horizontal Slide 1</div>
             <div class="swiper-slide slide_2">Horizontal Slide 2</div>
             <div class="swiper-slide">
               <div class="swiper mySwiper2 swiper-v">
                 <div class="swiper-wrapper">
                   <div class="swiper-slide slide_3">Horizontal Slide 3 & Vertical Slide 1</div>
                   <div class="swiper-slide v_slide_2">Vertical Slide 2</div>
                   <div class="swiper-slide v_slide_3">Vertical Slide 3</div>
                 </div>
                 <div class="swiper-pagination"></div>
               </div>
             </div>
             <div class="swiper-slide slide_4">Horizontal Slide 4</div>
           </div>
           <div class="swiper-pagination"></div>
         </div>

A continuación, debemos especificar algunos cambios en nuestro archivo CSS predeterminado para acomodar el color de la diapositiva vertical de la siguiente manera:

.v_slide_2 {
   background-color: #c164e3;
}


.v_slide_3 {
   background-color: #e3c164;
}

Luego, tenemos que iniciar los controles deslizantes verticales y horizontales con paginación en nuestro script de JavaScript:

let swiper = new Swiper(".mySwiper", {
 spaceBetween: 50,
 pagination: {
   el: ".swiper-pagination",
   clickable: true,
 },
});


let swiper2 = new Swiper(".mySwiper2", {
 direction: "vertical",
 spaceBetween: 50,
 pagination: {
   el: ".swiper-pagination",
   clickable: true,
 },
});

Implementación de efectos de transición

Los controles deslizantes en los diseños web se incorporan con una variedad de efectos de transición para evitar cambios abrumadores y abruptos entre bloques de información. Para el contexto de este artículo, nos centraremos en el efecto del cubo y el efecto de las cartas.

efecto cubo

La transición del efecto de cubo hace que las diapositivas parezcan lados de un cubo giratorio. Al cambiar de una diapositiva a la siguiente, el cubo gira para traer la diapositiva deseada al frente.

Para implementar el efecto cubo, en nuestros archivos predeterminados haremos los siguientes cambios.

En nuestro marcado HTML, actualizaremos el contenedor swiper de la siguiente manera:

<div class="swiper mySwiper">
           <div class="swiper-wrapper">
             <div class="swiper-slide slide_1">Slide 1</div>
             <div class="swiper-slide slide_2">Slide 2</div>
             <div class="swiper-slide slide_3">Slide 3</div>
             <div class="swiper-slide slide_4">Slide 4</div>
             <div class="swiper-slide slide_5">Slide 5</div>
           </div>
       </div>

En el CSS, tenemos que hacer algunos cambios en el selector de contenedor de swiper al reducir el tamaño de la diapositiva para acomodar la transición del efecto de la siguiente manera:

.swiper {
   width: 280px;
   height: 320px;
}

A continuación, tenemos que iniciar un efecto de cubo en nuestro archivo JavaScript:

//  Initialize Swiper
let swiper = new Swiper(".mySwiper", {
 effect: "cube",
 grabCursor: true,
 cubeEffect: {
   shadow: true,
   slideShadows: true,
   shadowOffset: 20,
   shadowScale: 0.94,
 },
 pagination: {
   el: ".swiper-pagination",
 },
});

 

Efecto de cartas

Este es un efecto de transición para cambiar entre diapositivas como el cubo de arriba. Con el efecto de las cartas, cada diapositiva parece una carta en una baraja que se baraja para traer la diapositiva deseada al frente.

El HTML y CSS es el mismo que el efecto de cubo, solo cambie el efecto a las tarjetas de la siguiente manera:

//  Initialize Swiper
let swiper = new Swiper(".mySwiper", {
 effect: "cards",
 grabCursor: true,
});

 

Implementación de controles deslizantes para galerías de imágenes.

En esta sección, veremos algunos controles deslizantes que son ideales para imágenes o galerías. En mi opinión, dos excelentes opciones para los controles deslizantes de la galería son las galerías de miniaturas y la carga diferida, que aprenderemos a implementar en las siguientes secciones.

Galerías de miniaturas

Este control deslizante consta de una imagen de vista previa comprimida del original que se utiliza como marcador de posición. La imagen en miniatura debe ser más pequeña que la original, pero el tamaño exacto depende de usted. Este control deslizante crea un módulo de galería de miniaturas simple para contener contenido y también funciona como un medio de navegación.

Usando la configuración predeterminada, podemos implementar esto haciendo cambios en nuestro marcado HTML predeterminado de la siguiente manera:

<div class="swiper-container">
           <div class="swiper mySwiper2">
               <div class="swiper-wrapper">
                   <div class="swiper-slide slide_1">Slide 1</div>
                   <div class="swiper-slide slide_2">Slide 2</div>
                   <div class="swiper-slide slide_3">Slide 3</div>
                   <div class="swiper-slide slide_4">Slide 4</div>
                   <div class="swiper-slide slide_5">Slide 5</div>
               </div>
               <div class="swiper-button-next"></div>
               <div class="swiper-button-prev"></div>
           </div>


           <div thumbsSlider="" class="swiper mySwiper">
               <div class="swiper-wrapper">
                   <div class="swiper-slide slide_1">Slide 1</div>
                   <div class="swiper-slide slide_2">Slide 2</div>
                   <div class="swiper-slide slide_3">Slide 3</div>
                   <div class="swiper-slide slide_4">Slide 4</div>
                   <div class="swiper-slide slide_5">Slide 5</div>
               </div>
           </div>
 </div>

A continuación, debemos realizar cambios en nuestro CSS en el control deslizante y las miniaturas dentro de nuestro contenedor de swiper de la siguiente manera:

div.swiper-container {
   padding-top: 25vh;
}


.swiper-slide {
   display: flex;
   align-items: center;
   justify-content: center;
}


.swiper {
   width: 480px;
}


.mySwiper2 {
   width: 480px;
   height: 320px;
}


.mySwiper {
   height: 30%;
   box-sizing: border-box;
   margin: 10px;
}


.mySwiper .swiper-slide {
   opacity: 0.4;
}


.swiper-slide {
   background-position: center;
}


.mySwiper .swiper-slide-thumb-active {
   opacity: 1;
}

Luego, iniciamos los controles deslizantes de la galería de miniaturas en nuestro archivo JavaScript predeterminado:

//  Initialize Swiper
let swiper = new Swiper(".mySwiper", {
 spaceBetween: 10,
 slidesPerView: 4,
 freeMode: true,
 watchSlidesProgress: true,
});


let swiper2 = new Swiper(".mySwiper2", {
 spaceBetween: 10,
 navigation: {
   nextEl: ".swiper-button-next",
   prevEl: ".swiper-button-prev",
 },
 thumbs: {
   swiper: swiper,
 },
});

Carga lenta

La carga diferida es una estrategia que retrasa la carga o la inicialización de los recursos hasta que realmente se necesitan para reducir el tiempo de carga de la página y ahorrar recursos del sistema. Imagínese a un usuario descargando toda la galería en el caso de uso anterior, pero el usuario se va después de ver solo la primera diapositiva; da como resultado un desperdicio de memoria y ancho de banda.

La carga diferida se produce en las interacciones de algunos usuarios, como la navegación y el desplazamiento. Para ver el efecto de carga diferida, usaremos imágenes de Pexels .

Para comenzar, en el archivo HTML predeterminado, realice los siguientes cambios en el contenedor del control deslizante de la siguiente manera:

div class="swiper mySwiper">
           <div class="swiper-wrapper">
              <div class="swiper-slide">
               <img data-src="https://images.pexels.com/photos/1824273/pexels-photo-1824273.jpeg?cs=srgb&dl=pexels-victor-miyata-1824273.jpg&fm=jpg"
               class="swiper-lazy"/>
              </div>
              <div class="swiper-slide">
               <img data-src="https://images.pexels.com/photos/3219549/pexels-photo-3219549.jpeg?cs=srgb&dl=pexels-engin-akyurt-3219549.jpg&fm=jpg"
               class="swiper-lazy"/>
              </div>
              <div class="swiper-slide">
               <img data-src="https://images.pexels.com/photos/1579240/pexels-photo-1579240.jpeg?cs=srgb&dl=pexels-stas-knop-1579240.jpg&fm=jpg"
               class="swiper-lazy"/>
              </div>
              <div class="swiper-slide">
               <img data-src="https://images.pexels.com/photos/51415/pexels-photo-51415.jpeg?cs=srgb&dl=pexels-max-deroin-51415.jpg&fm=jpg"
               class="swiper-lazy"/>
              </div>
           </div>


           <div class="swiper-button-next"></div>
           <div class="swiper-button-prev"></div>
           <div class="swiper-pagination"></div>
       </div>

En el archivo CSS predeterminado, elimine todos los estilos relacionados con la clase swiper y agregue el siguiente estilo:

.swiper {
   width: 70%;
   --swiper-navigation-color: #000000;
   --swiper-pagination-color: #000000;
}


.swiper-slide img {
   width: auto;
   height: auto;
   max-width: 85%;
   max-height: 100%;
   -ms-transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   position: absolute;
   left: 50%;
   top: 50%;
 }

A continuación, debemos iniciar el efecto de carga diferida en nuestro archivo JavaScript de la siguiente manera:

let swiper = new Swiper(".mySwiper", {
 lazy: true,
 pagination: {
   el: ".swiper-pagination",
   clickable: true,
 },
 navigation: {
   nextEl: ".swiper-button-next",
   prevEl: ".swiper-button-prev",
 },
});

Controles personalizados

Estos controles son solo algunas formas de navegar por las diapositivas. Son relativamente simples de implementar, solo necesitamos especificarlos en el archivo JavaScript para que surtan efecto. Veamos tres de los más populares.

Primero está el control del teclado. Este control utiliza las teclas de navegación del teclado (teclas de flecha o WASD) para controlar el desplazamiento de las diapositivas. Se puede iniciar agregando lo siguiente al objeto swiper de la siguiente manera:

    keyboard: {
       enabled: true,
     },

El segundo es el control de la rueda del mouse: este control ayuda a navegar por las diapositivas mediante el desplazamiento del mouse. Esto es ideal para controles deslizantes verticales, ya que la rueda del mouse puede desplazarse rápidamente por el contenido. Se puede iniciar agregando lo siguiente al objeto swiper en JavaScript:

    mousewheel: true,

En tercer y último lugar está agarrar el cursor. Este es un control intuitivo que permite que el cursor del mouse tome contenido y lo mueva en diferentes direcciones para navegar a través de las diapositivas. Se puede inicializar en el JavaScript de la siguiente manera:

    grabCursor: true,

Conclusión

Los controles deslizantes son unidades importantes de diseño web que merecen una atención especial. A pesar de sus ventajas en la gestión de contenidos en un espacio, tienen algunas desventajas, como inhibir las estrategias de SEO y crear errores de UX. Los controles deslizantes son una cuestión de preferencia personal y, cuando se implementan de manera eficiente, pueden producir una impresión favorable. Swiper te facilita hacerlos, en caso de que decidas incluirlos en tu próximo proyecto.

Fuente: https://blog.logrocket.com/building-modern-sliders-html-css-swiper/ 

#css #html 

anita maity

anita maity

1618667723

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.

Demo

#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css

Alisha Larkin

Alisha Larkin

1617789060

HTML Tutorial For Beginners

The prospect of learning HTML can seem confusing at first: where to begin, what to learn, the best ways to learn — it can be difficult to get started. In this article, we’ll explore the best ways for learning HTML to assist you on your programming journey.

What is HTML?

Hypertext Markup Language (HTML) is the standard markup language for documents meant to be displayed in a web browser. Along with Cascading Style Sheets (CSS) and JavaScript, HTML completes the trio of essential tools used in creating modern web documents.

HTML provides the structure of a webpage, from the header and footer sections to paragraphs of text, videos, and images. CSS allows you to set the visual properties of different HTML elements, like changing colors, setting the order of blocks on the screen, and defining which elements to display. JavaScript automates changes to HTML and CSS, for example, making the font larger in a paragraph when a user clicks a button on the page.

#html #html-css #html-fundamentals #learning-html #html-css-basics #html-templates

anita maity

anita maity

1621077133

Responsive Footer Design using HTML, CSS & Bootstrap

Hello Readers, welcome to my other blog, today in this blog I’m going to create a Responsive Footer by using HTML & CSS only. Earlier I have shared How to create a Responsive Navigation Menu and now it’s time to create a footer section.

As you can see on the image which is given on the webpage. There are various important topics there like About us, Our services and subscribes, some social media icons, and a contact section for easy connection. I want to tell you that it is fully responsive. Responsive means this program is fit in all screen devices like tablet, small screen laptop, or mobile devices.

Live Demo


#responsive footer html css template #footer design in html #simple footer html css code #simple responsive footer codepen #responsive footer code in html and css #responsive footer html css codepen

Alayna Rippin

Alayna Rippin

1603188000

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

This evolved into the idea of making a visual CSS cheatsheet with all (most) of the common patterns we see everyday and one of the best possible conceptual implementation for them.

In the end any layout could and should be split into parts/blocks and we see every block separately.

Here is our first take on that and we would be happy to keep extending it to help us all.

Please, send you suggestions in the comments in community or via gitlab for the repeated CSS patterns with your favourite implementation for that so that we will all together make this as useful as it can be.

#css #css3 #cascading-style-sheets #web-development #html-css #css-grids #learning-css #html-css-basics