CSS

The HTML5, CSS3 and JavaScript Experiments Website Has Just Received a Facelift

It’s been more than a year since launched HTML5, CSS3 and JavaScript Experiments to share my insight in front-end development and I never thought that it would become that popular in a relatively short period of time. As of September 2014 the website showcases than 60 demos also available for download and because of that constantly growing number and devout visitors (Thanks, fellows, you are the ones that keep this up and running!) I realized that the old layout became less usable and demands something new. The time for a facelift had come and this is what I did during the past few days.

Due to my recent excitement and digging into the amazing world of HTML5 Web Components, I decided to take the risk of losing page-views due to browser incompatibility and implemented the front-end using custom-built web components, some of which such as AcidJs.XImg (used for optimizing the loading of images) and AcidJs.XTabs (used for the code listing at the bottom of each page) are already featured on the website. Apart from these two, I developed AcidJs.XDrawer, which is used for the left hand navigation, and it will be soon available as a standalone demo and download.  The utilization of reusable HTML5 Web Components allowed me to remove a lot of custom JavaScript and CSS, which optimized the overall performance and loading time. The currently supported browsers are all evergreen browsers and IE10+.

As a bottom line – I am really happy with the result, and I hope that the website will continue being a useful and inspirational source for front-end developers, sharing the same passion towards HTML5, CSS3 and JavaScript.

Thanks and enjoy!

CSS3 Rating Stars with Hover and Selection

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.

thumb

Enjoy the weekend!

Related Posts and Links

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

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!

Applying Special CSS Rules for IE6-IE8 and IE9 Without Affecting Other Browsers

It’s been a while since I blogged about this \9 CSS hack for all versions of Internet Explorer. Personally I always try to avoid hacks, but recently I had to tweak some style sheet to use special styles for IE6-IE8 and for IE9, so I remembered of this hack. Here’s how I did it:

/* first apply the \9 hack for any version of internet explorer, for example */
body
{
    background: #f00\9;
}

/* ... then override the above rule by using the CSS3 :root selector which is supported by IE9, but still use the \9 hack to filter out only IE9 */
:root body
{
    background: #ccc\9;
}

By using the above CSS you can have special styles, which are the same for Internet Explorer 6-8 and other rules for Internet Explorer 9 without affecting other browsers.

Acid.JS Component Library 3.7 is Out With 1 Update and New Website

The new version of Acid.JS has just been released with one update * – version 2.0 of GuestBook.XML – an AJAX instant feedback component. I am also happy to announce the new website of the libary as well, so make sure you update your links.

* A couple of outdated components have been discontinued, and they are no longer shipped with Acid.JS – AJAX Photo Gallery, CSS Watermark, Antipixel Buttons.XML, Upload.XML, Skinnable Browser Dialogs and Page Announcement.XML.

Acid.JS Web 2.0 Component Library 3.6 is Out With 3 Updates

The new version of Acid.JS has just been released with three major component updates – AJAX Hotel Reservation Form 3.0, Web 2.0 AJAX Loading Panel 3.0 and Rounded Corners Panel 2.0.

Click here to view the release notes for the latest version.