CSS Scroll Snap Slide Deck que admite codificación en vivo trucos CSS

Las conferencias virtuales han cambiado el juego en términos de cómo un presentador puede entregar contenido a una audiencia. En un evento en vivo, probablemente solo tenga su computadora portátil, pero puede tener varios monitores en casa para poder moverse por las ventanas y hacer cambios fuera de la pantalla cuando proporcione demostraciones de codificación en vivo. Sin embargo, a medida que algunos eventos vuelven a ser personales, es posible que esté en un barco como el mío preguntándose cómo brindar una experiencia en vivo equivalente.

Con un poco de creatividad, utilizando nuestra propia funcionalidad web y CSS moderno, como CSS scroll snap, crearemos una prueba para diapositivas sin JavaScript, que permite la edición en vivo de demostraciones de CSS. El último mazo será receptivo y compartido, gracias a la vida dentro de CodePen.

Para hacer esta plataforma de diapositivas, aprenderemos sobre:

  • Desplazamiento CSS, contadores y diseño de red
  • EN contenteditable atributo
  • Use propiedades personalizadas y HSL para temas
  • texto degradado
  • Formación de <style> elemento

Plantillas de diapositivas

Cuando haces una plataforma de diapositivas con un montón de diapositivas diferentes, probablemente necesitarás otras diferentes. tipos en diapositivas. Entonces crearemos estas tres plantillas principales:

  • Texto: abierto a cualquier texto que necesites incluir
  • Título: enfatizar el título para separar partes del contenido
  • Demostración: diseño separado con bloque de código y vista previa

Plantillas HTML

Comencemos a crear nuestro HTML. Usaremos una lista ordenada con el identificador de slides y continúe y complete el texto y la diapositiva del título.

Cada diapositiva es uno de los elementos de la lista de clase. slideasí como un modificador de clase para especificar el tipo de plantilla. Hemos invertido en estas diapositivas de texto <div> con la clase de content y luego agregue un poco de texto de plantilla.

<ol id="slides">
  <li class="slide slide--text">
    <div class="content">
      <h1>Presentation Title</h1>
      <p>Presented by Your Name</p>
      <p><a target="_blank" href="<https://twitter.com/5t3ph>">@5t3ph</a></p>
    </div>
  </li>
  <li class="slide slide--title">
    <div class="content">
      <h2>Topic 1</h2>
    </div>
  </li>
</ol>

Usamos target="_blank" del enlace porque CodePen usa iframes para la visualización, por lo que debe "escapar" del iframe y cargar el enlace.

Estilos básicos

Luego comenzaremos a agregar algunos estilos. Si usa CodePen, estos estilos asumen que usted No cargando uno de los reset. Nuestro reinicio borra el campo y garantiza <body> el elemento ocupa la altura total disponible, que es todo lo que realmente necesitamos aquí. Y haremos una actualización importante en la pila de fuentes.

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  font-family: system-ui, sans-serif;
  font-size: 1.5rem;
}

Luego definiremos que todos nuestros elementos principales de diseño usarán la red CSS, eliminaremos el estilo de lista de #slidesy haga que cada diapositiva tenga el tamaño de la vista. Finalmente usaremos place-content taquigrafía para centrar slide--text y slide--title contenido de diapositivas.

body,
#slides,
.slide {
  display: grid;
}

#slides {
  list-style: none;
  padding: 0;
  margin: 0;
}

.slide {
  width: 100vw;
  height: 100vh;
}

.slide--text,
.slide--title {
  place-content: center;
}

Luego agregaremos algunos estilos de texto ligeros. Dado que esta pretende ser una presentación con un gran punto, que se realiza de una vez, a diferencia del formato similar al artículo, aumentaremos la base. font-size a 2rem. Asegúrese de ajustar este valor mientras prueba sus diapositivas finales en pantalla completa. Puede decidir que parece demasiado pequeño para su contenido en relación con el tamaño de la ventana de visualización de la presentación.

h1, h2 {
  line-height: 1.1;
}

a {
  color: inherit;
}

.content {
  padding: 2rem;
  font-size: 2rem;
  line-height: 1.5;
}

.content * + * {
  margin-top: 0.5em;
}

.slide--text .content {
  max-width: 40ch;
}

