Month: March 2013

HTML5 Resume Generator and Onepager Website

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

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.

html-5-cv

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

Advertisements

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

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.

builder-css

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.

validator-valid

Stickeez

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.

stickeez

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.

image-to-base-64

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.

hasher

CSS3 Charts

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

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!

charts

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.

The HTML:

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

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

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

Builder.CSS – Online CSS Optimizer, Merger and Minifier

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

I am happy to announce that one of Acid.JS‘s most successful widgets, 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. Builder.CSS is a free tool for merging and minifying style sheets into a single file. You can use it along with our Image2Base64 Encoder, Builder.JS and RESTBuilder tools.

Just give it a try on it’s new home page. Optionally, it is available for hosting on your own domain – if you are interested, please, check the Help & About tab of Builder.CSS.

builder-css

Features and Improvements

  • New and cool looks with easy and intuitive UI.
  • Brand-new optimization routine, crunching your CSS even more at the speed of light.
  • Support for predefined projects, which can contain the styles of all your websites (self-hosted version only).
  • Add files from desktop via drag and drop.
  • View, exclude and remove files from compilation.
  • Processing is done entirely in the browser.
  • Option to save the ouput to a file on the server (self-hosted version only).
  • … And much more, just try it here.

Screenshots

Related