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”
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.”
AcidJs.Pie is a lightweight pie chart plotting widget, utilizing CSS3 instead of HTML5 canvas or SVG with small, but powerful and easy to use API, custom events and numerous usage possibilities. You may download AcidJs.Pie or find more information on this page, and the demo and documentation are here. More Screenshots Key Features Fast and … Continue reading “HTML5, CSS3 and JavaScript Pie Charts”
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 am happy to announce that the new version of AcidJs.Tiles is out with improved and even more realistic looks and animations. It also includes a minor bug fix, related to the setting of the “title” property of the control. AcidJs.Tiles is a JavaScript, HTML5 and CSS3 layout widget, which resembles the look and feel, functionality and … Continue reading “HTML5, CSS3 and JavaScript Windows 8 Metro Tiles 2.0 is Out!”
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”
AcidJs.Tiles is a JavaScript, HTML5 and CSS3 layout widget, which resembles the Windows 8 Metro tiles in terms of look and feel, functionality and behaviors and can be used on web sites or web apps. It is easy to configure via a small, but powerful API and events, and comes with stunning and realistic desktop-like … Continue reading “HTML5, CSS3 and JavaScript Windows 8 Metro Style Tiles”