Blog

::before and ::after

Notes on the two pseudo elements and video by Kevin Powell.

:is() and :where()

A pseudo selector that will change the way we write CSS.

:not()

About the CSS not pseudo selector

@property

How to use @property for custom props

@scope

How to use the new @scope rule

@supports

Using the @supports feature query.

Active Links in Hugo

How to target the link in a list that points to the current page in Hugo.

Adding SVGs to CSS

How to add inline SVG code directly in a CSS file

Anchor Positioning

Anchor positioning comes hot on the heals of the popover api and is a great addition to using popovers.

Animated Details

Here’s a pure CSS way to animate the HTML details element.

Animated Underline

An animated gradient underline

Attribute Selectors

Selecting HTML elements based upon their attributes

Back to Top

How to create a floating back to top link

Backdrop Filter

Demo of the CSS backdrop-filter.

Button Hover Swipe

How to make background swipes on buttons using CSS gradients.

Button Hover Swipe 2

Making a background change using pseudo elements.

Cascade Layers

An overview of cascade layers

Centering

How to centre in CSS with and without using grid.

Clamp for Font Size

The best way to use the clamp property for font-sizing.

Codepen Shortcode

How I created my Hugo shortcode for embedding Codepens.

color-mix()

Using the color-mix() function

Coming Up

A list of topics I hope to add to the site in the future

Corner Shape

Using the new corner-shape property

CSS I Didn't Know

A list of older CSS I was not familiar with until now.

CSS More Links

A quick dump of links to CSS sites and articles on generators, animation, boilerplates and showcase site.

Custom Cursors

How to use a custom cursor with CSS

Dark Mode

CSS has had a lot of extra properties useful for dark mode. Here’s a look at what they are what they do.

Dark Mode CSS Only

An ingenious way to make a theme switcher using only CSS.

Design Update

A few brief thoughts from I added a prefers-theme dark to this web site.

Dialog and Modals

How to use the HTML dialog element

display:none transitions

How to make an animation when transitioning to and from display: none

Fancy Menu Hover Effects

Delving into the complexities of adding fancy hover effects with pseudo-elements.

First Letter

The CSS :first-letter pseudo selector and upcoming initial-letter.

Flip an Image

How to flip an image over with CSS using the scale() function.

Font

The font property is shorthand for several other properties but whilst simple also adds some complexity.

Gradient Experiments

Some things you can do with gradients.

Grid Accordian

How to create an accordian using CSS grid

HSL Colours

The colour wheel and the HSL colour function.

Initial Unset Revert

How these 3 values differ.

Keeping the Footer down

How get the footer to stay at the bottom of the viewport.

Line Clamp

Using the line-clamp property today with the -webkit- requirements.

List Styles

Styling lists

Min, Max, and Fit Content

A look at the differences for these width settings.

Pure CSS Carousel

How to make a pure CSS carousel using several new CSS features like ::scroll-button

Responsive Columns

How to make columns responsive

Responsive Made Easy

An overview of responsive techniques I find most useful.

Roadmap

list of modification I want to make to this site.

Scroll Animation 1

CSS scroll based animation using a scroll progress timeline.

Scrolling

Using CSS to control scrolling

Search Animation

The code from my search dialog.

Styling blockquotes

Why styling blockquotes with pseudo elements can be tricky.

Styling Forms

Tips on styling forms by Kevin Powell

SVGs in pseudo elements

Adding a simple SVG to a CSS pseudo element can be tricky. Here’s how to do it.

Adding a TOC in Hugo then using CSS to query select the layout

Target Grid Rows

How to target grid rows or columns using the nth-child selector.

Text Wrap

The new text-wrap property

The popover API

How the popover API works, what it does and how to use it.

The State of CSS 2021

Some things I plan to add in the near future

Tools 01

Useful tools for web design & development.

Triangles

Use borders to create a triangle.

Type & Fonts

Choosing a typeface, cloud based vs site based fonts, Open Font Library and some fave fonts.

Various 1

Lotsa stuff inc. object-fit, resize, style order, the main tag and more

Various 2

retro colours by CSS name, absolute positioning, CSS custom properties & more

Various 3

Some interesting ways to style headings and text

Various 4

Kevin Powell’s most popular CSS tips