Below is a quick and dirty solution for adding icons to the <option /> elements of the <select /> tag utilizing CSS generated content. Disclaimer: According to the CSS specs, the <option /> element should not support generated content, and this solution works only in Firefox. Anyways, it may come handy sometime. The Result: The … Continue reading “Adding Icons to the Option Elements of the Select Tag in Firefox. Quick and Dirty”
Last night I introduced a new “html5 web components” category on my HTML5, CSS3 and JavaScript Experiments and Insight Website, so now all of the examples, which deal with this new and amazing technology are separated from the CSS and the JavaScript demos. Apart from that, I released a new component, based on Mozilla’s X-Tag … Continue reading “X-Tabs – HTML5 Web Component Built with Mozilla X-Tags”
People who follow this blog (cheers, mates!) and my fellow co-workers know that I am interested in the form control styling, and especially that of check boxes and radio buttons. Over the years I have come up with a number of different solutions, but finally I found the time to start experimenting with the new … Continue reading “X-Checkbox – Custom HTML5 Web Component”
This is a follow-up to one of my most popular posts, which I have been planning for quite some time. So, here it is – the new CSS3-only driven treeview, with updated looks and support for selection of nested nodes. And 5 lines of optional JavaScript in case you would like to use the checkbox … Continue reading “CSS3 Treeview with Nested Nodes Selection. Almost JavaScript-less.”
Radio buttons and checkboxes are traditionally associated with forms and data, however if you spend some time playing with these elements and CSS you will certainly find a lot more possible and not so boring uses. Here are a few, which will maybe give you ideas and will inspire you. Star Rating Widget Fully functional … Continue reading “Atypical Uses of Radio Buttons and Checkboxes for Building Interactive UI Widgets”
I enjoyed coding this one last night. The word is about animated 3D chessboard, achieved with pure CSS, no images and no JavaScript, making use of nth-child selectors, 3d transforms, keyframe animations, generated content and the UTF symbols of the chess figures: Supported Browsers: Firefox Chrome Opera Webkit Opera Safari Internet Explorer 9+ (with nice … Continue reading “Animated 3D Chessboard With Pure CSS3. No Images. No JavaScript”
This animated horizontal accordion was achieved without a single line of JavaScript, but only with CSS and minimalistic markup: The widget utilizes a form with a list of hidden radio buttons, CSS3 transitions, transforms and sibling selectors, and works with all modern browsers, including IE9 (excluding the slide animation). Have fun and use for free, … Continue reading “Animated CSS3 Only Horizontal Accordion”
Just before the weekend, here’s a pure CSS3 implementation of a rating star system with support for selection and hover, made-up by radio buttons, rtl, generated content, minimal markup and sibling selectors. Enjoy the weekend! Related Posts and Links Animated CSS3 CD Cases on a Shelf Animated 3D Chessboard With Pure CSS3. No Images. No … Continue reading “CSS3 Rating Stars with Hover and Selection”
“Just take those old records off the shelf I’ll sit and listen to ’em by myself Today’s music ain’t got the same soul I like that old time rock ‘n’ roll” Remember that old Bob Seger and The Silver Bullet song? Well, this is exactly what I was listening to today, when I decided to … Continue reading “Animated CSS3 CD Cases on a Shelf”
Hiding emails from spam bots can be really painful, but fortunately there are a lot of cool solutions out there. Here’s how you can do this with the CSS3 generated content and reversed text direction. Let’s say that email you want to obfuscate is info@company.com. The first thing you need to do it to reverse … Continue reading “Hiding Emails from Spam Bots: The CSS3 Way”