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
-
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
-
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.
-
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.
-
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
-
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
-
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.
-
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.
-
Scrolling
Using CSS to control scrolling
-
Styling blockquotes
Why styling blockquotes with pseudo elements can be tricky.
-
Table of Contents
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 State of CSS 2021
Some things I plan to add in the near future
-
Tools 01
Useful tools for web design & development.
-
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