A Pen by Taha Shashtari on CodePen.
Patil-143
Patil-143
/ index.html
Created
December 14, 2023 06:10
Sticky Nav with Smooth Scrolling and Progress Bar - CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <header> | |
| <nav> | |
| <a href="#css">CSS</a> | |
| <a href="#html">HTML</a> | |
| <a href="#js">JS</a> | |
| <a href="#php">PHP</a> | |
| <a href="#sql">SQL</a> | |
| </nav> | |
| </header> |
Patil-143
/ glassmorphism-3d-houdini-magic-orbit-chrome-safari-firefox.markdown
Created
December 14, 2023 06:10
Glassmorphism + 3D: Houdini 🎩🐇 magic 🪄✨ orbit (✅ Chrome, 🪲 Safari, ❌ Firefox)
CSS-ing this Dribbble animation.
The concept behind the 3D part is something I detailed in an article well over 5 years ago!
Works as expected in Chromium browsers.
Doesn't work in Firefox because, as of October 2023, we cannot animate custom properties registered via @property. That's hopefully going to change... soonish? But even so, it's still broken in Firefox dues to bug 🪲 1816561 (preserve-3d on parent breaks backdrop-filter).
Patil-143
/ css-animated-glow-button.markdown
Created
December 14, 2023 06:09
CSS Animated Glow Button
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Neumorphic buttons</h1> | |
| <div class="buttons"> | |
| <button class="neumorphic active"> | |
| <i class="fa-light fa-fire"></i> | |
| <span>Button 1</span> | |
| </button> | |
| <button class="neumorphic"> | |
| <i class="fa-light fa-dna"></i> | |
| <span>Button 2</span> | |
| </button> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .board | |
| p#error error | |
| p#code 404 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <div class="loading"> | |
| <span style="--i:1;"></span> | |
| <span style="--i:2;"></span> | |
| <span style="--i:3;"></span> | |
| <span style="--i:4;"></span> | |
| <span style="--i:5;"></span> | |
| <span style="--i:6;"></span> | |
| <span style="--i:7;"></span> | |
| <span style="--i:8;"></span> |
Patil-143
/ happy-halloween-parallax-effect-slider.markdown
Created
December 14, 2023 06:06
Happy Halloween - Parallax Effect & Slider
Happy Halloween!
In this pen, a parallax effect is provided by using GreenSock. It also contains a slider by Swiper and on the slider, the glitch effect is used on titles and images. Images on the slider were created by AI.
A Pen by Ecem Gokdogan on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="content"> | |
| <div class="cam"></div> | |
| <div class="cam"></div> | |
| <div class="cam"></div> | |
| <div class="cam"></div> | |
| <div class="cam"></div> | |
| <div class="cam"></div> | |
| <div class="cam"></div> | |
| <div class="cam"></div> | |
| <div class="cam"></div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <main> | |
| <div class="swiper"> | |
| <div class="swiper-wrapper"> | |
| <div class="swiper-slide"> | |
| <div class="swiper-slide-img"> | |
| <img src="https://images.unsplash.com/photo-1543335785-8aadf6d8183c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80" alt=""> | |
| <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> | |
| <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" class="shape-fill"></path> | |
| <path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,1 |