'Scratched Folder (CSS, SVG)' by Konstantin Denerz

OOooOo the 'scratches' are programmatic .

codepen.io/konstantindene…

'grid' by Tom Hinton

codepen.io/TomHinton/pen/…

Great way to learn how HTML and CSS work?

Make games.

This is all HTML/CSS to understand the Popover API 👇

Each wave is a [popover] and the Golden Bear opens a new [popover] keeping the chain alive 😅

'3D CSS && Scroll-Driven Laptop Flip' codepen.io/jh3y/details/p…

Incredible CSS work (all scroll-driven animations, no JS!) by Jhey.

Check out this Marketing Hero Section with dynamic aspect ratio effects, paired with a responsive navbar using subgrid and discrete animations.
All crafted with Open Props V2.

CodePen: codepen.io/mobalti/full/b…

#CSS CodePen.IO #webdevelopment

'CSS-only pixelated cut corner' by Temani Afif. It's done with a programmatically created `clip-path` and `mask`, so it scales perfectly well. It's worth commenting out one or the other (then swapping) to see which each part is doing.

codepen.io/t_afif/pen/NWm…

This took a lot of learning to get working, infinite text marquee that slows down on hover, CSS only:
codepen.io/matthewmorete/…

The trick here is to use 'animation-composition: add' to apply a reduced version of the animation at the same time.

#CSS #webdev #html

🔺
Split Pyramid ( #CSS only)

Live Demo and full code on CodePen.IO: codepen.io/amit_sheen/ful…

It's the final week of the April #CodePenChallenge !
All month we've been working with bubbles 🫧
This week we're gonna make 'em pop 💥
codepen.io/challenges/202…

It's kinda cool seeing readable SVG in CSS. Maybe CSS should get tagged template literals someday.

codepen.io/borntofrappe/p…

Quiet please with my latest entry in the weekly Codpen challenge. Using the bubble sort algorithm to unscramble an image.
CPC - Bubble Sort - unscramble images codepen.io/cbolson/pen/GR… via CodePen.IO

'GSAP Logo Animation 1' by GSAP

> Lovely animation done by ToyFight for the GSAP rebrand

codepen.io/GreenSock/pen/…

'Infinite Portals' by Karim Maaloul

codepen.io/Yakudoo/pen/Po…

#animationFriday
Data was gathered, a graph made, and animations added, unveiling some spurious correlations! If ever offered a role in a Tarantino movie, think twice if it requires sporting a beard 🤨

Code: codepen.io/idsintehittapa…
Made with GSAP GSAP
Hosted on CodePen.IO

Using a similar approach you can do a 'multi-bar' wipe effect with a single #css clip-path polygon() 🤯

No need for svg masks (although that approach is a bit easier)

Full @codepen demo: codepen.io/snorkltv/pen/y…

This entire clip-path experiment started in the GSAP forums:…

New CSS Animation!
This one is for those who miss their old school monitors where every pixel was a pixel you could see.

Link to CodePen.IO
codepen.io/Adir-SL/pen/rN…

Chip Preloader
codepen.io/jkantner/pen/m… CodePen.IO #CSS

Geometric Preloader by Jon Kantner

buff.ly/4b0eEzn

'Comic Style Text Bubbles' by Josetxu — part of the #CodePenChallenge

codepen.io/josetxu/pen/eY…

Geometric Preloader
codepen.io/jkantner/pen/L… CodePen.IO #CSS