CSS ::before and ::after Pseudo-Elements (With Examples)
How CSS ::before and ::after work: the content property, the difference between them, and practical examples like icons, custom bullets, overlays, tooltips and decorative shapes.
How CSS ::before and ::after work: the content property, the difference between them, and practical examples like icons, custom bullets, overlays, tooltips and decorative shapes.
CSS ::before and ::after Pseudo-Elements (With Examples)
How CSS ::before and ::after work: the content property, the difference between them, and practical examples like icons, custom bullets, overlays, tooltips and decorative shapes.
markodenic.com
October 13, 2026 at 9:03 AM
CSS ::before and ::after Pseudo-Elements (With Examples)
How CSS ::before and ::after work: the content property, the difference between them, and practical examples like icons, custom bullets, overlays, tooltips and decorative shapes.
How CSS ::before and ::after work: the content property, the difference between them, and practical examples like icons, custom bullets, overlays, tooltips and decorative shapes.
CSS Blob Shape: Organic Blobs with border-radius
Make organic blob shapes with pure CSS using the 8-value border-radius trick, plus an animated morphing blob and gradient blobs for backgrounds.
Make organic blob shapes with pure CSS using the 8-value border-radius trick, plus an animated morphing blob and gradient blobs for backgrounds.
CSS Blob Shape: Organic Blobs with border-radius
Make organic blob shapes with pure CSS using the 8-value border-radius trick, plus an animated morphing blob and gradient blobs for backgrounds.
markodenic.com
October 13, 2026 at 3:02 PM
CSS Blob Shape: Organic Blobs with border-radius
Make organic blob shapes with pure CSS using the 8-value border-radius trick, plus an animated morphing blob and gradient blobs for backgrounds.
Make organic blob shapes with pure CSS using the 8-value border-radius trick, plus an animated morphing blob and gradient blobs for backgrounds.
True!
Also the UI is all CSS (+ I guess SVG with these wonky shapes now) and I want wide browser support with good performance, so it's hard to do anything fun like shaders. :(
Although I *have* been dreaming of tracking UI element bounds and rendering the shapes behind them inside WebGL. Hmm….
Also the UI is all CSS (+ I guess SVG with these wonky shapes now) and I want wide browser support with good performance, so it's hard to do anything fun like shaders. :(
Although I *have* been dreaming of tracking UI element bounds and rendering the shapes behind them inside WebGL. Hmm….
October 14, 2026 at 1:47 PM
True!
Also the UI is all CSS (+ I guess SVG with these wonky shapes now) and I want wide browser support with good performance, so it's hard to do anything fun like shaders. :(
Although I *have* been dreaming of tracking UI element bounds and rendering the shapes behind them inside WebGL. Hmm….
Also the UI is all CSS (+ I guess SVG with these wonky shapes now) and I want wide browser support with good performance, so it's hard to do anything fun like shaders. :(
Although I *have* been dreaming of tracking UI element bounds and rendering the shapes behind them inside WebGL. Hmm….
Inspired by the Jetsons
#googie #retrofuturism #css
#css, #svg, #scroll-driven-animations
#corner-shape, #border-shape, #css-shapes
codepen.io/editor/Sensi...
#googie #retrofuturism #css
#css, #svg, #scroll-driven-animations
#corner-shape, #border-shape, #css-shapes
codepen.io/editor/Sensi...
Skyhaven: a Googie-inspired website
retro, space-age, atomic-age, 1960s, no-javascript, css-only, dark-mode, light-dark, clip-path, ui-design googie, retrofuturism, css, svg, scroll-driv
codepen.io
October 12, 2026 at 11:10 PM
Inspired by the Jetsons
#googie #retrofuturism #css
#css, #svg, #scroll-driven-animations
#corner-shape, #border-shape, #css-shapes
codepen.io/editor/Sensi...
#googie #retrofuturism #css
#css, #svg, #scroll-driven-animations
#corner-shape, #border-shape, #css-shapes
codepen.io/editor/Sensi...
CSS can only morph between shape()s with the same number and type of commands, which usually they don't.
So I made a tool to convert them into compatible shapes.
shapemorph.matthewmorete.com
It tries to pick the smoothest arrangement of points, but adjust the shape index to try other variations!
So I made a tool to convert them into compatible shapes.
shapemorph.matthewmorete.com
It tries to pick the smoothest arrangement of points, but adjust the shape index to try other variations!
CSS Shape() Morph
Prepare shape() values for morphing with native CSS transitions & animations
shapemorph.matthewmorete.com
October 8, 2026 at 5:26 PM
CSS can only morph between shape()s with the same number and type of commands, which usually they don't.
So I made a tool to convert them into compatible shapes.
shapemorph.matthewmorete.com
It tries to pick the smoothest arrangement of points, but adjust the shape index to try other variations!
So I made a tool to convert them into compatible shapes.
shapemorph.matthewmorete.com
It tries to pick the smoothest arrangement of points, but adjust the shape index to try other variations!
Just crawled from under my rock and learned about the CSS `shape-ouside` property to wrap text around shapes.
developer.mozilla.org/en-US/docs/W...
developer.mozilla.org/en-US/docs/W...
October 6, 2026 at 7:34 AM
Just crawled from under my rock and learned about the CSS `shape-ouside` property to wrap text around shapes.
developer.mozilla.org/en-US/docs/W...
developer.mozilla.org/en-US/docs/W...
Writing CSS shapes by hand is slow and complex.
I made a visual tool to draw curves easily.
You can manipulate paths directly on a canvas.
#CSS #WebDev #OpenSource
1/4
I made a visual tool to draw curves easily.
You can manipulate paths directly on a canvas.
#CSS #WebDev #OpenSource
1/4
October 6, 2026 at 8:01 AM
Writing CSS shapes by hand is slow and complex.
I made a visual tool to draw curves easily.
You can manipulate paths directly on a canvas.
#CSS #WebDev #OpenSource
1/4
I made a visual tool to draw curves easily.
You can manipulate paths directly on a canvas.
#CSS #WebDev #OpenSource
1/4
There are still many limitations to using `mask`. I believe improving `border-shape` is the better approach; we can use `border-shape` directly to define icon shapes, and it allows us to apply borders or `box-shadow` easily and elegantly.
github.com/w3c/csswg-dr...
cc @nomster.bsky.social
github.com/w3c/csswg-dr...
cc @nomster.bsky.social
[css-borders-4] Allow overriding single-shape `border-shape` color/width · Issue #13506 · w3c/csswg-drafts
The single-variant border-shape uses one of the border edges to select a border color and width. This is usually OK, but in some cases it's counterintuitive, especially given that backgrounds are n...
github.com
October 12, 2026 at 8:32 AM
There are still many limitations to using `mask`. I believe improving `border-shape` is the better approach; we can use `border-shape` directly to define icon shapes, and it allows us to apply borders or `box-shadow` easily and elegantly.
github.com/w3c/csswg-dr...
cc @nomster.bsky.social
github.com/w3c/csswg-dr...
cc @nomster.bsky.social
[some-subscribed-rss] New Post: This Website Is Now Made in Swift, by https://sindresorhus.com/blog/swift-website
October 10, 2026 at 9:44 PM
[some-subscribed-rss] New Post: This Website Is Now Made in Swift, by https://sindresorhus.com/blog/swift-website
We're launching GSS today on Product Hunt!!
Exciting day for #GSS
Go check it out! producthunt.com/products/gss...
And you can also check out the GSS demo of the ProductHunt logo!
🔗 tinyurl.com/GSS-PH-launch
Exciting day for #GSS
Go check it out! producthunt.com/products/gss...
And you can also check out the GSS demo of the ProductHunt logo!
🔗 tinyurl.com/GSS-PH-launch
October 7, 2026 at 10:06 AM
We're launching GSS today on Product Hunt!!
Exciting day for #GSS
Go check it out! producthunt.com/products/gss...
And you can also check out the GSS demo of the ProductHunt logo!
🔗 tinyurl.com/GSS-PH-launch
Exciting day for #GSS
Go check it out! producthunt.com/products/gss...
And you can also check out the GSS demo of the ProductHunt logo!
🔗 tinyurl.com/GSS-PH-launch
I also wrote an article about CSS Level 2 shapes.
Read it in English, Spanish, or French:
lionel-peramo.com/posts/css-sh...
How do you create your custom CSS masks today?
Share your workflow in the replies.
4/4
Read it in English, Spanish, or French:
lionel-peramo.com/posts/css-sh...
How do you create your custom CSS masks today?
Share your workflow in the replies.
4/4
October 6, 2026 at 8:01 AM
I also wrote an article about CSS Level 2 shapes.
Read it in English, Spanish, or French:
lionel-peramo.com/posts/css-sh...
How do you create your custom CSS masks today?
Share your workflow in the replies.
4/4
Read it in English, Spanish, or French:
lionel-peramo.com/posts/css-sh...
How do you create your custom CSS masks today?
Share your workflow in the replies.
4/4
Here are the main features of the editor:
1. Real-time canvas.
Drag anchor points with your mouse or keyboard.
Change units between pixels, percentages, and REM.
2. Code generator.
Copy ready-to-use CSS clip-path code.
Test transitions between shapes.
2/4
1. Real-time canvas.
Drag anchor points with your mouse or keyboard.
Change units between pixels, percentages, and REM.
2. Code generator.
Copy ready-to-use CSS clip-path code.
Test transitions between shapes.
2/4
October 6, 2026 at 8:01 AM
Here are the main features of the editor:
1. Real-time canvas.
Drag anchor points with your mouse or keyboard.
Change units between pixels, percentages, and REM.
2. Code generator.
Copy ready-to-use CSS clip-path code.
Test transitions between shapes.
2/4
1. Real-time canvas.
Drag anchor points with your mouse or keyboard.
Change units between pixels, percentages, and REM.
2. Code generator.
Copy ready-to-use CSS clip-path code.
Test transitions between shapes.
2/4
🧵 epubveri 0.21.0 is out. It is a pure-Rust EPUB validator, an alternative to epubcheck that needs no Java: one small binary, or WASM in the browser.
github.com/veripublica/epubveri/releases/tag/v0.21.0
#EPUB #ebooks #epubcheck #Rust #OpenSource #WebAssembly
github.com/veripublica/epubveri/releases/tag/v0.21.0
#EPUB #ebooks #epubcheck #Rust #OpenSource #WebAssembly
Release v0.21.0 · veripublica/epubveri
A CSS syntax error now says what is wrong, and two CSS false positives are
gone. CSS-008 used to read "CSS syntax error" whatever the problem was. It
now names the problem and quotes it. Two shapes...
github.com
October 2, 2026 at 2:09 PM
🧵 epubveri 0.21.0 is out. It is a pure-Rust EPUB validator, an alternative to epubcheck that needs no Java: one small binary, or WASM in the browser.
github.com/veripublica/epubveri/releases/tag/v0.21.0
#EPUB #ebooks #epubcheck #Rust #OpenSource #WebAssembly
github.com/veripublica/epubveri/releases/tag/v0.21.0
#EPUB #ebooks #epubcheck #Rust #OpenSource #WebAssembly
"always use classes" is CSS bast practice but it has resulted in DIV "buttons". By being more opinionated in CSS you can drive better, more semantic, HTML behaviour.
www.craigabbott.co.uk/blog/2026/ou...
www.craigabbott.co.uk/blog/2026/ou...
October 2, 2026 at 10:40 AM
"always use classes" is CSS bast practice but it has resulted in DIV "buttons". By being more opinionated in CSS you can drive better, more semantic, HTML behaviour.
www.craigabbott.co.uk/blog/2026/ou...
www.craigabbott.co.uk/blog/2026/ou...
have been fucking around with css because i've honestly wanted to rework the look of Tiyu Amara for *ages* since i never leant into the papercraft aesthetic the theme was meant to be supporting. not even close to done but im kinda fucking with the look so far
October 1, 2026 at 3:47 PM
have been fucking around with css because i've honestly wanted to rework the look of Tiyu Amara for *ages* since i never leant into the papercraft aesthetic the theme was meant to be supporting. not even close to done but im kinda fucking with the look so far
I built this fun CSS animation using HTML & CSS ✨
Playing with shapes, movement, and animation is one of my favorite ways to experiment with CSS and learn new tricks. 💻
Playing with shapes, movement, and animation is one of my favorite ways to experiment with CSS and learn new tricks. 💻
September 29, 2026 at 12:05 AM
I built this fun CSS animation using HTML & CSS ✨
Playing with shapes, movement, and animation is one of my favorite ways to experiment with CSS and learn new tricks. 💻
Playing with shapes, movement, and animation is one of my favorite ways to experiment with CSS and learn new tricks. 💻
CSS Art – shape() Function & Gradients: Build an Isometric Snare Drum - Part 2
pyxo.me/686978 #pyxofy #cssart #codenewbie
pyxo.me/686978 #pyxofy #cssart #codenewbie
shape() Function & Gradients: Build an Isometric Snare Drum - Part 2
Think beyond rectangles! Discover how the shape() function can turn ordinary elements into rounded shapes with depth and style.
pyxo.me
September 27, 2026 at 7:49 AM
CSS Art – shape() Function & Gradients: Build an Isometric Snare Drum - Part 2
pyxo.me/686978 #pyxofy #cssart #codenewbie
pyxo.me/686978 #pyxofy #cssart #codenewbie
CSS Art – shape() Function & Gradients: Build an Isometric Snare Drum - Part 2
pyxo.me/686978 #pyxofy #cssart #codenewbie
pyxo.me/686978 #pyxofy #cssart #codenewbie
shape() Function & Gradients: Build an Isometric Snare Drum - Part 2
Think beyond rectangles! Discover how the shape() function can turn ordinary elements into rounded shapes with depth and style.
pyxo.me
September 26, 2026 at 10:09 PM
CSS Art – shape() Function & Gradients: Build an Isometric Snare Drum - Part 2
pyxo.me/686978 #pyxofy #cssart #codenewbie
pyxo.me/686978 #pyxofy #cssart #codenewbie
Create CSS patterns and graphics with minimal code.
- Draw grids, backgrounds, and icons
- Generate random colors and shapes
- Preview or export images and video
- Draw grids, backgrounds, and icons
- Generate random colors and shapes
- Preview or export images and video
September 26, 2026 at 1:30 AM
Create CSS patterns and graphics with minimal code.
- Draw grids, backgrounds, and icons
- Generate random colors and shapes
- Preview or export images and video
- Draw grids, backgrounds, and icons
- Generate random colors and shapes
- Preview or export images and video
💡CSS Tip!
Creating CSS Shapes is one of my favorite tasks, and now I can do something even better: Random CSS Shapes!
Let's start with Blobs.
css-tip.com/random-blob/
You never see the same shape twice. A unique shape for a unique experience! 👀
Creating CSS Shapes is one of my favorite tasks, and now I can do something even better: Random CSS Shapes!
Let's start with Blobs.
css-tip.com/random-blob/
You never see the same shape twice. A unique shape for a unique experience! 👀
September 22, 2026 at 10:31 AM
💡CSS Tip!
Creating CSS Shapes is one of my favorite tasks, and now I can do something even better: Random CSS Shapes!
Let's start with Blobs.
css-tip.com/random-blob/
You never see the same shape twice. A unique shape for a unique experience! 👀
Creating CSS Shapes is one of my favorite tasks, and now I can do something even better: Random CSS Shapes!
Let's start with Blobs.
css-tip.com/random-blob/
You never see the same shape twice. A unique shape for a unique experience! 👀
A quick look at creating CSS shapes with the path inspector in Firefox:
youtu.be/aI4rqV2b7BY
That's clipped from one of my past workshops, but I have another one coming up soon. Let's talk about writing maintainable #CSS!
smashingconf.com/online-works...
youtu.be/aI4rqV2b7BY
That's clipped from one of my past workshops, but I have another one coming up soon. Let's talk about writing maintainable #CSS!
smashingconf.com/online-works...
Flow text around different shapes in CSS
YouTube video by Winging It
youtu.be
September 18, 2026 at 4:17 PM
A quick look at creating CSS shapes with the path inspector in Firefox:
youtu.be/aI4rqV2b7BY
That's clipped from one of my past workshops, but I have another one coming up soon. Let's talk about writing maintainable #CSS!
smashingconf.com/online-works...
youtu.be/aI4rqV2b7BY
That's clipped from one of my past workshops, but I have another one coming up soon. Let's talk about writing maintainable #CSS!
smashingconf.com/online-works...
💡 CSS Tip!
border-shape + border-area = The perfect combo 🪄
3 lines of code to create border-only shapes with gradient coloration. Absolutely any shapes, even the most complex ones! 👀
css-tip.com/gradient-sha...
Save the code for the future (a near future!)
border-shape + border-area = The perfect combo 🪄
3 lines of code to create border-only shapes with gradient coloration. Absolutely any shapes, even the most complex ones! 👀
css-tip.com/gradient-sha...
Save the code for the future (a near future!)
September 17, 2026 at 10:45 AM
💡 CSS Tip!
border-shape + border-area = The perfect combo 🪄
3 lines of code to create border-only shapes with gradient coloration. Absolutely any shapes, even the most complex ones! 👀
css-tip.com/gradient-sha...
Save the code for the future (a near future!)
border-shape + border-area = The perfect combo 🪄
3 lines of code to create border-only shapes with gradient coloration. Absolutely any shapes, even the most complex ones! 👀
css-tip.com/gradient-sha...
Save the code for the future (a near future!)
What is the best tool for creating such shapes and exporting them as code for CSS?
September 16, 2026 at 5:12 AM
What is the best tool for creating such shapes and exporting them as code for CSS?
For folks wanting `corner-shape` to be available across browsers, would `border-shape` work for you instead?
Answer here: github.com/web-platform...
Answer here: github.com/web-platform...
corner-shape · Issue #398 · web-platform-dx/developer-signals
This GitHub issue is for collecting web developer signals for corner-shape. The corner-shape CSS property sets the shape of an element's corners when using border-radius, allowing for shapes other ...
github.com
September 16, 2026 at 2:26 PM
For folks wanting `corner-shape` to be available across browsers, would `border-shape` work for you instead?
Answer here: github.com/web-platform...
Answer here: github.com/web-platform...
Responsive shapes with CSS shape() ronaldsvilcins.com/2026/09/10/d...
#css #html #programming #webdev #javascript #code #blog #article #rss #blogging
#css #html #programming #webdev #javascript #code #blog #article #rss #blogging
Responsive shapes with CSS shape() · Ronalds Vilciņš
Use the CSS shape() function for scalable clipping paths with lines and curves, while keeping a simple fallback.
ronaldsvilcins.com
September 14, 2026 at 2:51 PM
Responsive shapes with CSS shape() ronaldsvilcins.com/2026/09/10/d...
#css #html #programming #webdev #javascript #code #blog #article #rss #blogging
#css #html #programming #webdev #javascript #code #blog #article #rss #blogging