Better Keyboard Buttons in CSS

by @edent | # # # # | 2 comments | Read ~1,027 times.
A pet cat typing on a computer keyboard.

Here’s a simple scrap of CSS which you can Ctrl+C and Ctrl+V kbd { border: .1em solid #aaa; border-radius: 15%; display: inline-block; padding: .1em .5em; background: linear-gradient(180deg, #fff, #fff, #fff, #ddd); user-select: none; cursor: pointer; color: #000; font-weight: bold; } kbd:hover { background: linear-gradient(0deg, #fff, #fff, #fff, #ddd); } Features Semantic use of the kbd…

Continue reading →

How to fake Progressive WebP Images

by @edent | # # # # | 9 comments | Read ~184 times.
Extremely fuzzy photo.

WebP is the hip new image format on the scene. It offers unrivalled image compression at superior visual quality. But, in my opinion, it is deficient compared to JPG in one significant aspect. It doesn’t have a progressive mode. Progressive mode is useful because it can quickly load a low resolution preview of an image,…

Continue reading →

This blog strips off for CSS Naked Day

by @edent | # # # # | 2 comments | Read ~182 times.
Firefox menu. Go to View, the Page Style, then No Style.

Half-a-dozen years ago, I proposed that web developers spend one day a year browsing without JavaScript. It’s a great way to see how the web works when things break. Similarly, April 9th is CSS Naked Day. A chance to throw off the shackles of good design, and see the raw beauty of your HTML. Today…

Continue reading →

How I built a responsive & semantic "Contact Me" page in under 16KB

by @edent | # # # # # # | 1 comment | Read ~8,535 times.

Recently, I’ve become obsessed with the speed and efficiency of my web sites. I’m in the middle of slimming down this blog – but I thought I’d take a first attempt at my contact site – https://edent.tel/ A few weeks ago, the .tel registry released their domain restrictions – users can now host their site…

Continue reading →

How To Style WordPress's Audio Player?

by @edent | # # | 1 comment | Read ~1,928 times.

WordPress has a built in media player. Chuck in an .MP3 or other sound file, and it will play directly in the browser. Nifty! The only problem is that is looks a bit… dull. (From Alex Fitch’s Eola) It works, but it’s not exactly what you’d call gorgeous, is it? Wouldn’t it be nice if…

Continue reading →

How To Use System Emoji With Webfonts?

by @edent | # # # | Read ~7,139 times.

tl;dr – If a mobile web browser recognises an Emoji, it should display it natively. If not, it should fall back to a supplied web font. Is this possible? When Android and iOS find Emoji in text, rather than display them as black-and-white fonts, they show them off in gorgeous colour. For example, the unicode…

Continue reading →

Make Facebook (and other sites) Less Annoying Using CSS

by @edent | # # # # | Read ~829 times.

I’m really late to the party on this one – so this blog post is mostly an aide-mémoire. The web is built on three fundamental components: HTML – the structure of the page. CSS – how the page is styled. JavaScript – the interactivity. Typically, the website owner sets up the CSS to say links…

Continue reading →