Blog
Show blog posts by year
html javascript css php bash xml general arduino framework node testing accessibility angular regex svg cli translations
-
Testing Colour Blindness Effects Online with SVG Filters
One of the basic rules of accessibility is to not convey information through colour alone. The WCAG lists use of colour as a Level A issue, specifically saying: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. This criterion is aimed at those people with visual disabilities, or problems that have…
-
Building an Accessibility Browser Plugin
I was recently talking with a former colleague about testing for accessibility, and specifically being able to run an automated test over a website to reduce the time needed to test. My answer then was that there is no way to fully automate testing for accessibility; there's no test that exists which can rubber stamp your website and give it passing marks. But it did give me an idea. Right now,…
-
One Div CSS Halloween Spooks and Ghouls
Playing around with CSS to create single <div> works of art is, while largely useless for production-worthy code, a lot of fun, especially to see how far a technique can be pushed. In the past I've created CSS Animals and even an animated BB8. Contents Ghost Gravestone Pumpkin Frankenstein's Monster The Head The Neck Animating the Eyes Conclusion …
-
Accessible Modal Dialogs
Modal dialogues are a part of the web whether we like them or not, and there's plenty of reason to not like them when they're implemented in a really intrusive way. They do serve a very useful purpose though; they allow extra content to be presented to the user in a way that temporarily breaks out of the normal flow of the page without altering the existing content flow. Contents What Should…
-
Accessible Tables
For many years, tables were the only tool available to lay out our websites as we wanted to achieve something that went beyond what you'd probably come to expect with your typical word-processed documents. Then for the last decade (or so) we were told that tables were evil, and using them was a sin that would earn us a spot in the 6th circle of IT hell. More recently we've learned that that anti-table…
-
Interactive Burger Menu with SVG, CSS and no JavaScript!
CSS goes far beyond being just a styling language for HTML, allowing you to style any XML based language too. This includes SVG documents, which becomes a powerful tool for achieving some great affects without the use of JavaScript. This experiment blends HTML and SVG to create a menu where you make your own burger by selecting what you want from the menu. To start things off (as I'm really…
-
Single Div CSS Mona Lisa
In the world of CSS, there is little as fun and challenging as the single <div> challenge. It's a creative idea that's been taken to some impressive lengths by Lynn Fisher of the 'A Single Div' website. The technique has been picked up by many front-end developers, who have created some amazing works with it, like Sasha's Mike Wazowski, and the wonderfully festive Christmas tree by Ari…
-
CSS Zoo
I enjoy playing around with CSS and using it for more than just styling traditional web pages. It lead me to experiment by making a few animals using no more than a handful of HTML tags. At the core of each is the main containing <div> tag, this operates as the face and the container for the other elements. They generally have the same kind of round shape, which is all just achieved with border-radius…
-
A Better Radial Menu With Pure CSS
I recently saw a Pen on CodePen with an animated menu using blend modes. The overall effect was quite nice, but I noticed it was relying on JavaScript to toggle the animation, and as an example it wasn't particularly flexible, as those values were tied into the 5 items shown. I set about recreating the effect but with pure CSS, and took it a little further using some SASS to allow it to a varying…
-
Pure CSS Star Wars BB8
Star Wars is as popular today as it ever was, and the new android BB8 has found many new fans. I thought it would be a perfect object to recreate in pure CSS. The HTML for this is very simple, a single tag for the head, one for the body, and another to wrap them both and make the CSS more specific when the HTML is placed within another document: <div class="bb8"> <div class="head"><…
-
Pure CSS Tree Menu
The new selectors in CSS3 are very powerful, and allow for some interesting ways of creating interactivity on a website that doesn't rely on JavaScript. Typically, a lot of these new techniques are available in the majority of web browsers being used with the obvious exception of IE up tp and including 8, which limits their usefulness when compared with current JavaScript solutions, but that shouldn't…
-
Getting the most out of CSS selectors
Selectors in CSS are one of the most powerful and useful features you have at your disposal, and yet seem to be little used to its potential. Complex selectors solve the problem of targeting specific elements on a page (and in some browsers, elements that fall under certain conditions as well) One alternative to selectors which some developers find popular is to give every element that needs to be…
-
Nested Lists with Overriding Styles
Nested tree menus are often a useful way of portraying hierarchical data, and are most commonly used to display directory trees to a user. Semantically, the best way to create them is with proper list markup. The problem with nested lists, is that, by default, they all have the same amount of padding, which is often annoying for the topmost list item. What might seem an obvious solution is not the…
-
CSS Media Types
CSS Media Types CSS is a wonderful thing, but most people only ever use it for styling HTML on a regular computer screen. The fact is, CSS has, right from the beginning, had a much wider potential audience. The following code excerpt shows you how you might use alternative stylesheets for rendering your web page on some form of media that isn't a compupter screen: <link rel="stylesheet" type=…
-
Change Selected Text Colours
::selection { background-color: #f00 !important; color: #fff !important; } ::-moz-selection { background-color: #f00 !important; color: #fff !important; } It can be frustrating sometimes to design a website, only to have the operating systm of a visitor change a bunch of the colours it uses for everything. One annoying example is the text selection colours. Thankfully, CSS can help…
