Monthly Archives: March 2013

HTML5 Resume Generator and Onepager Website

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.


Key Features

  • Lightweight, modern and loading extremely fast.
  • CSS3 driven with fallback for older browsers.
  • Cross-platform JSON data format for the resume.
  • Support for multiple resume data files.
  • Operating fully on the client.
  • Sleek imageless UI, which can be easily modified.

Related Posts

Development and Productivity Extensions for Google Chrome

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

If you are looking for cool development and productivity tools, here are a few, created by me, and available as handy Chrome Chrome extensions:


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.


W3C Validation Bookmarklet

Acid.JS Validator is a free bookmarklet that uses the W3C SGML parser’s API to validate the markup of the page on which it is called. Get the Chrome extension or click here for more info and demo.



Stickeez is a sticky notes JavaScript application using the new HTML5 File API, localStorage and CSS3. The data is fully persisted on the client. Stickeez also has an option for importing/exporting data so users can save their notes before cleaning up cookies or import notes to another browser. And finally – users can choose between 4 types of board styles – cork, fridge, whiteboard and skulls. Get the Chrome extension or click here for more info and demo.


Image to Base-64 Data-URI Encoder

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 Message Digest Encoder

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.


CSS3 Charts

I’ve just finished another cool HTML5, CSS3 and JavaScript example – the Charts class. It’s not canvas, because I don’t care about canvas – just good old HTML5 and CSS3 and a bit of JavaScript for processing the charts data. Make sure you check it here and have fun!


Related Posts

HTML5, CSS3 and JavaScript Experiments and Insight Website

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

I am pleased to announce that I’ve just finished my latest endeavour – HTML5, CSS3 and JavaScript Experiments and Insight, and most of the code samples and demos from my blog have been moved there in and new and convenient code-listing and demo form. From now on, each new blog post will be accompanied by a dedicated page on that website on which my readers will be able to have a look at the code, run the example and eventually download it.

Enjoy HTML5, CSS3 and JavaScript Experiments and Insight and have a great rest of the week!

CSS3 Driven Slides Viewer Without any JavaScript

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

This is an experiment, demonstrating that you can create cool slide viewer functionality without a single line of JavaScript, but only by the means of CSS3 and HTML5.

Watch this presentation to learn how it’s done and what makes it so cool. If you don’t feel like reading, just check the demo and download CSS3 Slides Viewer right away.


…Is a simple <form /> and a radio button list:

<div class="css3-slides-viewer">
    <form name="css3-slides-viewer" method="post" action="./">
            <legend>CSS3 Slides Viewer</legend>
                <li><input type="radio" name="css3-slides-viewer-slides" autofocus="autofocus" id="slides-00" checked="checked" />
                    <label for="slides-00"><!-- / --></label>
                        <!-- slide content should go here -->
                </li><li><input type="radio" name="css3-slides-viewer-slides" id="slides-01" />
                    <label for="slides-01"><!-- / --></label>
                        <!-- slide content should go here -->

The Slides Counter…

… Has been implemented via CSS counters:

.css3-slides-viewer > form > fieldset > ul > li section::before
    counter-increment: slide;
    content: "Slide " counter(slide);

The Fade-in/out Animation…

… Is using delayed CSS3 transitions and visibility: visible/hidden.

.css3-slides-viewer > form > fieldset > ul > li > section
    transition: all 500ms 10ms ease-in;

Hide/Show Slides

/* by default slides are hidden */
.css3-slides-viewer > form > fieldset > ul > li > section
    visibility: hidden;

/* the slide is visible only if it's radio button is selected */
.css3-slides-viewer > form > fieldset > ul > li > input:checked ~ section
    visibility: visible;

Supported Browsers

Mozilla Firefox, Google Chrome, Apple Safari, Opera, nternet Explorer 9+

Due to the lack of support for CSS transitions, Internet Explorer 9 does not play the fade-in/out animation, and enabling the keyboard navigation should be done by clicking the buttons on top, because that browser does not support the autofocus=”autofocus” property of HTML5.

Check the demo and download CSS3 Slides Viewer.

If you like this solution, you can also check my personal wesbite, Acid.JS Web.UI, my blog or follow me on Twitter.

Make sure you try my online CSS minifier and merger and image to base-64 encoder.

Related Posts