Skip to main content
Dublin Library

The Publishing Project

Tagged “CSS”

--- desc: ---
Another set of possible color palettes

This post is an extension to the previous one What are Triadic and Tetradic Color Palettes and How to Use Them. It will explore further types of palettes, also known as harmonies in color theory, and...

What are Triadic and Tetradic Color Palettes and How to Use Them

In my last post Creating an OKLCH Generator Tool, I wrote about about Triadic and Tetradic palettes and how to build them using vanilla JS. This post will cover what these palettes are and how to use...

Creating an OKLCH generator tool

This code started as an exercise in ChatGPT prompt generation and a way to explore what we can do with OKLCH colors. It uses vanilla Javascript and deliberately avoids using libraries like Chroma.js...

Reading on the Web

This post will look at two areas related to reading online: How people read online How to determine optimal font sizes? Is there such a thing? If people scan the content of your page, what font size...

A declarative web?

Jeremy Keith recently published Declarative design on his blog. The premise of the post is that there are two divergent ways to think about web design and building web content, encapsulated by these...

Playing with CSS Selectors

CSS has evolved significantly over the last few years. Some of these changes deal with a set of selectors known as the functional pseudo-classes. The :not() pseudo-class has been around for a while...

Evergreen may not mean what you think it does

Evergreen browsers are those that update themselves automatically, or very close to it, without user intervention. This is particularly useful when it comes to new features. We don't have to wait for...

Scripting Support Media Query

I know that it's unlikely people will disable Javascript on their browsers, but it is not impossible. We can notify the user of the lack of Javascript using the scripting media query. This example...

Select an element which doesn't descend from another in CSS

There may be times when we may want to style elements that are not direct descendants of the elements that we want to style. In Select an Element Which Doesn't Descend From Another in CSS Chris...

Use margin-trim to trim the bottom margin on the last child

When writing CSS one of the most annoying and repeating tasks is having to customize the styles for the last element in a list or other repetitive components. I've lost track of how many times I've...

Revisiting the display property

The display property has been around for a long time but its definition has evolved over the years. Formally, the display property sets an element's inner and outer display types. The outer type sets...

Animating Variable Fonts (2023)

One thing I particularly like about variable fonts is that it allows some interesting animation tricks. For example, since variable fonts have information about all possible variations of the font, we...

Coloring Text With Gradients

In addition to black and white or single, solid-color text, we can also use gradients to color the text. The process is slightly more complicated than just assigning color to the desired...

Creating Sane CSS defaults

Both Eric Meyer's Reset and Normalize.css are comprehensive solutions to provide a baseline for CSS development. Can I build a set of defaults that make sense for my projects on top of these resets?...

An Interesting Image CSS Reset

I came accross reset from Harry Roberts (from Twitter/X) via (Kevin Powell's YouTube video). I've adapted the reset by eliminating the low quality image resource. I don't need the low quality images...

For when you know you will print

There are times when we know that users will print a page of web content. Maybe a set of directions for a recipe, a map with directions or a page of information that we want to preserve. While it's...

Defining multiple syntax in CSS variables

In Revisiting Custom Properties we looked at how to define custom properties using the @property at-rule. One aspect of @property that we didn't discuss are the syntax multipliers and...

Revisiting Critical CSS

Crtical CSS is simple in theory but not so much in execution. In this post we'll look at what critical CSS is, how does it work and whether it's still necessary for all use cases. What is Critical CSS...

Fixing Issues With Pre-formatted Inline Text

While researching about using resets as the basis for custom project defaults, I came accross this solution to a problem I was having. pre, code, kbd, samp The font-family: monospace, monospace hack...

Link to Archive

See all tags.