Latest Posts

Mar 01 Wednesday

User Manageable Workflows

This is a small proof of concept idea, to allow users, to manage their own business process workflows, within a web application After not finding anything really suitable, I embarked on building a proof of concept that world be relatively easy to implement, and customisable to the application. Technologies HTML5 SVG CSS3 Vanilla Javascript View […]
May 09 Monday

Dashboard Widgets

Experimenting with another proof of concept. Making CSS & HTML energy dashboard widget. This example use just HTML,CSS & SVG, with the animations being simple CSS animations The animations speed is changed by updating a single property on each animation View Working Example
Apr 04 Monday

Testing my UI Skills

As a primarily a backend/full stack developer I like to test myself, to see if I can do it better. So every now and again, I pick a site that has some challenges This time I picked the Stan website, and attempted to reproduce the homepage with the following criteria Reduce the number of assets […]
Apr 22 Tuesday

Responsive Tab Panel

A technique for a pure HTML and CSS only Tab Panel, using the ::checked and ::sibling selector technique to create a interactive tab panel that does not require any javascript function Unlike the ::target technique you can have multiple tab panels on the same page, with out loosing the previous tab panels state Pro’s No […]
Apr 19 Saturday

Toggle Button Control

A pure HTML and CSS Toogle Button using the ::checked and General Sibling selector technique, to create a interactive control that can be easily styled to suit your requirements. Examples Checkbox Radio’s iOS 7 HTML CSS Browser Support 2+ 1+ 8+ 3.1+ 9.2+ Any Any Licence
Apr 18 Friday

Rating Control

This is a nice clean and simple Star Rating control in pure HTML and CSS. It uses the ::checked and Sibling Selector Technique so that it does not require any javascript to function. Even if the CSS is not loaded it will degraded back to a standard radio options list Example HTML CSS Browser Support […]
Apr 17 Thursday

CSS Only Custom Select Control

This is a custom alternative to a basic SELECT element, that can be easily customised to different applications. It uses the ::checked and Sibling Selector Technique so that it does not require any javascript to function. Even if the CSS is not loaded it will degraded back to a standard radio options list Examples Basic […]
Apr 13 Sunday

Collapsible Panel

This a nice simple collapsible panel or accordian menu, that uses the ::checked and sibling selector technique to create interactive component that does not require any javascript to function Examples Using Radio Elements Collapse All Panel 1 Panel 2 Panel 3 Panel 4 Panel 5 Using Checkbox Elements Panel 1 Panel 2 Panel 3 Panel […]
Apr 13 Sunday

CSS3 Only Icons & Shapes

Single Element Icons & Shapes These are all single element icons designed around a 1em square container. This allows them to be used within the normal flow of text and to also scale by simply changing the font size. Although these icons will render correctly most of the time, there can be some browser rendering […]
Top