The Power of Pure CSS - No JavaScript Needed

:root {
  --menu: 70px; /* Defines the header height to be reused across the layout for consistency */
  
  --black: #08170a;
  --black-green: #0f2913;
  --green-black: #1e5225;
  --green-black-medium: #26915d;
  --green: #06ba78;
  --green-white-medium: #6ccf93;
  --green-white: #b8ffc0;
}

/* === Essential logic for anchor navigation === */
html {
    /* Prevents the fixed menu from covering the section content when jumping to an ID */
    scroll-padding-top: var(--menu); 
    /* Enables smooth transition when clicking navigation links instead of an instant jump */
    scroll-behavior: smooth; 
}
/* ======================================== */

* {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  /* Offsets the body content so the first section isn't hidden under the fixed navbar */
  padding-top: var(--menu); 
}

nav {
  width: 100%;
  background: var(--black);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  height: var(--menu); /* Uses the variable to match the global layout height */
  position: fixed;
  top: 0;
}

nav a {
  color: var(--green-white);
  text-decoration: none;
  font-size: 20px;
  height: 100%;
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bolder;
}

div {
  width: 100%;
  /* Ensures each section fills the remaining viewport height (100vh) minus the menu height */
  height: calc(100vh - var(--menu)); 
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bolder;
  font-size: 15px;
  color: var(--green-white);
}

/* Logic to cycle through 5 different background colors based on the element's index */
div:nth-child(5n+1) { background: var(--green-black); }
div:nth-child(5n+4) { background: var(--green-white-medium); }
div:nth-child(5n+2) { background: var(--green-black-medium); }
div:nth-child(5n+5) { background: var(--green); }
div:nth-child(5n+3) { background: var(--black-green); }

15

Scroll Navigation

By: Nethan Pogi

/* CSS */
body{
  margin:0;
  height:100vh;
  display:grid;
  place-items:center;
  background:#fff;
  font-family: ui-sans-serif, Roboto, Arial;
  color:#0b1020;
}

.ccs-demo{
  width:(320px, 92vw);
  display:grid;
  place-items:center;
}

.ccs-skel{
  width:min(380px, 92vw);
  border-radius:22px;
  padding:14px;
  border:1px solid rgba(15,23,42,.3);
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.55));
  box-shadow: 0 26px 60px rgba(2,6,23,.10);
  display:grid;
  gap:12px;
}

/* Shared shimmer base */
.ccs-skel :where(.ccs-skel__avatar, .ccs-skel__line){
  background:
    linear-gradient(90deg,
      rgba(15,23,42,.06) 0%,
      rgba(15,23,42,.10) 35%,
      rgba(255,255,255,.65) 50%,
      rgba(15,23,42,.10) 65%,
      rgba(15,23,42,.06) 100%);
  background-size: 220% 100%;
  animation: ccs-shimmer 1.35s ease-in-out infinite;
  border:1px solid rgba(15,23,42,.3);
}

@keyframes ccs-shimmer{
  0%{ background-position: 120% 0; }
  100%{ background-position: -120% 0; }
}

.ccs-skel__item{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px;
  border-radius:16px;
  background: rgba(255,255,255,.45);
  border:1px solid rgba(15,23,42,.3);
}

.ccs-skel__avatar{
  width:44px;
  height:44px;
  border-radius:14px;
  flex:0 0 auto;
}

.ccs-skel__lines{
  flex:1;
  display:grid;
  gap:8px;
}

.ccs-skel__line{
  height:12px;
  border-radius:999px;
}

/* Width helpers (edit these for variety) */
.ccs-w-75{ width:75%; }
.ccs-w-70{ width:70%; }
.ccs-w-60{ width:60%; }
.ccs-w-50{ width:50%; }
.ccs-w-45{ width:45%; }
.ccs-w-40{ width:40%; }

13

List Loaders

By: Nethan Pogi

* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--hue: 223;
	--primary: hsl(var(--hue),90%,50%);
	--trans-dur: 0.6s;
	--trans-timing: cubic-bezier(0.65,0,0.35,1);
	font-size: calc(60px + (120 - 60) * (100vw - 320px) / (2560 - 320));
}
body,
input {
	font: 1em/1.5 sans-serif;
}
body {
	background-color: hsl(var(--hue),10%,90%);
	color: hsl(var(--hue),10%,10%);
	display: flex;
	height: 100vh;
	transition:
		background-color var(--trans-dur),
		color var(--trans-dur);
}
body:has(.switch__input:checked) {
	background-color: hsl(var(--hue),10%,20%);
	color: hsl(var(--hue),10%,90%);
}
.switch,
.switch__input {
	display: block;
	-webkit-tap-highlight-color: transparent;
}
.switch {
	margin: auto;
	position: relative;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.switch__icon {
	color: hsla(var(--hue),10%,80%);
	pointer-events: none;
	position: absolute;
	top: 0.375em;
	left: 0.375em;
	width: 0.75em;
	height: 0.75em;
	transition:
		color var(--trans-dur),
		transform var(--trans-dur) var(--trans-timing);
}
.switch__icon:nth-of-type(2) {
	right: 0.375em;
	left: auto;
}
.switch__inner,
.switch__inner-icons {
	border-radius: 0.5em;
	display: block;
	overflow: hidden;
	position: absolute;
	top: 0.25em;
	left: 0.25em;
	width: 2.25em;
	height: 1em;
}
.switch__inner:before,
.switch__inner-icons {
	transition: transform var(--trans-dur) var(--trans-timing);
	transform: translateX(-1.25em);
}
.switch__inner:before {
	background-color: var(--primary);
	border-radius: inherit;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
}
.switch__inner-icons {
	pointer-events: none;
}
.switch__inner-icons .switch__icon {
	color: hsl(0,0%,100%);
	top: 0.125em;
	left: 0.125em;
	transform: translateX(1.25em);
}
.switch__inner-icons .switch__icon:nth-child(2) {
	right: 0.125em;
	left: auto;
}
.switch__input {
	background-color: hsl(0,0%,100%);
	border-radius: 0.75em;
	box-shadow:
		0 0 0 0.0625em hsla(var(--hue),90%,50%,0),
		0 0.125em 0.5em hsla(var(--hue),10%,10%,0.1);
	outline: transparent;
	width: 2.75em;
	height: 1.5em;
	-webkit-appearance: none;
	appearance: none;
	transition:
		background-color var(--trans-dur),
		box-shadow var(--trans-dur);
}
.switch__input:checked {
	background-color: hsl(var(--hue),10%,10%);
}
.switch__input:checked ~ .switch__icon {
	color: hsla(var(--hue),10%,40%);
}
.switch__input:checked ~ .switch__inner:before,
.switch__input:checked ~ .switch__inner-icons {
	transform: translateX(1.25em);
}
.switch__input:not(:checked) ~ .switch__icon:first-of-type,
.switch__input:checked ~ .switch__icon:nth-of-type(2) {
	transform: rotate(360deg);
}
.switch__input:checked ~ .switch__inner-icons .switch__icon:first-of-type {
	transform: translateX(-1.25em) rotate(-360deg);
}
.switch__input:checked ~ .switch__inner-icons .switch__icon:nth-of-type(2) {
	transform: translateX(-1.25em) rotate(360deg);
}
.switch__input:focus-visible {
	box-shadow:
		0 0 0 0.0625em hsla(var(--hue),90%,50%,1),
		0 0.125em 0.5em hsla(var(--hue),10%,10%,0.1);
}
.switch__sr {
	overflow: hidden;
	position: absolute;
	width: 1px;
	height: 1px;
}

13

Day/Night theme Switch

By: Nethan Pogi

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
}

body {
    width: 100vw;
    height: 100vh;
    background: rgb(100, 100, 100);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#battery {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#tip {
    height: 20px;
    width: 50px;
    background: rgb(200, 200, 200);
}