En este punto, tenemos texto grande centrado en un contenedor del tamaño de la vista. Agreguemos un toque de color creando un sistema simple de temas.

Usaremos hsl espacio de color para el tema al establecer una propiedad personalizada de --theme-hue y --theme-saturationEl valor del tono de 230 corresponde al azul. Para facilitar su uso los combinaremos en --theme-hs valor a descartar en instancias de hsl.

:root {
  --theme-hue: 230;
  --theme-saturation: 85%;
  --theme-hs: var(--theme-hue), var(--theme-saturation);
}

Podemos ajustar los valores de brillo para fondos y texto. Las diapositivas se sentirán cohesivas ya que serán tonos de este tono básico.

Volver a nuestro principal <body> estilo, podemos aplicar esta idea para crear una versión muy clara del color de fondo y una versión oscura del texto.

body {
  /* ... existing styles */
  background-color: hsl(var(--theme-hs), 95%);
  color: hsl(var(--theme-hs), 25%);
}
Captura de pantalla de una diapositiva de desplazamiento CSS con el título de la presentación, el orden del autor y la etiqueta en Twitter. El texto es azul oscuro y el fondo es azul claro.

démosle también .slide--title un poco de pizza extra agregando un fondo degradado fino.

.slide--title {
  background-image: 
    linear-gradient(125deg, 
      hsl(var(--theme-hs), 95%), 
      hsl(var(--theme-hs), 75%)
    );
}
Diapositiva con el texto Tema 1 en azul oscuro y un degradado lineal suave que cambia de azul súper claro a azul más brillante, de izquierda a derecha.

Plantilla de diapositiva de demostración

Nuestra diapositiva de demostración rompe el modelo hasta ahora y requiere dos elementos principales:

  • a .style contenedor alrededor incorporado <style> elemento con estilos de escritura reales que pretende ver en la pantalla y aplicar a la demostración
  • a .demo un contenedor para almacenar la inspección de demostración con lo que es apropiado para esta marca

Si usa CodePen para crear este mazo, desea actualizar la configuración de Comportamiento para desactivar Guardar formato. Esto se debe a que no queremos secciones/espacios adicionales antes del bloque de estilo. Es exactamente por eso que quedará claro en un momento.

Artículo Recomendado:  Teclas de acceso: ¿Qué diablos y por qué? | trucos CSS
Captura de pantalla de los paneles de código HTML y CSS de CodePen. El menú de configuración del panel HTML está abierto y resalta el primer elemento, que es Formato HTML.

Aquí está nuestro contenido en la diapositiva de demostración:

<li class="slide slide--demo">
  <div class="style">
  <style contenteditable="true"> 
.modern-container {
  --container-width: 40ch;

  width: min(
    var(--container-width), 100% - 3rem
  );
  margin-inline: auto;
}
  </style>
  </div>
  <div class="demo">
    <div class="modern-container">
      <div class="box">container</div>
    </div>
  </div>
</li>

Tenga en cuenta que ext contenteditable="true" atributo en <style> cuadra. Esta es una función HTML natural que le permite marcar cada elemento como editable. No es un sustituto de la introducción de formularios y áreas de texto y generalmente requiere JavaScript para una funcionalidad más completa. Pero para nuestros propósitos, esta es la magia que permite la codificación "en vivo". Eventualmente, podremos realizar cambios en el contenido aquí y los cambios de estilo surtirán efecto de inmediato. Bastante sofisticado, agárrate fuerte.

Sin embargo, si ve esto hasta ahora, no verá el bloque de estilo que se muestra. Verá el resultado de los estilos de demostración .modern-container que se aplican.

Otra nota pertinente aquí es que HTML5 implica validar un <style> bloquear en todas partes; no solo en <head>.

Lo que haremos a continuación se sentirá extraño, pero en realidad podemos usarlo. display propiedades de <style> para hacerlo visible. Lo ponemos en otro contenedor para usar un poco más de posicionamiento y convertirlo en un área de cambio de tamaño. Entonces preguntamos <style> el elemento mismo para display: block y propiedades adjuntas para darle la apariencia de un editor de código.

.style {
  display: grid;
  align-items: center;
  background-color: hsl(var(--theme-hs), 5%);
  padding-inline: max(5vw, 2rem) 3rem;
  font-size: 1.35rem;
  overflow-y: hidden;
  resize: horizontal;
}

