div.five:before {
  content: "";
  position: absolute;
  border: 5px dashed #FF0000;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
}

div {
  overflow: hidden;
  position: relative;

  text-align:center;
  padding:10px;
  margin-bottom:20px;
}

This article is all about experimenting with modern CSS features. We will combine things like CSS masks, CSS variables, trigonometric functions, @property, and more to create a neat hover effect that would have been extremely difficult to do even a few years ago without the latest and greatest that CSS has to offer.

A list of different options for compiling CSS with Eleventy

David Darnes came at me with a classic RTFM. Turns out Eleventy has a page on the docs for doing exactly this. This method uses Sass and requires a little bit of config. One thing to note is by default this will output all .scss file to the built site, so I added a check to see if the file is named app and if it's not, then skip it. Alternatively you can put your files in an _includes directory and these won't be output (thanks Dave). style: 'compressed' will minimise the CSS.

Stephanie Eckles has an Eleventy plugin for using LightningCSS which handles all the configuration and as a bonus ignores any files that start with _ so they won't get copied to the build folder.

.foo, #bar {
  .baz { /* ... */ }
}

produces the selector .foo .baz, #bar .baz in Sass but :is(.foo, #bar)) .baz in native CSS. This changes the specificity: :is() always has the specificity of its most specific selector,

Sass nesting and native CSS nesting both support syntax that looks like &foo, but it means different things.

Custom Properties have the potential to change how we write and think about CSS.

In most cases, I'd now consider it code smell if a media query or CSS selector swaps one variable for another. Rather than swapping variables it's better to define one variable, set its initial value and change it with a selector or media query.

Responsive designs being created today have to serve more users on more devices and with more varied abilities and preferences than ever before. And size and spacing of elements can quite literally make or break your layout. In this new world, strict pixel values are so Web 2.0. Let’s review modern CSS techniques for building future-forward flexibility into our layouts and components.

Correction in the thumbnail: This video was shot on April 2023

• It's not HTML5 or CSS3 - it's just 'html' and 'css'!
• https://developer.mozilla.org/en-US/docs/Web/HTML - Good documentation but not the spec!
• https://html.spec.whatwg.org/
• Content model - What is legal to nest
• Transparent: a > h1 is ok, but p > a > h1 not ok!
• https://caninclude.glitch.me/
• preload preconnect prefetch prerender for links
• Get your head straight: https://www.youtube.com/watch?v=UW1PEMBdX5E
• <header><main><footer> are important!
• Subheading <hgroup><h1><p> - Not <hgroup><h1><h2>
• Upgrade Your HTML (4 books)
• <menu> - like <ul>
• script - defer async type="module" nomodule
• <template id="mytable"> - Don't have to put html in javascript
• JavaScript is expensive, HTML is almost free!

A three-way color contrast checker for when you remove underlines from links.

https://chipcullen.com/the-contrast-triangle/

In order for your text and links to be accessible, they both need to have sufficient contrast from the background, as well as from each other. This creates a three-way design constraint.

I think the biggest bang for your buck is to learn OKLCH (or, “Oklachroma”)

• It’s based on human perception
• It can define any color
• the chroma value is a number between 0 and 0.37

Boilerform is a little HTML and CSS boilerplate to take the pain away from working with forms.

A deep dive into CSS masking

border-radius: 100vmax;

.full-width {
box-shadow: 0 0 0 100vmax var( --color );
clip-path: inset( 0 -100vmax );
}

The hsl() and hsla() functions also have 0% usage in the data, and they have just as good of support as the hex codes. Why? HSL can do anything HEX can do, except it’s far more readable and easier to adjust. It’s just better, really.

CSS has a lot of pretty rad and powerful features for managing image rendering these days. Let’s leverage some of these, like aspect-ratio, object-fit, and object-position for when we need to use a single image in many different contexts.

A collection of popular layouts and patterns made with CSS

When an element with a position: sticky style is wrapped, and it is the only element inside the wrapper element, this element, which was defined position: sticky will not stick.

When we truly learn the secrets of the Flexbox layout mode, we can build absolutely incredible things. Fluid layouts that stretch and shrink without arbitrary breakpoints. In this action-packed interactive tutorial, we'll pop the hood on the Flexbox algorithm and learn how to do remarkable things with it. ✨

CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities.

built with 🌮 by sarah_edo

You can set the numbers, and units of your columns and rows, and I'll generate a CSS grid for you! Drag within the boxes to create divs placed within the grid.

Though this project can get a basic layout started for you, this project is not a comprehensive tour of CSS Grid capabilities. It is a way for you to use CSS Grid features quickly.

Illustrated tips for making your UI and web designs more visually interesting · Backgrounds · Borders & dividers · Shadows · Text · Other techniques