Lightnews — Scholar-powered news

Reposted by CodePen

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

💡 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 37

CodePen @codepen.io · 1d

"Halftone Reveal" by Robert Raichle

codepen.io/robertraichl...

5

Reposted by CodePen

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

add to cart 🛒

configurable css + svg 👇

1 40

CodePen @codepen.io · 4d

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 · 4d

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 94

Reposted by CodePen

Stefan Judis @stefanjudis.com · 4d

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 · 10d

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 · 5d

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 46

CodePen @codepen.io · 9d

"Tubes Cursor" by Kevin Levron

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

1 6

Reposted by CodePen

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

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 · 9d

"Generative Copic Color Wheel" by David Aerne

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

4

CodePen @codepen.io · 10d

> 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 · 12d

"3D text silhouette" by Pavel Boytchev

codepen.io/boytchev/pen...

2

CodePen @codepen.io · 15d

"Monochrome Alphabet" by Josetxu

codepen.io/josetxu/pen/...

8

Reposted by CodePen

Gemma Croad @gemmacroad.bsky.social · 17d

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 · 17d

"Tiled Swirl" by Jon Kantner

codepen.io/jkantner/pen...

1 1 12

Reposted by CodePen

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

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 14

CodePen @codepen.io · 18d

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.

2

CodePen @codepen.io · 18d

"❍ Interactive Mystery Card Hover Effect" by Filip Zrnzevic

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

3

Reposted by CodePen

Chris Coyier @chriscoyier.net · 19d

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

Reposted by CodePen

Dave Rupert @davatron5000.bsky.social · 23d

Thought a lot about Squircles today.

- To make a CSS squircle, the border-radius needs to be at-least half of the shortest side (or 9999px)
- Hard to progressively enhance without `style()` queries
- A CSS squircle is more like a stretched circle than a squished square

codepen.io/davatron5000...

Thinking in Squircles

...

codepen.io

1 1 18

Reposted by CodePen

Stef Walter @stephaniewalter.bsky.social · 24d

How many HTML tags can you remember? No cheating!
By Paul Foster

codepen.io/plfstr/full/...

Screenshot of a webpage titled HTML Tags Memory Test, with a blue background, a text field labeled Tag for entering guesses, and a numbered list of 45 recalled HTML tags including dl, dt, html, body, head, footer, div, p, h1 to h6, strong, em, link, and table.

6 3 18

Reposted by CodePen

Eric Bailey @ericwbailey.website · 23d

Focus rings! Plural! I wrote for @piccalil.li about how to create a branded double ring focus effect that is dynamically generated based on the interactive element's text color. piccalil.li/blog/taking-...

Taking a shot at the double focus ring problem using modern CSS

A double focus ring is really useful in general but especially so with complex, themed systems. Eric Bailey shows us how to develop a really smart system, using modern CSS.

piccalil.li

11 45

CodePen @codepen.io · 24d

"Avatar Indicators, using CSS Mask / Trig" by Simon Goellner

codepen.io/simeydotme/p...

2 9

CodePen @codepen.io · 25d

Week three of the September #CodePenChallenge is on
This week, let's go monochrome!

codepen.io/challenges/2...

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

Blue lampshades lit from within, creating a monochromatic gradient of blue.

2