#base {
    border: 5px solid rgb(200, 200, 200);
    background: black;
    width: 125px;
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
}

#battery-progress-bar {
    position: relative;
    height: 100%;
    width: 100%;
    background: rgb(50, 150, 50);
    display: flex;
    font-weight: bold;
    font-size: 1.5rem;
    text-shadow: 0 0 15px rgb(200, 200, 200);
    justify-content: center;
    align-items: center;
    
    animation-name: batteryChange;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 15s;
}

#charging-symbol {
    position: absolute;
    color: rgb(200, 200, 200);
    text-shadow: 0 0 1px black, 0 0 2.5px black;
    font-size: 3rem;
    height: 250px;
    width: 125px;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    
    animation-name: flashingCharge;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes flashingCharge {
    0% { opacity: 1 }
    5% { opacity: 0 }
    10% { opacity: 1 }
    15% { opacity: 0 }
    20% { opacity: 1 }
    25% { opacity: 0 }
    30% { opacity: 1 }
    35% { opacity: 0 }
    40% { opacity: 1 }
    50% { opacity: 0 }
}

#charging-symbol:hover {
    opacity: 1;
}

@keyframes batteryChange {
    0% {
        background: rgb(150, 50, 5);
        height: 0%;
    }
    40% {
        background: rgb(150, 50, 5);
    }
    50% {
        background: rgb(200, 175, 100);
    }
    70% {
        background: rgb(50, 150, 50);
    }
}

@keyframes batteryChangeV2 {
    from {
        background: rgb(150, 50, 5);
        height: 0%;
    }
    to {
        background: rgb(50, 150, 50);
        height: 100%;
    }
}

13

Battery Charging Progress

By: Nethan Pogi

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; /* Added box-sizing for better layout control */
	}

body {
	background: black;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh; /* Full height to center content vertically */
	}

#center {
	position: relative;
	}

ul {
	list-style: none;
	display: inline-block;
	}

ul li {
	width: 25px;
	height: 25px;
	margin: 8px 0;
	opacity: 0; /* Start invisible for animation */
	transform: scale(0); /* Start small for animation */
	animation: pop 0.5s forwards; /* Animation to pop into view */
	}

