Discover hongkiat/css-automatic-numbering Open Source project

In this demo, we created a web audio player using HTML5 and jPlayer

web-audio-player

A very nice addition in HTML5, ContentEditable. This demo shows how to use it to enable editing in the front-end with HTML5 ContentEditable

html5-editable-content

html5-fullscreen-api

Applying Fullscreen API

Say good bye to jQuery plugins. Today, we can create similar image caption effect only with CSS3. This demo shows how this effects runs.

css3-image-captions

This demo shows how to create a nice glossy effect with a combination of CSS3 gradients.

css3-glossy-effect

This demo shows how to use the new HTML5 element progress to create animated progress bar.

html5-progress-bar

Add keybooard shortcut to your website is easy.

keyboard-shortcut

This demo we created a web video player using HTML5 and jPlayer

web-video-player

How to use cubic-bezier to create custom animation speed

css-cubic-bezier

In this demo we tried to make the Youtube homepage to be responsive. Resize your browser window smaller, or view it in small screen size to see the effect.

design-responsive-youtube

This demo how shows a notification bar with bouncing effect that is achieved with CSS3 animation.

css3-bounce-effect

This demo shows an example of responsive navigation. Resize your browsers window or view this demo in smaller screen to see the effect.

responsive-web-nav

This demo shows the customized theme of jQuery UI Sortable.

jquery-ui-sortable

This demo shows how to use Handlebars.js for templating.

handlebars-template

How to use CSS3 steps() function to control animation.

css3-animation-steps

Specifying styles based on screen orientation

css-orientation-styles

CSS3 Image Filter Effects

css-filter

Grayscale filter for images on the web

grayscale-web-image

Responsive image focus direction with Picturefill.

html5-picture

Styling HTML5 new input element, range slider.

html5-range-slider-styles

This demo support for touch interaction. It is best viewed in device with touch screen.

jquery-swipejs

This demo shows how to style Google Maps using the API provided

google-maps-styles

CSS3 allows us to add multiple backgrounds with a single background-image property. This demo shows how we utilize this feature to create a Flash-less animation.

css3-multiple-backgrounds

osx-apache-mysql-php

A simple Gutenberg block.

wordpress-gutenberg-block

Create the input control to hide and show a notification bar using CSS3.

hide-show-notification-bar

Create a better Paragraph with CSS3 :first-letter and :first-line pseudo-elements

css-better-paragraph

This demo shows how to cover this shortfall with HTML5 Shiv and Polyfilss

html5-shiv-polyfills

This demo shows how we can take benefits of HTML5 Cotnextual Menu to add new menu when the user right click.

html5-contextual-menu

This demo shows how to use HTML Import to create a more modular HTML page.

html-import

A few demonstration of Google Polymer elements

google-polymer

This demo shows how to detect and ad block and display alternative message.

jquery-detect-ads-block

Demo on enabling CSS Transform in IE6-8 with the cssSandpaper library

css-sandpaper

Building mobile panel easily with jQuery Mobile

mobile-panel-with-jquery

Using Accounting.js to build a simple currency converter page.

wordpress-display-authors-pagination

PHP

accounting-js

In this demo, we customized the styles of jQuery UI Accordion.

jquery-ui-accordion

chrome-touch-emulation

Chrome Touch Emulation

How to deliver graphics for HD screen through CSS

css-retina-display

This demo shows some basic applications of CSS3 pseudo-classes.

css3-pseudo-classes

Today, we can lay out the web content into columns more seamlessly with CSS3 Columns. This demo shows how to create it.

css3-multi-columns

With the CSS3 specification, we are now able to create color gradients. Including elliptical and circular form of gradient. This demo show you how to this effect is achieved.

css3-circular-ellipitical-gradient

The login page traditionaly requires Email and Password. This demo shows how to crate it with the new HTML5 input types, email and password.

html5-loginpage

CSS image reflection effects. No extra images, no JavaScript.

css-reflection

Notification Center comes to OSX. We are actually able to add this feature on your website and this demo shows you how it is in action.

osx-notification-center

his demo shows the new HTML5 attirbute, download.

html5-download-attribute