Webleb - Snippets de Código -

Publique Seu Código

Recomendado

25 November 2025

Menu de contexto de vidro neon com seletor de cores

14 December 2024

<!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>Webleb</title>
  <link rel="stylesheet" href="/css/styles.css">

</head>
<body>
  <div class="slider" x-data="{start: true, end: false}" style="padding-top: 150px;">
    <div class="slider__content" x-ref="slider" x-on:scroll.debounce="$refs.slider.scrollLeft == 0 ? start = true : start = false; Math.abs(($refs.slider.scrollWidth - $refs.slider.offsetWidth) - $refs.slider.scrollLeft) < 5 ? end = true : end = false;">
      <div class="slider__item">
        <img class="slider__image" src="/img/dragon-scales.svg" alt="Image">
        <div class="slider__info">
          <h2>Card 1</h2>
        </div>
      </div>
      <div class="slider__item">
        <img class="slider__image" src="/img/flat-mountains.png" alt="Image">
        <div class="slider__info">
          <h2>Card 2</h2>
        </div>
      </div>
      <div class="slider__item">
        <img class="slider__image" src="/img/pattern_japanese-pattern-2_1_2_0-0_0_1__ffffff00_000000.png" alt="Image">
        <div class="slider__info">
          <h2>Card 3</h2>
        </div>
      </div>
      <div class="slider__item">
        <img class="slider__image" src="/img/pattern_japanese-pattern-3_1_5_0-0_0_1__2a2b37_c5c4ca.png" alt="Image">
        <div class="slider__info">
          <h2>Card 4</h2>
        </div>
      </div>
      <div class="slider__item">
        <img class="slider__image" src="/img/dragon-scales (3).svg" alt="Image">
        <div class="slider__info">
          <h2>Card 5</h2>
        </div>
      </div>
      <div class="slider__item">
        <img class="slider__image" src="/img/liquid-cheese.png" alt="Image">
        <div class="slider__info">
          <h2>Card 6</h2>
        </div>
      </div>
      <div class="slider__item">
        <img class="slider__image" src="/img/pattern_circles-1_1_16_0-0_0_1__2a2b37_ffeba8_ffeba8.png" alt="Image">
        <div class="slider__info">
          <h2>Card 7</h2>
        </div>
      </div>
      <div class="slider__item">
        <img class="slider__image" src="/img/dragon-scales (2).svg" alt="Image">
        <div class="slider__info">
          <h2>Card 8</h2>
        </div>
      </div>
      <div class="slider__item">
        <img class="slider__image" src="/img/protruding-squares.png" alt="Image">
        <div class="slider__info">
          <h2>Card 9</h2>
        </div>
      </div>
      <div class="slider__item">
        <img class="slider__image" src="/img/radiant-gradient.png" alt="Image">
        <div class="slider__info">
          <h2>Card 10</h2>
        </div>
      </div>
    </div>
    <div class="slider__nav" style="display: flex;justify-content: center;">
      <button class="slider__nav__button" x-on:click="$refs.slider.scrollBy({left: $refs.slider.offsetWidth * -1, behavior: 'smooth'});" x-bind:class="start ? '' : 'slider__nav__button--active'">Previous</button>
      <button class="slider__nav__button" x-on:click="$refs.slider.scrollBy({left: $refs.slider.offsetWidth, behavior: 'smooth'});" x-bind:class="end ? '' : 'slider__nav__button--active'">Next</button>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.10.2/cdn.js"></script>
</body>
</html>

styles.css

:root {
  --scrollcolor: #fff;
  --scrollbackground: #141e27;
}
* {
  box-sizing: border-box;
}
html, body {
  padding: 0;
  margin: 0;
  height: 100vh;
}
body {
  background: #203239;
}
.title {
  font-size: 2.5rem;
  font-family: system-ui;
  line-height: 1.1;
  font-weight: 300;
  color: #fff;
  margin: 4rem auto 1rem;
  width: 85%;
  max-width: 1280px;
}
.slider {
  width: 85%;
  max-width: 1280px;
  margin: 0 auto;
}
.slider__content {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  display: flex;
  gap: 1rem;
  padding-bottom: 1rem;
  scrollbar-color: var(--scrollcolor) var(--scrollbackground);
}
.slider__content::-webkit-scrollbar {
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 1rem;
  background: var(--scrollbackground);
}
.slider__content::-webkit-scrollbar-thumb {
  border-radius: 1rem;
  background: var(--scrollcolor);
}
.slider__content::-webkit-scrollbar-track {
  border-radius: 1rem;
  background: var(--scrollbackground);
}
.slider__item {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 100%;
  width: 100%;
  border-radius: 0.25rem;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1;
}
@media (min-width: 460px) {
  .slider__item {
    aspect-ratio: 0.6666666667;
    min-width: calc((100% / 2) - 2rem);
 }
}
@media (min-width: 940px) {
  .slider__item {
    min-width: calc((100% / 3) - 4rem);
 }
}
.slider__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.slider__info {
  position: relative;
  padding: 4rem 2rem 2rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(32, 50, 57, 0));
}
.slider__info h2 {
  color: #fff;
  font-family: system-ui;
  line-height: 1.1;
  font-weight: 300;
  font-size: 1.75rem;
  margin: 0;
}
.slider__nav {
  margin: 1rem 0 4rem;
  width: 100%;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
  align-content: center;
  align-items: center;
  pointer-events: none;
}
@media (min-width: 460px) {
  .slider__nav {
    justify-content: flex-end;
 }
}
.slider__nav__button {
  margin: 0;
  appearance: none;
  border: 0;
  border-radius: 2rem;
  background: #fff;
  color: #203239;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  line-height: 1;
  pointer-events: none;
  transition: 0.2s ease-out;
  opacity: 0.25;
}
.slider__nav__button--active {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

Recomendado

Estrada dos Zumbis

Menu de contexto de vidro neon com seletor de cores

Poema

index.html

styles.css

main.js

Recomendado

Estrada dos Zumbis

Menu de contexto de vidro neon com seletor de cores

Poema

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js