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 element Uses em to ensure it is consistent with the font…
Continue reading →
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, and then gradually improve its quality. WebP, by contrast, just loads up the full image line by line. That's can be annoying on a slow connection. What if we could change…
Continue reading →
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 is intended for websites to remove their own style sheets - as this blog has done. The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of HTML,…
Continue reading →
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 anywhere. I'd already experimented with about.me/edent as a contact site - but even that seemed too weighty for my needs. Here's how I used CSS to craft a beautiful homepage, HTML5 to give…
Continue reading →
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. 🔊 Celeste🎤 Alex Fitch 💾 Download this audio file. (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 we could have something like this? Well, the player is from MediaElement.js - it's just HTML, CSS, and JavaScript. <div class="m…
Continue reading →
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 smilie is ☺. Depending on your system, it will look something like this: From Tim Whitlock So far, so nifty! But here we hit a snag. Not every computer has a font which contains all t…
Continue reading →
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 are blue, headlines are big, images have borders etc. etc. Users, however, can over-ride these styles using their own CSS. For example, a person with poor vision may decided to pump up all …
Continue reading →
