A few years ago I made a Venn diagram using floats and absolute positioning. It was fine. Nothing to really brag about, but it got the point across.

I had use for CSS shapes in a project and wanted to play around beyond what the project itself allowed. I decided to revisit my Venn diagram and create something a bit more modern and flexible. This also gave me a chance to play with CSS grid overlaps, which I had not done yet simply because I had no reason.

This post is just a summation of what I made with some stuff I learned. To start, take a look at the base model of my CSS Grid and Shape-Outside Venn Diagram, also embedded immediately below.

One of my all-time favourite CSS tricks is using backdrop-filter: blur() to create a frosted glass effect. I use it in just about every project I work on, including this blog!

Here’s a quick demo, to show what I’m talking about:

This is an example website showing how I typically use backdrop-filter to create glassy headers.

Notice that as the cupcake moves behind the header, it appears blurry, as it would if it was passing behind frosted glass.

This effect helps us add depth and realism to our projects. It’s lovely.

But when I see this effect in the wild, it’s almost always missing some crucial optimizations. A couple of small changes can make our frosted glass so much more lush and realistic!

In this post, you’ll learn how to make the slickest frosted glass ever ✨. We’ll also learn quite a bit about CSS filters along the way!

An interactive playground for learning and testing CSS selectors in a visual way.

Access 271+ ready-to-use components and code snippets for HTML, React, CSS, and Tailwind CSS. Save development time with these pre-built solutions.

Have you ever wanted a quick view of your responsive breakpoints? This tool helps you see the relationship between breakpoints for dialing in UI. Change the breakpoints to fit your needs. Change text and color and make it your own.

• Blumed (Cullan)

A cartoon-style water effect with custom shaders, optimized for performance, built with React Three Fiber.

• Creating Stylized Water Effects with React Three Fiber Codrops
• GitHub - thaslle/stylized-water

That's why this blog (at the time of writing) aims to render the default operating system fonts. After reading Stoyan's post on system fonts I could just do a little spring clean up.

tl;dr

body {
  font-family: system-ui, sans-serif;
}

matcha.css is a pure CSS library designed to style HTML elements similarly to a default browser stylesheet, eliminating the need for users to manually patch their documents.

Ideal for fast prototyping, static HTML pages, Markdown-generated documents, and developers seeking to streamline their workflow without delving into CSS intricacies and want to make use of the full range of available HTML elements.

• ✓ No build steps
• ✓ No dependencies
• ✓ No JavaScript
• ✓ No configuration needed
• ✓ No refactoring required
• ✓ ~8.82kB gzipped

Les animations liées au scroll (ou scroll-driven animations) constituent une nouvelle fonctionnalité CSS permettant de synchroniser des animations avec le défilement d'une page ou d'un conteneur. Cette solution native vient remplacer efficacement les scripts JavaScript habituels, avec une meilleure performance et une implémentation simplifiée de manière générale.

Open source vector icons from all popular icon sets

A quick, fun project over the weekend was removing unused CSS from decoded.

Community-made library of free and customizable UI elements made with CSS or Tailwind. It's all free to copy and use in your projects. Uiverse can save you many hours spent on building & customizing UI components for your next project.

TL;DR

@property --_w {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vw; 
}
@property --_h {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vh; 
}
:root {
  --w: tan(atan2(var(--_w),1px)); /* screen width */
  --h: tan(atan2(var(--_h),1px)); /* screen height*/
  /* The result is an integer without unit  */
}

CSS loading animations with minimal effort!

CSS Grid is one of the most amazing parts of the CSS language. It gives us a ton of new tools we can use to create sophisticated and fluid layouts.

It's also surprisingly complex. It took me quite a while to truly become comfortable with CSS Grid!

In this tutorial, I'm going to share the biggest 💡 lightbulb moments I've had in my own journey with CSS Grid. You'll learn the fundamentals of this layout mode, and see how to do some pretty cool stuff with it. ✨

Voici comment je fais pour rajouter automatiquement une balise autour des emojis présents dans mes articles :

function niceEmoji(text) {
  const emojiRegex = /(\p{ExtPict}(\u200d\p{ExtPict}|\p{EMod})*)/gu;
  return text.replace(emojiRegex, '<span class="u-emoji">$1</span>');
}

The @counter-style CSS at-rule lets you extend predefined list styles and define your own counter styles that are not part of the predefined set of styles. The @counter-style rule contains descriptors defining how the counter value is converted into a string representation.

@counter-style - CSS Cascading Style Sheets MDN

This is a roundup of the best websites where you can find and download free HTML templates built with... Tagged with html, css, webdev, frontend.

Creating shapes using CSS is, without any doubt, a classic exercise. In many cases, we try to use hacky code and workarounds, but CSS has evolved, and we have modern ways to create CSS Shapes with clean, reusable code. In this comprehensive guide, Temani Afif explores different techniques for creating common shapes with the smallest and most flexible code possible.

• The first CSS framework based on Material Design 3.
• 10x smaller than others CSS frameworks based on Material Design.
• Translates Material Design to HTML semantic standard.
• Ready to use with any JS framework.
• Highly focused on DX.