Using the HTML5 ContentEditable Attribute

I've been trying to utilize HTML5 more recently in a few smaller projects and came across a really cool new attribute: ContentEditable. You can add this attribute to any HTML element and it automatically makes that (and any element within it) editable.

Live Example

Everything in this paragraph is editable in any modern browser that supports HTML5. You should see a grey outline when you mouseover it, indicating that it is editable. One very cool aspect of this is that it retains the CSS styling from the parent document, so the edited elements will still look correct.

• Feel free to edit this list element.
• Or add more by simply pressing enter after the last list item – no HTML needed!

Chris Coyier of CSS-Tricks.com pointed out that you can also let users edit CSS styles and have them update in real-time using the ContentEditable attribute. Try it out by editing the background color of the above list:

Adding the MouseOver Outline

To create the outline effect on mouseover, I had to add the following line to my CSS stylesheet:

1 2 3

[contenteditable]:hover { outline: 1px dotted #ccc; }

Obviously this can be styled to your liking and since it's just using standard CSS, it's possible to do some really creative things with this (I'll leave that to your imagination). As for using the ContentEditable attribute itself, it really is as simple as appending it to any tag like so:

1 2 3

<div id="make-me-editable" contenteditable> Any text in this DIV will be editable. </div>

Final Thoughts

This attribute really opens a lot of doors when paired with HTML5's LocalStorage capabilities. There's also the Aloha Editor, a pure HTML5 WYSIWYG editor that utilizes the ContentEditable attribute and generates a nifty real-time editor.

I'm really looking forward to the day that the majority of internet users have HTML5 capable browsers so that I can more freely use these cool new features! (hopefully soon, fingers crossed)

Read more ...

15 Best HTML5 CSS3 Accordion Tabs

Free Simple sass/jQuery Accordion

Download

Free Pure CSS Horizontal Accordion

I decided to take a CSS3 approach and use elements instead of images. I have use Genericons font for the social networking icons.
Download

CSS Responsive Animated Accordion

There are some magic numbers in here – as I was animating max height to achieve the accordion effect.
Download

CSS3 Multiple Accordion Menu

A fully functional accordion menu, using unordered lists and checkboxes, to allow users to have accordion open/closed as required.
Download

Simple Accordion

Simple dynamic accordion that can be duplicated as much as you want!
Download

Multi-level Accordion

Download

Super basic accordion

Download

Responsive Accordion to Tabs

Download

Sky Tabs

Sky Tabs is a clean, responsive solution for creating beautiful tabbed navigation without any javascript usage.
Source

Zozo Tabs

Zozo Tabs is a user-friendly, fully customizable, responsive jQuery tabs plugin to take any HTML content, including images, videos and display it in a clean organised and responsive tabbed navigation.
Source

Tabbed – HTML5 & CSS3 Responsive Tabs

If you wish to spice up your corporate website, blog, ecommerce site or a message board, with Tabbed it’s easy to show any content, video, price or data tables, form or other elements.
Source

Pure CSS3 Tabs

`Source

Tabion – Metro Tab Accordion Switcher CSS

Source

Pure CSS3 Responsive Tab

`Source

CSS3 Flat Accordion

Source

Read more ...

33 Best Premium HTML5 CSS3 Website Templates

Mamba – Free HTML One Page Template

I like to start with this latest free template designed for html websites. its simple, flat, responsive and free. All other templates here are premium. So take your time to choose which one is better for your business.
Demo | Download

NativeChurch – Responsive HTML5 Template

NativeChurch is a full functional HTML Template designed & developed for Church, Charity, Non-Profit and Religious Websites and comes handy for Portfolio/Corporate Websites as well.
Demo | Source

Reva – Multipurpose HTML Template

Reva html template is part of our complete ProdigyStudio Branding Solutions which available in other envato marketplace, when you want to develop an inline branding we are the right team to solve it.
Demo | Source

Brander – Premium Responsive Portfolio HTML5 Theme

Brander is a Premium Responsive Portfolio HTML5 Template with a clean and professional design which will be a great solution for your business, portfolio, blog or any other purpose.
Demo | Source

Nivan – One Page/Multi Page HTML Template

Nivan, a Fresh and refreshing choice for all kinds of the Agencies & Creative workers out there. It is a perfect choice for Artists, Creative Agencies, Collectors and the ones who need to showcase their work in beautiful yet elegant way.
Demo | Source

SmartScreen – Fullscreen Responsive HTML Template

SmartScreen is a fullscreen responsive HTML theme. It has many features for building a successful website.
Demo | Source

Royalet – Creative Responsive Portfolio Template

Royalet is a clean and professional theme for agencies or creative studios. It can be customized easily to suit your wishes.
Demo | Source

CirculaX Responsive HTML5 Template

Circulax has been built upon bootstrap3, css3 animation and HTML5. A lot of pages have been included concerning the multipurpose users.
Demo | Source

Impacto – Flavorful and Minimalistic Template

Impacto is retina ready multi-page portfolio for showcase for creatives, designers photographers and other artists. Featuring a sidebar for easier navigation so you can be set apart from the other One Page sites!
Demo | Source

BRIZZZ – Flat One Page HTML Template

Brizzz is a Flat One Page HTML Template and can be used for Personal Portfolio, Creative Agency, Designer Portfolio, Illustrator Portfolio, Photographer Portfolio and more.
Demo | Source  

Haze – One Page Responsive Parallax Theme

HAZE is a vibrant, responsive one page parallax theme built on the Bootstrap 3 framework. It includes a variety of unique jQuery scripts as well as several premium ones.
Demo | Source

Andon – Responsive Parallax Onepage Template

Andon is awesome parallax onepage template. Created on bootstrap adapted to all devices.
Demo | Source

IndiGo – Responsive One Page Template

IndiGo – Responsive HTML Template with valid HTML markup.
Demo | Source

Gioss – Responsive HTML One Page Parallax

Gioss is One page responsive theme perfect for corporate, agency, photography or general business.
Demo | Source

Casanova

Casanova is a Modern & Responsive multi-purpose HTML5 Template crafted with minimalistic and simplicity approach. The best choice to build your exceptional websites!
Demo | Source

Pluto Parallax HTML Portfolio Template

A parallax effect page which is flat and responsive.
Demo | Source

Floyd – One Page Parallax Theme

Floyd is a 100% responsive HTML5 and CSS3 theme. It’s perfect for agencies, corporate and business sites.
Demo | Source

Xenia – Refined HTML 5 / CSS 3 Corporate Template

Powerful site template designed in a clean and minimalistic style. Template can be used for any type of website, business, corporate, portfolio, products, marketing, etc. Xenia has been coded in HTML5 & CSS3 and jQuery.
Demo | Source

Erato – Responsive Multipurpose HTML5 Template

ERATO is powerful HTML5 & CSS3 template for everyone. You can create unlimited unique layout with many elements style base on Bootstrap 3 and Font Awesome 4 for you creative agency, business website.
Demo | Source

Reload – Responsive Multi-Purpose HTML Template

Reload is a multipurpose, responsive and retina ready Template. It’s an HTML5/CSS3, cross browser compatible template with simple, clean and impressive design.
Demo | Source

Square Portfolio – Responsive HTML Template

Square Portfolio is a premium Responsive HTML5 / CSS3 template with a multipurpose usage.
Demo | Source

Form – Responsive HTML5 Template

Form is a fully responsive and retina ready HTML5 template. It offers stunning design, really great compatibility and comes with super support.
Demo | Source

Pressa – Multi Purpose HTML5 Website Template

The Pressa template features the coded with Bootstrap 3.0, HTML5 & CSS3 and unlimited color schemes.
Demo | Source

Pageant – Multipurpose Beauty & Health Template

Pageant is a multipurpose theme for theme for beauty site like spa, saloon,ecommerce,  beauty store as well as health sites like gym.
Demo | Source

SmartOn – Ultimate Boostrap HTML5 Responsive Theme

SmartOn is the ultimate HTML5 Theme that will help you build your unique and modern websites fast and easy. With tons of layout possibilities, unlimited variations, multiple colors and a bunch of features you can create one unique variation in just a moment.
Demo | Source

Maxone – Responsive One Page Template

A Responsive, Retina-Ready One-Page template with a minimalist, simple, elegant and clean style, a strong focus on contents and readability.
Demo | Source

Vinto – One Page Parallax Responsive Template

Vinto is a 100% fully responsive One Page template, designed for creative agencies, photographers, businesses and freelancers.
Demo | Source

Simpleflex

Simpleflex is flat single page & multipage multipurpose HTML template. It suits for any type of design studio, portfolio, personal website, business etc.
Demo | Source

cvCard – Responsive vCard Template

cvCard is a responsive ajax enabled vcard template with Sliding Horizontal Layout.
Demo | Source

Sentinel – Responsive Multi-Purpose Template

A high quality theme sentinel.
Demo | Source

Xone – Clean One Page Template

Xone is a clean & modern one page template. It is ultimate flexible with loads of nice options and features.
Demo | Source

Organique – HTML Template For Healthy Food Store

Organique is a premium HTML template for healthy, organic, eco, natural food shop or any similar local business website. It is very easy to setup and use.
Demo | Source

Appcorner – Business & Technology HTML Template

Appcorner is a flat, clean and multipurpose HTML5/CSS3 template built with responsive Bootstrap 3. It can be used like corporate site and site to present different sort of applications.
Demo | Source

Read more ...

15 Free HTML5 CSS3 Checkout Forms

Checkout Form

A clean and simple checkout form with credit card fields, submit button and a fancy price badge. All Credit goes to CSSFlow for this beautiful online checkout form which is built with SCSS.
Demo|Download

Shopping Cart Checkout Widget

Another interesting checkout form made for sidebar as use in widgets but you an try it in multiple parts of the website. A dark shopping cart list with pixel-perfect shadows, a shiny checkout button, and glossy image overlays.
Demo|Download

CSS Shopping Cart Checkout Basket Details

Animated checkout details in CSS. All the animations has been done with pure CSS3 transitions.  This snippet seems to work properly in Firefox and for me the hover  was not working in chrome.
Demo|Download

Shopping Cart

A cart template suited for ecommerce websites which has large amount of orders to be processed and purchased. Uses Zepto, Mustache en Justify Grid. Products can be pulled in as JSON, but in this case hardcoded.
Demo|Download

Accordion Checkout Styling Form

Basic structure for accordian style checkout with out functonality.
Demo|Download

Column Checkout Styling Form

The above form is remade with column style for easy viewing of all elements from creating an account to finalizing an order.
Demo | Download

Responsive Shopping Cart

All functionality and calculations are implemented via Javascript. There are responsive breakpoints at 650px and 350px (though you can’t view the latter in Chrome because it won’t scale down below 400px).
Demo | Download

Css3 tooltip shopcart

A cool popup cart template which shows the checkout button on shopping button icon.
Demo | Download

Modern Shopping Checkout Form

A flat modern shopping template with a clean layout which will allow clients to make the payments efficiently.
Demo | Download

Cart Summary Three

A minimal cart design with checkout button.
Demo | Download

Checkout

A simple checkout form with cool credit card payment.
Demo | Download

FlatUI Checkout concept

Using the Pure grid, so this is also responsive.
Demo | Download

Read more ...