Tag: web design
-
Styling :visited links using hue-rotation
My new site theme offers a :visited link style, but for convenience it's based on a CSS hsl-transformation. Here's how it works...
-
After months of minor tweaks, on-and-off, I finally bit the bullet and hit "publish" on my new theme for DanQ.me. It's not perfect; it's got all kinds of bugs... but what's the point of having a personal webite if you can't trash it once in a while with an ill-advised "fun" rework, right?
Alt
Screenshot of DanQ.me with comic avatars of Dan, pride colours, and a 'fun'-feeling theme (plus semi-retro 'under construction' banner!).
-
Recreating a 1990 Book Cover (in HTML + CSS)
This weekend, I became briefly obsessed with the graphic design of the cover of a manual of a piece of software released in 1990. So I re-created it in HTML + CSS, as you do.
-
Setting the width of selects to the width of the selected option
Sometimes a new CSS feature comes along and I immediately "get it". Like: that's a cool new feature, I can already see how it'll save me time, or make things simpler, or improve accessibility, or allow me to do something new. Other times...
-
A Selfhosted Static Site Editor
Inspired by the way that Nekoweb's editor 'Nekode' works, I came up with a low-effort way to let my eldest get started with HTML and CSS editing, right from her browser, with the results selfhosted directly from the household NAS.
-
88x31 Button Creator
Dan of ritual.sh has produced an absolutely epic 88×31 button generator; well worth playing with if you're into that kind of thing.
-
For anyone who :has :not yet seen the magic of modern CSS
CSS is all grown-up, and the combination of nested selectors, variables, :not, and :has unlocks a wealth of potential for interactivity and customisation without resorting to (the slower and brittler approach of) JavaScript. Let me show you two examples from my recent editor history.
-
This form dynamically changes the labels for the Surname and Forename field based on the value of the Gender field. Wut?
Because a Male Surname is totally distinct and nothing like a Female Surname, I guess?!?
Alt
A form asking for Surname, Forename and Gender (with options Male, Female, and Both) changes its labels to e.g. Male Surname/Male Forename or Female Surname/Female Forename when the Gender option is changed.
-
Best Viewed at: Your Resolution!
As the latest in a series of stupid things I've done on or for the Web, I've made a website that dynamically generates 'best viewed at' buttons... for exactly the Web visitor's current screen resolution...
-
Developing an alt text button for images on my website
James has come up with a fun way to do Mastodon-like alt-text-bubbles. I'm intrigued, and am looking forward to expanding on the idea when I get the chance to try implementing it on my own blog.
-
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!
-
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.
-
Geocities Live
Geocities.live transforms any web page into a 90s-Geocities-style variant of itself, and it does a surprisingly good (if slightly "samey") job of it. Its take on DanQ.me got me thinking, though: are there things I can learn from 1990s web design and apply to the next generation of my theme?
-
My love of the yesterweb forced me to teach myself just-enough Blender to make an animation for a stupid thing: an 88x31 button representing "me" (and, I suppose, my blog, whenever I next end up redesigning its theme).
Alt
88x31 animated GIF button in the Web 1.0 style, reading "DAN Q". The letter Q is spinning.
Alt
The same image, but expanded so it's larger.
-
Possible future presentation concept: using a cafe/dining metaphor to help explain the proximity principle in user interface design (possibly with a "live waitstaffing" demo?).
Great idea? Or stupid idea?
Alt
Photo looking down on a square wooden table in a cafe environment. Far from the photographer, a plate containing a couple of crumbs is pushed far to the other side of the table. Closer to him is a cup of coffee, two folded napkins, and an open MacBook. Arrows and captions draw attention to the relative distances between the components of the scene, labelling them as follows - "I am finished with this plate..." (refering to its relative distance), "...but I'm keeping this napkin" (which is closer to the coffee than the discarded plate), "I'm keeping the napkin while I finish my drink" (the two are close together), and "I'm working" (based on the relative position of the photographer and his laptop).