/* Animation for popping effect */
@keyframes pop {
	0% {
		opacity: 0;
		transform: scale(0);
	}	
	50% {
		opacity: 0.5;
		transform: scale(1.2); /* Slightly larger during animation */
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* Delay animations based on position */
ul li.one { 
	background: #0080FF; 
	animation-delay: 0.2s; 
}
ul li.two { 
	background: #0EA7A5; 
	animation-delay: 0.3s; 
}
ul li.three { 
	background: #50C878; 
	animation-delay: 0.4s; 
}
ul li.four { 
	background: #FFD700; 
	animation-delay: 0.5s; 
}
ul li.five { 
	background: #FA7A35; 
	animation-delay: 0.6s; 
}
ul li.six { 
  background: #E24666; 
	animation-delay: 0.7s; 
}
ul li.seven { 
	background: #B53389; 
	animation-delay: 0.8s; 
}
ul li.eight { 
	background: #708090; 
	animation-delay: 0.9s; 
}
ul li.nine { 
	background: #918E85; 
	animation-delay: 0.95s; 
}

12

Pixel Heart

By: Nethan Pogi

<div class="cardbox">
    <div class="card">
      <div class="front">
        <img src="https://images.unsplash.com/photo-1542324216541-c84c8ba6db04?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Rose">
        <b>Rose</b>
        <p>
          Roses are one of the most iconic flowers in the world. They symbolize love,
          beauty, and passion, and come in a wide range of colors with different meanings.
        </p>
      </div>
      <div class="back">
        <img src="https://images.unsplash.com/photo-1542324216541-c84c8ba6db04?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Rose">
        <p>
          Roses have been cultivated for thousands of years. Besides their beauty,
          they are widely used in perfumes, cosmetics, and decorative gardens.
        </p>
      </div>
    </div>
  </div>

<div class="cardbox">
    <div class="card">
      <div class="front">
        <img src="https://images.unsplash.com/photo-1517346921254-4797474379e1?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Sunflower">
        <b>Sunflower</b>
        <p>
          Sunflowers are known for turning toward the sun. They represent happiness,
          positivity, and warmth, making them a symbol of joy and vitality.
        </p>
      </div>
      <div class="back">
        <img src="https://images.unsplash.com/photo-1517346921254-4797474379e1?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Sunflower">
        <p>
          Native to the Americas, sunflowers are also important for agriculture.
          Their seeds produce oil and nutritious snacks enjoyed worldwide.
        </p>
      </div>
    </div>
  </div>

<div class="cardbox">
    <div class="card">
      <div class="front">
        <img src="https://images.unsplash.com/photo-1708577384771-0579daefc239?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Tulip">
        <b>Tulip</b>
        <p>
          Tulips are elegant spring flowers famous for their smooth petals and vibrant
          colors. They are often associated with renewal and new beginnings.
        </p>
      </div>
      <div class="back">
        <img src="https://images.unsplash.com/photo-1708577384771-0579daefc239?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Tulip">
        <p>
          Originally cultivated in Central Asia, tulips became extremely popular
          in Europe and are now a symbol strongly linked to the Netherlands.
        </p>
      </div>
    </div>
  </div>

</div>

*{margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
:root {
    --black: #08170a;
    --black-green: #0f2913;
    --green-black: #1e5225;
    --green-black-medium: #26915d;
    --green: #06ba78;
    --green-white-medium: #6ccf93;
    --green-white: #b8ffc0;
    --white: #fff;
}

body {background: var(--green-white)}

.alinha-cards{
  width: 100%;
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  align-items: center; 
  gap: 50px; 
  margin: 15vh 0 10vh;
}
.alinha-cards .cardbox {
  width: 250px;
  height: 70vh;
  perspective: 500px;
}
.alinha-cards .cardbox .card {
  width: 100%;
  height: 100%; 
  position: relative;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  perspective: 500px;
}
.alinha-cards .cardbox .card .front{
  background: var(--green-black);
}
.alinha-cards .cardbox .card .back{
  background: var(--black);
  transform: rotateY(180deg);
}
.alinha-cards .cardbox .card img{
  width: 70px; 
  height: 70px; 
  border-radius: 50%;
  position: absolute; 
  top: -30px;
  transition: .6s;
  transform-style: preserve-3d;
}
.alinha-cards .cardbox .card b {font-size: 30px; color: var(--white); text-align: center;}
.alinha-cards .cardbox .card p {font-size: 13px; color: var(--white);letter-spacing: 1px; text-align: center; line-height: 20px;}

.cardbox .card .back, 
.cardbox .card .front {
  position: absolute; 
  width: 100%; 
  height: 100%;
  padding: 50px 20px 20px; 
  box-sizing: border-box; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  flex-direction: column;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.alinha-cards .cardbox:hover .card {transform: rotateY(180deg);}
.alinha-cards .cardbox:hover .card img{animation: flipTwice 1s ease-in-out 1;}

.alinha-cards .cardbox .card .front:before, 
.alinha-cards .cardbox .card .back:before{
  content: "";
  display: block;
  width: 90px;
  height: 90px;
  background: var(--green-white);
  position: absolute;
  margin: 0 auto;
  top: -40px;
  border-radius: 50%;
}

@keyframes flipTwice {
    0%   { transform: rotateY(0deg); }
    60%  { transform: rotateY(180deg); }
    100%  { transform: rotateY(360deg); }
}

12

Flip Cards

By: Nethan Pogi

12

CSS Marquee

By: Nethan Pogi

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&display=swap');

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.scene {
  min-height: 100vh;
  background: #050510;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(0, 255, 255, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(255, 0, 200, 0.04) 0%, transparent 60%);
  font-family: 'Orbitron', sans-serif;
}

.buttons-wrapper {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}

/* Base Button */
.neon-btn {
  position: relative;
  padding: 16px 52px;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  background: transparent;
  border: 2px solid;
  cursor: pointer;
  outline: none;
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease,
    letter-spacing 0.3s ease;
  clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
}

.neon-btn span {
  position: relative;
  z-index: 1;
  transition: text-shadow 0.3s ease;
}

/* Cyan variant */
.btn-cyan {
  color: #00f5ff;
  border-color: #00f5ff;
  box-shadow:
    0 0 8px rgba(0, 245, 255, 0.3),
    inset 0 0 8px rgba(0, 245, 255, 0.05);
}

.btn-cyan:hover {
  background: rgba(0, 245, 255, 0.08);
  letter-spacing: 6px;
  box-shadow:
    0 0 20px rgba(0, 245, 255, 0.7),
    0 0 50px rgba(0, 245, 255, 0.4),
    0 0 100px rgba(0, 245, 255, 0.15),
    inset 0 0 20px rgba(0, 245, 255, 0.1);
  transform: translateY(-2px);
}

.btn-cyan:hover span {
  text-shadow:
    0 0 8px #00f5ff,
    0 0 20px #00f5ff,
    0 0 40px #00f5ff;
}

/* Magenta variant */
.btn-magenta {
  color: #ff00cc;
  border-color: #ff00cc;
  box-shadow:
    0 0 8px rgba(255, 0, 204, 0.3),
    inset 0 0 8px rgba(255, 0, 204, 0.05);
}

.btn-magenta:hover {
  background: rgba(255, 0, 204, 0.08);
  letter-spacing: 6px;
  box-shadow:
    0 0 20px rgba(255, 0, 204, 0.7),
    0 0 50px rgba(255, 0, 204, 0.4),
    0 0 100px rgba(255, 0, 204, 0.15),
    inset 0 0 20px rgba(255, 0, 204, 0.1);
  transform: translateY(-2px);
}

.btn-magenta:hover span {
  text-shadow:
    0 0 8px #ff00cc,
    0 0 20px #ff00cc,
    0 0 40px #ff00cc;
}

/* Lime variant */
.btn-lime {
  color: #aaff00;
  border-color: #aaff00;
  box-shadow:
    0 0 8px rgba(170, 255, 0, 0.3),
    inset 0 0 8px rgba(170, 255, 0, 0.05);
}

.btn-lime:hover {
  background: rgba(170, 255, 0, 0.08);
  letter-spacing: 6px;
  box-shadow:
    0 0 20px rgba(170, 255, 0, 0.7),
    0 0 50px rgba(170, 255, 0, 0.4),
    0 0 100px rgba(170, 255, 0, 0.15),
    inset 0 0 20px rgba(170, 255, 0, 0.1);
  transform: translateY(-2px);
}

.btn-lime:hover span {
  text-shadow:
    0 0 8px #aaff00,
    0 0 20px #aaff00,
    0 0 40px #aaff00;
}

/* Active press */
.neon-btn:active {
  transform: translateY(1px) scale(0.98);
}

/* Flicker animation on load */
@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.6; }
}

.neon-btn {
  animation: flicker 5s infinite;
}

.btn-magenta { animation-delay: 0.4s; }
.btn-lime    { animation-delay: 0.8s; }

12

Neon Glow buttons

By: Nethan Pogi

:root {
  --gray: #e0e5ec;
  --size: 25vw;
  --scalingFactor: calc(100 / 25); /*related to size*/
}
  
body {
  background: var(--gray);
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: sans-serif;
}
.dot, .trigger {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: var(--size);
  width: var(--size);
  margin: 10px;
  background: var(--gray);
  box-shadow: 5px 5px 10px rgba(163, 177, 198, 0.6), -5px -5px 10px rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}
.trigger {
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,0.5);
  letter-spacing: 0.05em;
  cursor: pointer;
}
.trigger:before {
  content:'click me'
}
#trigger:checked + .trigger:before {
  content: 'reset'
}

