CSS3 Image Reflections Enabler JavaScript Class

The AcidJs.Reflections class is an enabler for CSS3 image reflections, written in JavaScript and using jQuery (but can be easily ported to use pure JavaScript). It does not rely on the experimental box-reflect property, but rather on CSS3 transforms and gradients (for IE9 it’s using the proprietary gradient filter with alpha channel).

The class works with all major browsers, including Internet Explorer 9 and 10, and does not initialize on older versions. Check the demo and implementation and eventually download it from my JavaScript, CSS3 and HTML5 experiments website.

Related Posts

• HTML5 Shopping Cart
• Online CSS Merger, Minifier and Obfuscator
• State-of-the-art Ribbonbar Web UI
• Acid.JS Web.UI Library
• CSS3 and SVG Reflections
• HTML5, CSS3 and JavaScript Experiments and Insight
• Coming Soon – CSS3 and JavaScript Replacement Page
• Progressbar Web UI
• Image to Base-64 Data URI Converter
• HTML5 Sticky Notes App
• Band Tourdates Scheduler Web UI
• Booking System for Online Reservations

HTML5 Shopping Cart

Yesterday I released my latest project – HTML5 Cart – an elegant, platform-independent, powerful, feature-complete and fully customizable shopping cart solution with easy to use API, written entirely in HTML5, JavaScript and CSS3.

Enjoy the week!

Related

• State-of-the-art Ribbonbar Web UI
• Acid.JS Web.UI Library
• HTML Markup Validator Bookmarklet
• Progressbar Web UI
• Image to Base-64 Data URI Converter
• HTML5 Sticky Notes App
• Band Tourdates Scheduler Web UI
• Booking System for Online Reservations

Music

Apart from doing front-end, I also love making music. Never been a pro, but still I love messing with my guitars. So, here are a some of my music endeavors.

Saying That Your Website is Under Construction in a Stylish HTML5, CSS3 and JavaScript Fashion

My new AcidJs.ComingSoon component is my proposal to say that your website is “under construction” in a tasteful fashion. It is stylish and lightweight, fully HTML5/JavaScript/CSS3/AJAX driven, fully customizable, imageless and fun to use.

Key features

• Lightweight and operating entirely on the client.
• Built with the latest technologies, as your future website will be.
• Fully customizable.
• Stylish and flexible.
• Easy to modify and fun to use.
• Your way to say in stylish manner that your website is “under construction”.

Click here to view the demo and you will love it so much, that you will download and give it a try immediately.

Enjoy the weekend!

Related Posts

• HTML5 Shopping Cart
• Acid.JS Web.UI Library
• HTML Markup Validator Bookmarklet
• Progressbar Web UI
• Image to Base-64 Data URI Converter
• HTML5 Sticky Notes App
• Band Tourdates Scheduler Web UI
• Booking System for Online Reservations

How to Create an Inline Masked File Upload Form with CSS3 and HTML5

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.

The Markup:

<div class="css3-inline-file-input">
    <form action="./" enctype="multipart/form-data" method="post" name="form-01">
        <input type="file" accept="image/jpg, image/jpeg, image/gif, image/png, image/bmp" name="form-01-file" /><span>Choose File</span>
    </form>
</div>

The CSS:

.css3-inline-file-input,
.css3-inline-file-input *
{
    display: inline-block;
}

.css3-inline-file-input *
{
    margin: 0;
    padding: 0;
    border: 0;
}

.css3-inline-file-input form
{
    position: relative;
}

.css3-inline-file-input input
{
    position: absolute;
    right: 0;
    cursor: pointer;

    filter: alpha(opacity=0); /* opacity fix IE6/7/8 */
    -moz-opacity: 0; /* opacity fix for older Firefox */
    -webkit-opacity: 0 /* opacity fix for older Chrome */;
    opacity: 0;
}

.css3-inline-file-input
{
    width: auto;
    vertical-align: top;
    overflow: hidden;
}

.css3-inline-file-input span
{
    display: block;
    text-align: center;
    text-decoration: underline;
}

.css3-inline-file-input input:hover + span
{
    text-decoration: none;
}

/* fixes for IE6/7 */
* html .css3-inline-file-input,
* html .css3-inline-file-input *,
* + html .css3-inline-file-input,
* + html .css3-inline-file-input *
{
    display: inline;
}

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.

You can check the demo on this page, and in case you find it useful, you can download it here.

Enjoy the rest of the day!

Related Posts

• HTML5 Shopping Cart
• The Mystery of c:\fakepath Unveiled
• Ribbonbar Web UI Component
• HTML5 Resume Generator and Onepager Website
• Acid.JS Web.UI Library
• CSS3 Treeview. No JavaScript.
• Selecting only the first element occurence out of siblings with the same class name with CSS3
• How to Style Select Boxes with CSS3
• CSS3 Element Reflections
• CSS3 iPhone Toggle Buttons
• CSS3 Gaussian Blur Effect
• Fancy CSS3 Tooltips Without JavaScript
• CSS3 Background Image Cropping

I am Back

During the past two days my website was down, and none of the supporting websites was working either. The problem is now fixed and I am back.

Enjoy and thanks for the patience and support, fellows!

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 or download it straight away.

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

• HTML5 Shopping Cart
• Acid.JS Web.UI Library
• Ribbonbar Web UI
• HTML Markup Validator Bookmarklet
• Progressbar Web UI
• Image to Base-64 Data URI Converter
• HTML5 Sticky Notes App
• Band Tourdates Scheduler Web UI
• Booking System for Online Reservations
• CSS3 Treeview. No JavaScript.
• HTML5 Resume Generator and Onepager Website
• CSS3 Driven Slides Viewer Without any JavaScript
• Fully Functional CSS3-only Tabstrip Without JavaScript
• Selecting only the first element occurence out of siblings with the same class name with CSS3
• How to Style Select Boxes with CSS3
• CSS3 Element Reflections
• CSS3 iPhone Toggle Buttons
• CSS3 Gaussian Blur Effect
• Fancy CSS3 Tooltips Without JavaScript
• Imageless Custom Checkboxes and Radio Buttons with CSS3