style {
  display: block;
  outline: none;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  color: hsl(var(--theme-hs), 85%);
  background: none;
  white-space: pre;
  line-height: 1.65;
  tab-size: 2;
  hyphens: none;
}

Entonces tenemos que crear .slide--demo regla y use la cuadrícula CSS para mostrar estilos y demostraciones uno al lado del otro. Como recordatorio, ya hemos establecido la fundación. .slide clase de uso de red, por lo que ahora crearemos una regla para grid-template-columns Solo para esta plantilla.

.slide--demo {
  grid-template-columns: fit-content(85ch) 1fr;
}

Si no está familiarizado con la función de red fit-content()permite que un elemento use su ancho inherente hasta el valor máximo definido en la función. Entonces esta regla dice que el bloque de estilo puede crecer hasta un máximo 85ch de ancho. Cuando estás <style> el contenido es angosto, la columna será tan ancha como debería ser. Esto es muy agradable visualmente, ya que no creará espacio horizontal adicional y, en última instancia, seguirá limitando el ancho permitido.

Para completar esta plantilla, agregaremos un pequeño relleno para .demoEs posible que también haya notado esta clase adicional en la demostración .boxEsta es una convención que me gusta usar para demostraciones para proporcionar visualización de los límites de los elementos cuando el tamaño y la posición de algo son importantes.

.demo {
  padding: 2rem;
}

.box {
  background-color: hsl(var(--theme-hs), 85%);
  border: 2px dashed;
  border-radius: .5em;
  padding: 1rem;
  font-size: 1.35rem;
  text-align: center;
}

Aquí está el resultado de nuestra plantilla de código:

Captura de pantalla de una diapositiva que está dividida por la mitad verticalmente, el lado izquierdo con un fondo azul oscuro casi negro y un código que es azul más claro en una fuente mono. El lado derecho tiene un fondo azul claro y un elemento en la parte superior que dice contenedor, con un borde punteado y un fondo azul ligeramente más oscuro.

Función de edición en vivo

¡Interactuar con los estilos mostrados en realidad actualizará la visualización! Además, desde que creamos .style contenedor como un área de cambio de tamaño, puede agarrar el controlador de cambio de tamaño en la esquina inferior derecha para ampliar y contraer el área de vista previa si es necesario.

La única advertencia sobre nuestra capacidad de editar en vivo es que los navegadores lo tratan de manera diferente.

  • Firefox: Esto proporciona el mejor resultado, ya que permite cambiar los estilos cargados y la funcionalidad completa para agregar nuevas propiedades e incluso nuevas reglas.
  • Cromo y Safari: Le permiten cambiar valores en estilos cargados, pero no agregar nuevas propiedades o nuevas reglas.

Probablemente querrá usar Firefox como presentador. En cuanto a los espectadores que usan el enlace a la presentación, aún podrán comprender la intención de sus diapositivas y no deberían tener problemas de visualización (a menos que su navegador admita su código de demostración). Pero fuera de Firefox, es posible que no puedan manipular las demostraciones tan completamente como tú en tu presentación.

Es posible que desee "dividir" su lápiz de presentación listo para usar y eliminar el comportamiento editable <style> bloques y, en su lugar, mostrar las versiones finales de sus estilos de demostración, según corresponda.

Recordatorio: ¡Los estilos que incluye en las demostraciones pueden afectar potencialmente el diseño de su diapositiva y otras demostraciones! Es posible que desee cubrir los estilos de demostración debajo de uno específico de diapositiva. class para evitar cambios de estilo accidentales en su prueba.

Resaltado de código

Aunque no podremos lograr un resaltado de sintaxis completo sin JavaScript, podemos crear un método para subrayar ciertas partes del bloque de código de acento.

Para ello, nos emparejaremos linear-gradient s -webkit propiedades que permiten el uso del fondo del elemento como un efecto de texto Luego, usando propiedades personalizadas, podemos definir cuántas "líneas" del bloque de estilo enfatizar.

Primero pondremos lo necesario -webkit propiedades directamente en <style> elemento. Esto hará que el texto visible desaparezca, pero lo haremos visible después de un tiempo agregando un fondo. Aunque estos son -webkit con un prefijo, son navegador cruzado compatible.

