ytr3d3 द्वारा एक कोड

अनुशंसित

16 February 2025

कोडपेन होम सीएसएस अनंत स्क्रॉल गैलरी

HTML

CSS

.gallery {
  --z: 32px;  /* control the zig-zag  */
  --s: 360px; /* control the size */
  --g: 8px;   /* control the gap */
  
  display: grid;
  gap: var(--g);
  width: calc(2*var(--s) + var(--g));
  grid-auto-flow: column;
}
.gallery > img {
  width: 0;
  min-width: calc(100% + var(--z)/2);
  height: var(--s);
  object-fit: cover;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  cursor: pointer;
  transition: .5s;
}
.gallery > img:hover {
  width: calc(var(--s)/2);
}
.gallery > img:first-child {
  place-self: start;
  clip-path: polygon(calc(2*var(--z)) 0,100% 0,100% 100%,0 100%);
  --mask: 
    conic-gradient(from -135deg at right,#0000,#000 1deg 89deg,#0000 90deg) 
      50%/100% calc(2*var(--z)) repeat-y;
}
.gallery > img:last-child {
  place-self: end;
  clip-path: polygon(0 0,100% 0,calc(100% - 2*var(--z)) 100%,0 100%);
  --mask: 
    conic-gradient(from   45deg at left ,#0000,#000 1deg 89deg,#0000 90deg) 
      50% calc(50% - var(--z))/100% calc(2*var(--z)) repeat-y;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #333333;
}
h1 {
  text-align: center;
  font-family: system-ui, sans-serif;
  font-size: 3rem;
  word-spacing: .8em;
}
h1 span:first-child {
  color: #af3817;
}
h1 span:last-child {
  color: #0b3fa1;
}

ytr3d3 द्वारा एक कोड

अनुशंसित

NotYoEA द्वारा एक कोड

रिएक्ट नेटफ्लिक्स लैंडिंग पेज

कोडपेन होम सीएसएस अनंत स्क्रॉल गैलरी

HTML

CSS

JS

अनुशंसित

NotYoEA द्वारा एक कोड

रिएक्ट नेटफ्लिक्स लैंडिंग पेज

कोडपेन होम सीएसएस अनंत स्क्रॉल गैलरी

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS