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.
“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 create a this CD shelf with HTML5 and CSS3. Here’s the demo and excuse me for the creepy CD cover art I’ve used – somehow it reminds of the old days when I was discovering music. The truth is that I still love these albums, so here they are – a CD shelf with some of my favorite 80s and 90s metal albums, made out of minimal HTML and CSS3:
To fully view a CD, just hover it and observe the smooth animation.
… Or you can just have all of the CDs displayed frontally (by removing the .acidjs-cases-tilted from the topmost element):
Speaking of markup, once you download the experiment, and add the style sheet to your page, all you need to do is to use simple bulleted list markup to add your favorite CDs. If you take a look at the CSS, you will notice that you can also set a poster behind the shelf, and everything is pretty simple and easy to modify.
So… Rock’n'Roll and thanks for reading this one! Hope you like it! Want to see it in action with a huge list of my all time favorite albums?
The tiles can be used as placeholder of virtually anything – from simple text, to sophisticated markup and forms.
What’s already available on my experiments website is this (almost fully) CSS3-driven image slideshow viewer, build with the help of a form, radio buttons, transitions and sibling selectors. It also a supports native keyboard arrow navigation.
Merry Christmas and a Happy New Year! See you in 2014!
The post for today is not something really special or super amazing. It’s just a quick and dirty trick that I use when I have to create inline forms for selecting files in which the actual input is hidden, and users click some text node (link, button, etc) that opens the browse for file dialog, which I wanted to share with you.
Older versions of Internet Explorer do not fire the onchange event on elements, hidden with CSS display: none or visibility: hidden, but instead an exception is thrown. This is why I used opacity: 0 and position: absolute to hide he original input.
HTML5.CV is a resume generator and one pager website, with cool modern looks, various customization options and flexible resume data file. You can add any fields (contact details, employment history, education, interests, etc) and define photo.
The UI is extremely easy to customize, so if you are acquainted with CSS, just give it a try.
Builder.CSS is a free tool for merging and minifying style sheets into a single file, using some of the coolest HTML5 features like drag and drop of local files and processing them without uploading to the server. I am happy to announce that recently Builder.CSS has evolved to a free online service with tons of improvements, brand-new and amazing interface, drag and drop of local of styleshets from the desktop, predefined projects and much more. Get the Chrome extension or click here for more info and demo.
Image2Base64 is an online tool, provided by Acid.JS Web.UI for conversion of image files to base64 data URIs. It implements the new HTML5 file API, and the selected images are processed entirely on the client without uploading them onto the server. Get the Chrome extension or click here for more info and demo.
Hasher is an online service for creating message digests with a wide range of more than 40 encryption algorithms. Depending on the choice of the user, after the encryption hashes are stored in the browser’s local storage in convenient JSON format so they can be used or deleted later. Get the Chrome extension or click here for more info and demo.