Tag: css
-
Details/summary lightboxes in pure HTML + CSS
For years, I've been using a HTML+CSS-only technique for popover 'lightbox' images on my blog. Now I've come up with a more-semantic way to do the same, and its HTML code is tidier too!
-
Please Fix This Site? Okay!
PleaseFixThisSite.com is a funny web-based take on that XKCD comic about extorting graphic designers who hate your design choices. But you don't actually need to pay the extortionist to "fix" their site. Just have your userscript manager run a few lines of my code, and the effect is much the same.
-
Dynamic Filters in Pure CSS
CSS is powerful and performant. Let's implement client-side list filtering (with the user's choice of AND and OR modes) in CSS, without a line of JavaScript.
-
Variable-aspect adaptive-bitrate video... in vanilla HTML?
Thanks to recent browser enhancements, it's possible to show videos of different aspect ratios based on CSS media queries with no JavaScript dependencies. You can even combine it with adaptive bitrate streaming, even on static hosting. Let me show you how.
-
Build Colors from Colors with CSS Relative Color Syntax
Caleb Hearth wrote an inspiring piece about CSS's new OKLCH functions, and now I want nothing more than to (re-?)implement something using this colour model!
-
CSS Cycling Gradient Text
Ana Tudor shared an absolutely gorgeous effect based on SVG filters, CSS properties, linear-gradients, and (after all of that) relatively-basic animations. It's pretty amazing.
-
Blogging Like It's 1999
After looking at a 1999 screenshot of my blog, I was inspired to implement an alternate theme for my blog today, that brings back the feel of the Web of the last millenium. And you can try it!
-
The Stupidest CSS
Yesterday, I wrote the stupidest CSS code of my entire web development career. The code itself wasn't the stupid bit; my misinterpretation of the designer's wishes was what caused the problem!
-
Lightboxes Without JavaScript
An image lightbox overlay with no JavaScript whatsoever? Absolutely. Here's how I do it.
-
The Page With No Code
View Source shows nothing, but the page has content. The Page With No Code is the kind of puzzle that makes web developers unhappy.
-
I know what it means, but my inner child still sniggers every time I see @CSSAnimista's effect "kenburns-bottom".
-
The Fourth Way to Inject CSS
Dan explains why using Link: HTTP headers for stylesheets should be considered a distinct way of loading CSS (that you can't use).
-
CSS Logical Properties
Andy Bell recommends use of CSS logical properties to help lay out and space content in a language-independent way.
-
Loading CSS Asynchronously Without JS Dependency
Dan proposes a new technique for lazy-loading CSS which doesn't break style for non-JS users.
-
Old CSS, new CSS
eevee describes their experience of the early-CSS and pre-CSS Web, and Dan echoes a familiarity with the topics covered.