¿Cómo usar el elemento de la cuadrícula usando las reglas de ubicación automática de la cuadrícula?

En este artículo, aprenderá a usar elementos de cuadrícula utilizando las reglas de ubicación automática de cuadrícula. Puede usar auto como valor de propiedad en la cuadrícula, ya que permite automáticamente que el contenedor personalice su tamaño en función del contenido de los elementos en la fila o las columnas. Sintaxis: grid-template-rows : auto grid-template-columns: … Continue reading «¿Cómo usar el elemento de la cuadrícula usando las reglas de ubicación automática de la cuadrícula?»

Resolución de valor CSS

La resolución CSS es uno de tipo de datos. Como sugiere el nombre, se utiliza para especificar la resolución, es decir, la densidad de píxeles en el dispositivo de salida. Las resoluciones se utilizan generalmente al escribir consultas de medios. El usuario puede usar la resolución con el prefijo máximo y mínimo mientras escribe la … Continue reading «Resolución de valor CSS»

¿Cómo crear una barra de búsqueda de pantalla completa usando HTML, CSS y JavaScript?

En este artículo, aprenderá cómo crear una barra de búsqueda de pantalla completa. Aquí se le pedirá que cree dos divs . Uno para el contenedor de superposición y el otro para el contenedor de contenido de superposición. Código HTML: El primer paso es crear un archivo HTML. Aquí crearemos la estructura básica para la … Continue reading «¿Cómo crear una barra de búsqueda de pantalla completa usando HTML, CSS y JavaScript?»

CSS | galería de imágenes

La Galería de imágenes se utiliza para almacenar y mostrar una colección de imágenes. Este ejemplo crea una galería de imágenes receptiva usando HTML y CSS. Pasos 1: Creación de una estructura de galería básica Cada galería contiene un número de secciones div. Cada sección div contiene una imagen y su descripción. <div class=»gallery»> <div … Continue reading «CSS | galería de imágenes»

¿Cómo especificar el borde doble usando CSS?

La tarea es especificar el borde doble usando CSS. En este artículo, vamos a utilizar la propiedad border-style para diseñar el borde. Propiedad utilizada: propiedad de estilo de borde : esta propiedad se utiliza para establecer el estilo de los cuatro bordes de un elemento. Acercarse: Cree la página HTML con algunos elementos. Ahora, usando … Continue reading «¿Cómo especificar el borde doble usando CSS?»

Efecto de ventana invertida

Flipping window es un nuevo efecto que se utiliza en los diseños web modernos. Este efecto se utiliza como parte de escaparate, parte de carga y banner revelador. El efecto se basa en cuatro cuadrados que giran a lo largo de los ejes X e Y. El orden de rotación puede ser diferente, es decir, … Continue reading «Efecto de ventana invertida»

Creando Responsive Grid Vanilla usando HTML, CSS y Bootstrap

Muchos sitios web modernos utilizan un sistema de cuadrícula para mostrar fragmentos de datos en su página de inicio y en otras páginas. En gran medida, la cuadrícula se asemeja a una mesa, sin embargo, es mucho más atractiva visualmente y, con mayor frecuencia, muestra elementos hermanos. Una grilla debe ser responsive, es decir, debe … Continue reading «Creando Responsive Grid Vanilla usando HTML, CSS y Bootstrap»

¿Cómo pasar el cursor sobre un elemento de división para cambiar gradualmente el ancho en CSS?

Puede usar la propiedad de transición en CSS para hacer algún efecto de transición como cambiar el ancho de un elemento. El efecto de transición se puede definir en dos estados (desplazamiento y activo) utilizando pseudoclases como: desplazamiento o: activo o clases configuradas dinámicamente mediante JavaScript. Sintaxis:  transition: transition-property transition-duration Nota:  propiedad de transición: t … Continue reading «¿Cómo pasar el cursor sobre un elemento de división para cambiar gradualmente el ancho en CSS?»

Función del selector de CSS

En este artículo, discutiremos cómo el selector de CSS es importante mientras diseñamos la página web. El papel del selector de CSS en la página web receptiva es muy importante. Discutamos uno por uno. Función del selector de niños: en el selector de niños, las propiedades de cualquier elemento son el padre inmediato de otro … Continue reading «Función del selector de CSS»

¿Cómo ocultar y mostrar flechas de diapositivas en un control deslizante elegante?

En esta publicación, crearemos un control deslizante elegante y más adelante le mostraremos cómo mostrar/ocultar los botones del control deslizante deslizante. Para crear un control deslizante elegante, simplemente declare muchos elementos con el mismo nombre de clase. Ejemplo: <!DOCTYPE html> <html>     <body>         <div>             <img class=»mySlides»                   width=»33%»                   src= «https://media.geeksforgeeks.org/wp-content/uploads/20200813101335/1406-7-300×83.png»                   alt=»»                   width=»300″                  height=»83″                   class=»alignnone                          size-medium wp-image-2098786″ /> … Continue reading «¿Cómo ocultar y mostrar flechas de diapositivas en un control deslizante elegante?»