#trigger:checked + .trigger + .dots > .dot {
  animation-name: wave;
  animation-timing-function: ease-in-out;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
.dot {
  opacity: 1;
  transform: translate3d(-50%,-50%,0) scale3d(0,0,1);
}
.dot:nth-of-type(2) {
  z-index: 1;
  animation-delay: .5s;
}
.dot:nth-of-type(3) {
  z-index: 2;
  animation-delay: 1s;
}

@keyframes wave{
  0% {
    opacity: 1;
    transform: translate3d(-50%,-50%,0) scale3d(1,1,1);
  }  
  100% {
    opacity: 0;
    transform: translate3d(-50%,-50%,0) scale3d(var(--scalingFactor),var(--scalingFactor),1);
  }
}

11

On Click Ripple Effect

By: Nethan Pogi

body {
  background-color: #3498DB;
  overflow: hidden;
}

div {
  margin: 175px auto;
}

.drop {
  position: relative;
	width: 20px;
	height: 20px;
  top: -30px;
  margin: 0 auto;
	background: #FFF;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
  -moz-animation-name: drip;
  -webkit-animation-name: drip;
  animation-name: drip;
  -moz-animation-timing-function: cubic-bezier(1,0,.91,.19);
  -webkit-animation-timing-function: cubic-bezier(1,0,.91,.19);
  animation-timing-function: cubic-bezier(1,0,.91,.19);
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.drop:before {
  content: "";
  position: absolute;
  width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 30px solid rgba(255,255,255,1);
  top: -22px;
}

.wave {
  position: relative;
  opacity: 0;
  top: 0;
	width: 2px;
	height: 1px;
  border: #FFF 7px solid;
	-moz-border-radius: 300px / 150px;
	-webkit-border-radius: 300px / 150px;
	border-radius: 300px / 150px;
  -moz-animation-name: ripple;
  -webkit-animation-name: ripple;
  animation-name: ripple;
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.wave:after {
  content: "";
  position: absolute;
  opacity: 0;
  top: -5px;
  left: -5px;
	width: 2px;
	height: 1px;
  border: #FFF 5px solid;
	-moz-border-radius: 300px / 150px;
	-webkit-border-radius: 300px / 150px;
	border-radius: 300px / 150px;
  -moz-animation-name: ripple-2;
  -webkit-animation-name: ripple-2;
  animation-name: ripple-2;
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@keyframes ripple {
    from {
      opacity: 1;
    }
    to {
      width: 600px;
      height: 300px;
      border-width: 1px;
      top: -100px;
      opacity: 0;
    }
}

@keyframes ripple-2 {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  100% {
    width: 200px;
    height: 100px;
    border-width: 1px;
    top: 100px;
    left: 200px;
  }
}

@keyframes drip {
    to {
      top: 190px;
    }
}

11

Drip Drop

By: Nethan Pogi

/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --white-color: hsl(0, 0%, 100%);
  --black-color: hsl(0, 0%, 0%);

/*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Poppins", sans-serif;
  --h1-font-size: 1.5rem;
  --normal-font-size: 0.938rem;

/*========== Font weight ==========*/
  --font-regular: 400;
  --font-medium: 500;

/*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

/*========== Responsive typography ==========*/
@media screen and (min-width: 968px) {
  :root {
    --normal-font-size: 1rem;
  }
}

/*=============== BASE ===============*/
*,
*:after,
*:before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--black-color);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
  padding: 3rem;
  min-height: 100vh;
  display: grid;
  place-items: center;
}
.section__container {
  --white-color: #ffffff;
  --dark-color: #222222;
  --dark-color-alt: #444444;
  --color-1: #ff1d50;
  --color-2: #2196f3;

display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
}

/*==================== ZigZag Border Animation ====================*/
.zigzag__container {
  --skin-color: #00ff00;
  --dark-black-color: #292929;
  --border-color: #928b8b;

position: absolute;
  display: flex;
  gap: 38px;
}
.zigzag__container:nth-child(2) {
  transform: rotate(180deg);
  z-index: -1;
}
.zigzag__item {
  display: block;
  height: 100px;
  width: 100px;
  position: relative;
  overflow: hidden;
  transform: rotate(315deg);
}
.zigzag__item::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--skin-color));
  transform: translateX(-100%);
  animation: animateBefore 4s linear infinite;
  animation-delay: calc(1s * var(--i));
}
@keyframes animateBefore {
  0% {
    transform: translateX(-100%);
  }
  25%,
  100% {
    transform: translateX(100%);
  }
}
.zigzag__item::after {
  content: "";
  position: absolute;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--skin-color));
  transform: translateY(-100%);
  animation: animateAfter 4s linear infinite;
  animation-delay: calc(1s * var(--i));
}
@keyframes animateAfter {
  0%,
  12.5% {
    transform: translateY(-100%);
  }
  37.5%,
  100% {
    transform: translateY(100%);
  }
}
.zigzag__item span {
  position: absolute;
  cursor: pointer;
  inset: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--dark-black-color);
  outline: 1px solid var(--border-color);
  transition: 0.3s linear;
}
.zigzag__container:nth-child(1) .zigzag__item span:hover {
  outline-offset: -5px;
}
.zigzag__item span b {
  font-weight: normal;
  font-size: 2em;
  transform: rotate(45deg);
  color: var(--white-color);
}

