Lightnews — Scholar-powered news

Reposted by CodePen

CSS-Tricks* @css-tricks.bsky.social · 5h

Let’s suppose you have some number of elements with the same animation that should animate sequentially. Modern CSS makes this easy and it works for any number of items!

@css-only.dev explains and demonstrates it so well.

css-tricks.com/sequential-l...

Sequential linear() Animation With N Elements | CSS-Tricks

Let’s suppose you have N elements with the same animation that should animate sequentially. Modern CSS makes this easy and it works for any number of items!

css-tricks.com

2 9

CodePen @codepen.io · 21h

The Halloween #CodePenChallenge continues!
This week, it's time to put on the Halloween Masks

codepen.io/challenges/2...

Thanks @Redisinc for sponsoring: srv.buysellads.com/ads/long/x/T...

A person wearing a jack o'lantern on their head, ominously leaning forward with hand outstretched from a backlit corner in a drafty shed.

2

Reposted by CodePen

Una Kravets @una.im · 1d

There are 2 new pseudo classes landing for scroll-markers: :target-before and :target-after

:target-current {
background: black;
}

:target-before {
background: lavender;
}

:target-after {
outline: 1px solid gray;
}

Lands in Chrome 142 (stable in 2 weeks)

4 3 54

CodePen @codepen.io · 1d

"Liquid Glass Shader" by shingidad

codepen.io/shingidad/pe...

1 4

CodePen @codepen.io · 1d

"MOTION LAB" by LawrieCape

codepen.io/Lawrie/pen/x...

1 1

Reposted by CodePen

CSS by T. Afif @css-only.dev · 5d

💡 CSS Tip!

A simple line of modern CSS to create a conditional Border Radius. The value will adjust based on either the container width or screen width.

css-tip.com/conditional-...

cc @ishadeed.com @una.im

The following CSS code:
.box {
border-radius: calc(sign(100cqi - 100%)*2rem);
}

4 7 38

CodePen @codepen.io · 5d

"Halftone Reveal" by Robert Raichle

codepen.io/robertraichl...

5

Reposted by CodePen

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 6d

add to cart 🛒

configurable css + svg 👇

1 42

CodePen @codepen.io · 7d

The October #CodePenChallenge is on!
It's Halloween Time 🎃
codepen.io/challenges/2...

Thanks @Redisinc for sponsoring: srv.buysellads.com/ads/long/x/T...

A slightly unsettling shadow of a large clockface looming over a grungy backdrop.

Reposted by CodePen

Kevin Powell @kevinpowell.co · 8d

Are you the type of dev who just copies and pastes hex codes?

If so, I've written an article over at @piccalil.li just for you!

I take a look at some of the new CSS colour features that are most useful for those who don't really care about colours.

piccalil.li/blog/a-pragm...

A pragmatic guide to modern CSS colours - part one

Whether you've got a firm grasp on modern CSS colour capabilities, or you're thinking 'I struggle to understand why I should use modern CSS colours at all', then the first part of this article series,...

piccalil.li

6 24 96

Reposted by CodePen

Stefan Judis @stefanjudis.com · 8d

So, there's the new `corner-shape` CSS property (Chromium-only right now) and I was quite surprised about all the possible use cases going beyond the famous squircle examples.

css-tricks.com/what-can-we-...

What Can We Actually Do With corner-shape? | CSS-Tricks

When I first started messing around with code, rounded corners required five background images or an image sprite likely created in Photoshop, so when

css-tricks.com

3 22

Reposted by CodePen

Frontend Masters @frontendmasters.com · 13d

Inset Shadows Directly on img Elements (Part 1)

Inset `box-shadow` doesn't work directly on . There are work-arounds, but this SVG filter can do it directly.

Don't run! There is powerful stuff to learn here through interactive demos.

Inset Shadows Directly on img Elements (Part 1)

Inset `box-shadow` doesn't work directly on . There are work-arounds, but this SVG filter can do it directly. Don't run! There is powerful stuff to learn here through interactive demos.

frontendmasters.com

5 9

Reposted by CodePen

CSS by T. Afif @css-only.dev · 9d

Here is my idea with less of code

css-tip.com/tooltip-anch...

The trick is to play with the margin property to show/hide the arrows.

cc @una.im @bram.us

12 50

CodePen @codepen.io · 12d

"Tubes Cursor" by Kevin Levron

codepen.io/soju22/pen/q...

1 6

Reposted by CodePen

CSS-Tricks* @css-tricks.bsky.social · 13d

Love seeing updated work on the CSS `cross-fade()` and how it's evolving out of the legacy syntax from WebKit's implementation.

In short: Generate a single image outta two (or more!)

css-tricks.com/almanac/func...

cross-fade() | CSS-Tricks

The cross-fade() function lets you blend more than one image at a specified transparency value.

css-tricks.com

1 10

CodePen @codepen.io · 13d

"Generative Copic Color Wheel" by David Aerne

codepen.io/meodai/pen/M...

5

CodePen @codepen.io · 13d

> Weird Web October is a challenge to try and make a website every day of October, based on the theme for each day, inspired by Inktober. It’s open to you and everyone!

weirdweboctober.website

Go go!

Weird Web October

A challenge to try and make a website every day of October, based on the theme for each day

weirdweboctober.website

1

CodePen @codepen.io · 15d

"3D text silhouette" by Pavel Boytchev

codepen.io/boytchev/pen...

2

CodePen @codepen.io · 18d

"Monochrome Alphabet" by Josetxu

codepen.io/josetxu/pen/...

9

Reposted by CodePen

Gemma Croad @gemmacroad.bsky.social · 20d

I created this vintage colour theory poster for this weeks @codepen.io challenge! It's a loving tribute to those beautiful scientific colour wheel prints I was obsessed with as a child (and honestly still am)... 🥰 🌈

codepen.io/GemmaCroad/p...

CodePen Challenge: Color Wheel

A bit of a nod to the vintage style colour wheels I used to love as a child, and still do....

codepen.io

1 1 4

CodePen @codepen.io · 20d

"Tiled Swirl" by Jon Kantner

codepen.io/jkantner/pen...

1 1 12

Reposted by CodePen

CSS by T. Afif @css-only.dev · 20d

A 3D box with a simple CSS code.

Demo: codepen.io/t_afif/full/... via @codepen.io

Overview of the CSS code from the provided demo

3 15

CodePen @codepen.io · 21d

It's the final week of the September #CodePenChallenge
This week, let's spin the color wheel!

codepen.io/challenges/2...

Thanks @MongoDB for sponsoring: srv.buysellads.com/ads/long/x/T...

Paint color samples arranged by color in a wheel shape.

3

CodePen @codepen.io · 22d

"❍ Interactive Mystery Card Hover Effect" by Filip Zrnzevic

codepen.io/filipz/pen/Q...

3

Reposted by CodePen

Chris Coyier @chriscoyier.net · 23d

I thought about things that have happened in CSS in 2025 and what I think you should probably know.

Then I blogged it.

frontendmasters.com/blog/what-yo...

It's not *everything* — it's my own curated list.

What You Need to Know about Modern CSS (2025 Edition)

If you thought 2024 was packed with amazing new CSS, well, you're right. But so is 2025 and it keeps looking bright. Check out our list of the best stuff with easy-to-reference examples.

frontendmasters.com

2 15 78