style {
  /* ...existing styles */
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

El efecto de resaltado funcionará creando un linear-gradient con dos colores, donde el color más claro se muestra como el color del texto para marcar las líneas. De forma predeterminada, vincularemos la iluminación a un color más oscuro para que la primera propiedad parezca estar resaltada.

Artículo Recomendado:  Cómo crear una animación activada por desplazamiento con JavaScript básico trucos CSS

Aquí hay una vista previa del efecto inicial:

Una captura de pantalla de primer plano del panel de código en tiempo real en la diapositiva, con la segunda línea de código de color azul más claro que las demás, lo que indica que está resaltada.

Para crear este efecto, necesitamos entender cómo calcular la altura del color de énfasis. <style> las reglas del elemento que ya hemos establecido line-height a 1.65que corresponde a la altura de línea total calculada de 1.65emAsí que podrías pensar que multiplicamos esto por el número de filas y lo llamamos un día.

Sin embargo, debido al estilo de bloque visible que se representa con white-space: pre para preservar los saltos de línea, técnicamente hay una vil línea invisible antes de la primera línea de texto. Esto se crea formateando <style> una etiqueta de línea real antes de la primera línea de código CSS. Es por eso que también noté que es importante evitar el formateo automático en CodePen; de lo contrario, tendrá una adición adicional a la izquierda.

Con estas advertencias en mente, configuraremos tres propiedades personalizadas para ayudar a calcular los valores que necesitamos y los agregaremos al comienzo de nuestro .style conjunto de normas. El final --lines el valor de la altura primero tiene en cuenta esta fila invisible y el selector.

style {
  --line-height: 1.65em;
  --highlight-start: calc(2 * var(--line-height));
  --lines: calc(var(--highlight-start) + var(--num-lines, 1) * var(--line-height));
}

Ahora podemos aplicar los valores para crear linear-gradientPara crear las transiciones nítidas que necesitamos para este efecto, nos aseguramos de que el degradado se detenga de un color a la siguiente coincidencia.

style {
  background-image: linear-gradient(
    hsl(var(--theme-hs), 75%) 0 var(--highlight-start),
    hsl(var(--theme-hs), 90%) var(--highlight-start) var(--lines),
    hsl(var(--theme-hs), 75%) var(--lines) 100%
  );
}

Para ayudarte a visualizar lo que está pasando, comenté -webkit Líneas para revelar el degradado creado.

Una captura de pantalla de primer plano del ejemplo de código en vivo, pero con un fondo azul brillante para revelar un degradado casi blanco que resalta la segunda línea de código.

Dentro de nuestro --lines cálculo, también incluimos un --num-lines propiedad. Esto le permitirá ajustar el número de filas para marcar una demostración utilizando el estilo integrado. Este ejemplo corrige el subrayado de tres líneas:

<style contenteditable="true" style="--num-lines: 3">

También podemos transmitir recalculado --highlight-start para cambiar el orden resaltado original:

<style contenteditable="true" style="--num-lines: 3; --highlight-start: calc(4 * var(--line-height))">

Veamos el resultado de la corrección anterior:

Muestre el ejemplo de código en vivo con las líneas 3 a 6 resaltadas en azul más claro que el resto del código.

Ahora, si agrega o elimina filas durante su presentación, el resaltado no se ajustará. Pero sigue siendo una buena herramienta para ayudar a dirigir la atención de los espectadores.

Hay dos clases útiles que agregaremos para resaltar solo la regla o para eliminar el resaltado en general. Para usar, aplicar directamente a <style> elemento para la demostración.

.highlight--rule-only {
  --highlight-start: calc(1 * var(--line-height))
}

.highlight--none {
  background-image: none;
  background-color: currentColor;
}

Mueva el arrastre haciendo clic en el desplazamiento de CSS

Bien, tenemos algunas diapositivas iniciales atractivas. Pero todavía no me siento como una prueba de diapositivas. Resolveremos esto en dos partes:

  1. Convertir diapositivas horizontalmente
  2. Use el ajuste de desplazamiento de CSS para forzar el desplazamiento de una diapositiva a la vez

Nuestros estilos originales ya han sido definidos #slides lista ordenada como un contenedor de celosía. Para lograr un diseño horizontal, necesitamos agregar una propiedad adicional como .slides ya han incluido dimensiones para llenar la vista.

#slides {
  /* ...existing styles */
  grid-auto-flow: column;
}

Para que funcione la captura de desplazamiento CSS, debemos definir qué eje permite el desbordamiento, por lo que para el desplazamiento horizontal esto es x:

#slides {
  overflow-x: auto;
}

La última propiedad para la que necesitamos hacer clic en desplazarse #slides el contenedor debe ser definido scroll-snap-typeEsta es la abreviatura donde elegimos x eje y mandatory comportamiento, lo que significa que comenzar un desplazamiento siempre debe desencadenar un archivo adjunto al siguiente elemento.

#slides {
  scroll-snap-type: x mandatory;
}

Si lo intentas en este punto, aún no lo experimentarás. comportamiento de intercepción de desplazamiento porque tenemos dos propiedades para agregar al niño .slide artículos usando scroll-snap-align le dice al navegador dónde "adjuntar" y configurar scroll-snap-stopa always evita el desplazamiento más allá de uno de los elementos secundarios.

.slide {
  /* ...existing styles */
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

El comportamiento de intercepción de desplazamiento debería funcionar desplazándose por la diapositiva o usando las teclas de flecha izquierda y derecha.

Hay más propiedades que se pueden configurar para el desplazamiento de CSS al hacer clic en revisar documentos MDN para aprender todo lo que está disponible. El ajuste de desplazamiento de CSS también tiene un comportamiento de navegador cruzado ligeramente diferente para diferentes tipos de entrada, como tocar contra un mouse, o el panel táctil contra la rueda del mouse, o las flechas de la barra de desplazamiento. Para nuestra presentación, si encuentra que el desplazamiento no es muy suave o "hacer clic", intente usar las teclas de flecha en su lugar.

Actualmente no hay forma de personalizar la facilidad o la velocidad de la animación de desplazamiento CSS. Tal vez esto sea importante para usted para su presentación y no necesite las otras características que hemos desarrollado para modificar el código de muestra. en este caso, es posible que desee seleccionar una aplicación de presentación "real".

Artículo Recomendado:  Grandes efectos de cursor CSS que usan recorte de fondo, máscaras y 3D trucos CSS

El desplazamiento de CSS es genial, pero hay algunas advertencias que debe tener en cuenta si planea usarlo fuera del contexto de nuestra prueba de diapositivas. Mira otra demostración de desplazamiento de clics y más información sobre SmolCSS.dev.

Números de diapositivas

Una característica adicional es la adición de números de diapositivas visibles. Usando un contador CSS, podemos obtener el número de la diapositiva actual y mostrarlo como queramos como un valor de pseudo-elemento. Y usando atributos de datos, incluso podemos agregar el tema actual.

El primer paso es dar un nombre a nuestro contador, lo cual se hace a través de counter-reset propiedad. Esto se coloca en el elemento que contiene los elementos que deben contarse, por lo que lo agregaremos a #slides.

#slides {
  counter-reset: slides;
}

Luego, en los elementos a contar (.slide), añadimos counter-increment propiedad y devolución de llamada al nombre del contador que definimos.

.slide {
  counter-increment: slides;
}

Para acceder al número actual estableceremos un pseudo-elemento content propiedad, en counter() función disponible Esta función toma el nombre de nuestro contador y devuelve el número actual.

.slide::before {
  content: counter(slides);
}

Ahora se muestra el número, pero no donde lo queremos. Dado que el contenido de nuestra diapositiva es variable, utilizaremos el posicionamiento absoluto clásico para colocar el número de diapositiva en la esquina inferior izquierda. Y agregaremos algunos estilos visuales para cerrarlo en un pequeño círculo agradable.

.slide::before {
  content: counter(slides);
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  width: 1.65em;
  height: 1.65em;
  display: grid;
  place-content: center;
  border-radius: 50%;
  font-size: 1.25rem;
  color: hsl(var(--theme-hs), 95%);
  background-color: hsl(var(--theme-hs), 55%);
}
Captura de pantalla de la diapositiva de texto que contiene el título, la línea del autor y el manipulador de Twitter. El texto es azul oscuro y el fondo es azul claro. Hay un número uno en blanco en un círculo azul brillante ubicado en la esquina inferior izquierda de la diapositiva que indica el título de la página.