@media screen and (max-width: 600px) {
  .zigzag__container {
    gap: 19px;
  }
  .zigzag__item {
    height: 50px;
    width: 50px;
  }
  .zigzag__item span b {
    font-size: 1em;
  }
}

11

ZigZag Border Animation

By: Nethan Pogi

body{
	padding: 0;
	margin: 0;
	background: #1E1E22;
}
.container{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
}
.btn{
	height: 50px;
	width: 50px;
	margin: 20px;
	border-radius: 50%;
	cursor: pointer;
}
.btn1{
	background: #fac536;
	position: relative;
	overflow: hidden;
}
.btn1::before{
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
	height: 10%;
	opacity: 0;
	background: #222;
	transition: 300ms;
}
.btn1:hover::before{
	opacity: 1;
	top: 50%;
}
.btn2{
	background: #39ea49;
	position: relative;
	overflow: hidden;
}
.btn2::before{
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 45%;
	height: 45%;
	opacity: 0;
	background: #222;
	transition: 300ms;
}
.btn2::after{
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	width: 15%;
	height: 80%;
	opacity: 0;
	background: #39ea49;
	transition: 300ms;
}
.btn2:hover::before, .btn2:hover::after{
	opacity: 1;
	top: 50%;
}
.btn3{
	background: #f25056;
	position: relative;
	overflow: hidden;
}
.btn3::before{
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	width: 15%;
	height: 50%;
	opacity: 0;
	background: #222;
	transition: 300ms;
}
.btn3::after{
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 15%;
	opacity: 0;
	height: 50%;
	background: #222;
	transition: 300ms;
}
.btn3:hover::before, .btn3:hover::after{
	opacity: 1;
	top: 50%;
}
a{
  text-decoration: none;
  position: absolute;
  right: 20px;
  bottom: 20px;
  color: #fff;
  font-family: sans-serif;
  font-size: .9rem;
}
a:hover{
  opacity: .8;
  border-bottom: 1px solid rgba(255, 255, 255, .8);
}

11

All

Scroll Navigation

By: Nethan Pogi

List Loaders

By: Nethan Pogi

Day/Night theme Switch

By: Nethan Pogi

Battery Charging Progress

By: Nethan Pogi

Pixel Heart

By: Nethan Pogi

Flip Cards

By: Nethan Pogi

CSS Marquee

By: Nethan Pogi

Neon Glow buttons

By: Nethan Pogi

On Click Ripple Effect

By: Nethan Pogi

Drip Drop

By: Nethan Pogi

ZigZag Border Animation

By: Nethan Pogi

Hover Icons

By: Nethan Pogi