Explore @hongkiat Open Source projects

Hongkiat (@hongkiat)

hongkiat

Stars
322
Global Org. Rank 30,475 (Top 10 %)
Registered about 9 years ago
Most used languages

HTML
58.3 %

CSS
20.8 %

JavaScript
18.8 %

PHP
2.1 %
Location 🇸🇬 Singapore
Country Total Rank 525
Country Ranking

CSS
22

HTML
60

PHP
408

JavaScript
415

gif-onclick

Run Animated GIF On-click

html5-editable-content

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

web-audio-player

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

html5-fullscreen-api

Applying Fullscreen API

css3-image-captions

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

html5-progress-bar

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

css3-glossy-effect

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

keyboard-shortcut

Add keybooard shortcut to your website is easy.

web-video-player

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

css-cubic-bezier

How to use cubic-bezier to create custom animation speed

design-responsive-youtube

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.

css3-bounce-effect

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

responsive-web-nav

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

jquery-ui-sortable

This demo shows the customized theme of jQuery UI Sortable.

handlebars-template

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

css3-animation-steps

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

css-orientation-styles

Specifying styles based on screen orientation

css-filter

CSS3 Image Filter Effects

grayscale-web-image

Grayscale filter for images on the web

html5-picture

Responsive image focus direction with Picturefill.

html5-range-slider-styles

Styling HTML5 new input element, range slider.

jquery-swipejs

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

google-maps-styles

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

css3-multiple-backgrounds

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.

osx-apache-mysql-php

css-automatic-numbering

Automatic counter with CSS3

wordpress-gutenberg-block

A simple Gutenberg block.

css-better-paragraph

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

hide-show-notification-bar

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

html5-shiv-polyfills

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

html5-contextual-menu

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

html-import

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

google-polymer

A few demonstration of Google Polymer elements

css-sandpaper

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

mobile-panel-with-jquery

Building mobile panel easily with jQuery Mobile

wordpress-display-authors-pagination

accounting-js

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

jquery-ui-accordion

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

jquery-detect-ads-block

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

chrome-touch-emulation

Chrome Touch Emulation

css-retina-display

How to deliver graphics for HD screen through CSS

css3-pseudo-classes

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

css3-circular-ellipitical-gradient

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-multi-columns

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

html5-loginpage

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

css-reflection

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

osx-notification-center

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.

html5-download-attribute

his demo shows the new HTML5 attirbute, download.