Podemos mejorar los números en nuestras diapositivas tomando un valor de atributo de datos para agregar un título de tema breve. Esto significa agregar primero un atributo a cada <li> elemento donde queremos que esto suceda. Agregaremos data-topic a <li> para diapositivas de demostración para título y código El valor puede ser el que desee, pero las cadenas más cortas se mostrarán mejor.

<li class="slide slide--title" data-topic="CSS">

Usaremos el atributo como selector para cambiar el pseudo-elemento. Podemos obtener el valor usando attr() una función que asociaremos con el número de diapositiva y agregaremos dos puntos al delimitador. Debido a que el elemento anteriormente era un círculo, existen otras propiedades de actualización.

[data-topic]::before {
  content: counter(slides) ": " attr(data-topic);
  padding: 0.25em 0.4em;
  width: auto;
  border-radius: 0.5rem;
}

Con esto agregado, aquí está la diapositiva de demostración del código que muestra el tema CSS agregado:

Captura de pantalla de prueba de diapositivas que muestra la vista dividida con código en vivo a la izquierda y salida a la derecha. El número de página de la diapositiva se muestra en la esquina inferior izquierda e incluye la palabra CSS después del número de página.

Estilos de apariencia pequeña

Nuestras diapositivas ya responden un poco, pero eventualmente habrá problemas con el desplazamiento horizontal de vistas más pequeñas. Mi sugerencia es eliminar el clic de desplazamiento de CSS y dejar que las diapositivas se muevan verticalmente.

Para hacer esto, solo necesitará algunas actualizaciones, incluida la adición de un marco para ayudar a separar el contenido de la diapositiva.

Primero, moveremos las propiedades asociadas con hacer clic en el desplazamiento de CSS #slides en una aplicación de medios para aplicar solo arriba 120ch.

@media screen and (min-width: 120ch) {
  #slides {
    grid-auto-flow: column;
    overflow-x: auto; 
    scroll-snap-type: x mandatory;
  }
}

Luego moveremos las propiedades y dimensiones de desplazamiento de CSS a .slide en esta solicitud de medios.

@media screen and (min-width: 120ch) {
  .slide {
    width: 100vw;
    height: 100vh;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
}

Para ordenar el contenido de demostración, moveremos toda nuestra regla a .slide--demo en esta solicitud de medios:

@media screen and (min-width: 120ch) {
  .slide--demo {
    grid-template-columns: fit-content(85ch) 1fr;
  }
}

Ahora todo está en orden, pero queremos devolver la altura mínima para cada diapositiva y luego agregar el borde que mencioné anteriormente:

@media (max-width: 120ch) {
  .slide {
    min-height: 80vh;
  }

  .slide + .slide {
    border-top: 1px dashed;
  }
}

Su contenido también puede correr el riesgo de desbordar vistas más pequeñas, por lo que haremos algunos ajustes a .content para tratar de prevenir esto. Agregaremos un ancho predeterminado que se usará para vistas pequeñas y moveremos los anteriores max-width restricción en la solicitud de medios También se muestra un método rápido para actualizar el nuestro <h1> utilizar tipo líquido.

h1 {
  font-size: clamp(2rem, 8vw + 1rem, 3.25rem);
}

.content {
  /* remove max-width rule from here */
  width: calc(100vw - 2rem);
}

@media screen and (min-width: 120ch) {
  .content {
    width: unset;
    max-width: 45ch;
  }
}

También descubrí que es útil reposicionar el contador de diapositivas. Para hacer esto, ajustaremos los estilos originales para colocarlo en la esquina superior izquierda, luego lo moveremos de nuevo a la parte inferior de nuestra consulta de medios.

.slide {
  /* adjust default here, removing the old "bottom" value */
  top: 0.25rem;
  left: 0.25rem;
}

@media (min-width: 120ch) {
  .slide::before {
    top: auto;
    bottom: 1rem;
    left: 1rem;
  }
}

Prueba de deslizamiento final

La incrustación probablemente mostrará la versión pequeña ordenada de la ventana gráfica, así que asegúrese de abrir la versión completa en CodePen o cambie a la vista en vivo. Como recordatorio, la función de edición funciona mejor en Firefox.

Si está interesado en ver una plataforma completamente terminada en acción, utilicé esta técnica de presentación. mi kit de herramientas CSS moderno.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

https://kirin-mountainview.com/

https://www.bamboo-thai.com/