Lynn Fisher | The Blog Pros

August 25, 2020

Awesome Demos Roundup #17

I’m so excited to share another packed roundup with you! This time we have lots of CSS trickery and creative WebGL explorations that will leave you itching for experimenting more. I love, love, love all of them but my personal favorite in this collection is the wonderful Disintegration demo by Sikriti Dakua, it’s absolutely amazing!

I really hope you enjoy this set and get some creative inspiration for your next coding exploration!

CSS folded poster effect

by Lynn Fisher

3D Polaroid World

by ilithya

reactanoid

by Paul Henschel

Glowing buttons

by Pranjal Bhadu

DISINTEGRATION

by Sikriti Dakua

3D banners with ScrollTrigger

by supamike

Download button

by Aaron Iker

Mustache Guy

by We the Collective

Particle Emitter

by Keita Yamada

Bubbles Lamp

by ilithya

rubik-cube

by Aaron Bird

Onboarding sequence

by Mikael Ainalem

CSS collector’s cabinet

by Lynn Fisher

Cursor with String Attached

by Sikriti Dakua

PopCSSicles

by Adam Kuhn

Mars Explorer

by Hai Le

CSS leaning card effect

by Lynn Fisher

dropplets

by Oscar Salazar

Floating island

by Kasper De Bruyne

Mandala maker

by Amit Sheen

Depth peeling & SS refraction

by Domenico Bruzzese

Rubber Mesh Swipe Transition

by Yugam

Responsive “No div” truck

by Jhey Tompkins

Turning pages with CSS

by Amit Sheen

The Girl With A [pearl] CSS Earring

by Louise Flanagan

Three.js animated ice cream truck

by Stívali Serna

CSS Animated 3D Toaster

by Jhey Tompkins

Bubbles

by Gianmarco Simone

2020.08.08

by Ikeda Ryou

CSS is Awesome

by Mikael Ainalem

Radios Under the Hood

by Jon Kantner

HOME & WORK

by Sikriti Dakua

Shader Transition 6

by masuwa

Marquee Page Border

by Ryan Mulligan

Only CSS: Moon Clip

by Yusuke Nakaya

luv

by ycw

Victrola

by Ricardo Oliva Alonso

Impossible Checkbox

by Jhey Tompkins

Glowing tree

by Robin Payot

CSS-Cab

by Ricardo Oliva Alonso

3D CSS Book Promo

by Jhey Tompkins

3D Image Transition (mouse wheel)

by Kevin Levron

The post Awesome Demos Roundup #17 appeared first on Codrops.

July 9, 2020

Collective #613

Inspirational Website of the Week: makemepulse

Makemepulse challenges the laws of physics by being razor sharp and smooth as a feather at the same time. Our pick this week.

Get inspired

Our Sponsor

Be: 500+ pre-built websites for ANY kind of project

Now comes with Elementor and dedicated Elementor pre-built websites.

Discover more

Ten modern layouts in one line of CSS

A post by Una Kravets that highlights a few powerful lines of CSS that do some serious heavy lifting and help you build robust modern layouts.

Check it out

Lights and Shadows

Bartosz Ciechanowski’s interactive journey into the world of light and how it interacts with different objects.

Read it

The Cicada Principle, revisited with CSS variables

Lea Verou shows some amazing examples of the Cicada Principle with CSS variables.

Check it out

Accordion Rows in CSS Grid

Eric Meyer shares the way he’s using CSS Grid rows to for more layout flexibility.

Read it

viewBox

A newsletter with tips, demos, articles and a monthly challenge all about the magical world of SVG! By Cassie Evans and Louis Hoebregts.

Check it out

WebGL with Three.js Program

Bruno Simon has started working on a Three.js course and the outline looks very promising.

Check it out

CSS News July 2020

In this article, Rachel Andrew takes a look at some of the interesting CSS features that are making their way into browsers right now.

Read it

Rubik’s Cube

A Rubik’s cube made with Three.js. By Aaron Bird.

Check it out

Knopf.css

A modern, modular, extensible button system designed for both rapid prototyping and production-ready applications.

Check it out

Favicon in Dark Mode

A great CodyHouse video that shows how to change the colors of your favicon when dark mode is enabled.

Check it out

The Comeback of Fun in Visual Design

Michael Flarup writes about the long awaited “swing of the pendulum” in visual design.

Read it

Uncommon CSS Properties

In this article, Ahmad Shadeed goes through some different interesting CSS properties.

Check it out

Lemon.io

Find a perfect freelance match for your project in just 24 hours.

Check it out

CSS collector’s cabinet

Lynn Fisher’s beautiful CSS creation.

Check it out

Always bet on HTML – being misunderstood

Christian Heilmann takes a look at the reasons why people might be less enthused about HTML.

Check it out

Goodbye Squarespace. Hello Eleventy, Tailwind CSS and Netlify!

Sahil Parikh shares his experience with transitioning his blog to a static site generator.

Read it

Bubbles Lamp

A beautiful demo by ilithya.

Check it out

Arched 3D panel

Watch a modern take on an older component Ana Tudor coded some year ago.

Watch it

WordPress Static Site: Benefits, Limits & Tools

A complete guide to getting started with WordPress static site generators.

Read it

Accessible and Keyboard-Friendly Hamburger Menu + Slide Out Navigation

A live demo and tips on building an accessible hamburger menu that’s keyboard-friendly and toggles a slide-out navigation panel.

Check it out

From Our Blog

Exploring Animations for Menu Hover Effects

A couple of ideas for creative menu hover animations with images.

Check it out

The post Collective #613 appeared first on Codrops.

July 6, 2020

Posters! (for CSS Flexbox and CSS Grid)

Any time I chat with a fellow web person and CSS-Tricks comes up in conversation, there is a good chance they’ll say: oh yeah, that guide on CSS flexbox, I use that all the time!

Indeed that page, and it’s cousin the CSS grid guide, are among our top trafficked pages. I try to take extra care with them making sure the information on them is current, useful, and the page loads speedily and properly. A while back, in a round of updates I was doing on the guides, I reached out to Lynn Fisher, who always does incredible work on everything, to see if she’d be up for re-doing the illustrations on the guides. Miraculously, she agreed, and we have the much more charismatic illustrations that live on the guides today.

In a second miracle, I asked Lynn again if she’d be up for making physical paper poster designs of the guides, and see agreed again! And so they live!

Here they are: