Dynamic Unobtrusive Javascript Progress/Percentage Bar

jsProgressBarHandler is a Javascript based Percentage Bar / Progress Bar, inspired upon JS-code by WebAppers and CSS-code by Bare Naked App. Next to a structural rewrite of the WebAppers code, this javascript progress bar can easily be extended and tweaked just by setting a few parameters.

DOWNLOAD jsProgressBarHandler

VISIT Bram.us

VideoJS

VideoJS is an amazing HTML5 Video Player. With VideoJS, you don’t need any Flash to play videos. It’s very easy to use, looks cool and open source which means free. It has several nice skins, like VimCSS(Vimeo Skin), HuCSS(Hulu Skin) and TubeCSS(YouTube Skin).

It contains 3 core parts: An embed code, a Javascript library (video.js), and a pure HTML/CSS skin (video-js.css).

Using Video for Everybody as the embed code means you know it’s compatible with many devices (including ones without javascript).

The javascript library fixes browser & device bugs, and makes sure your video is even more compatible across different browser versions.

The pure HTML5/CSS skin ensures a consistent look between HTML5 browsers, and easy custom skinning if you want to give it a specific look, or brand it with your own colors.

Features:

  • Free & Open Source
  • Lightweight. NO IMAGES USED
  • 100% skinnable using CSS
  • Library independent
  • Easy to use
  • Easy to understand & extend
  • Consistent look between browsers
  • Full Screen & Full Window Modes
  • Volume Control
  • Forced fallback to Flash (even when there is an unsupported source)

VISIT VideoJS

Pure CSS GUI icons: 84 GUI Icons Created by CSS and Semantic HTML

Pure CSS GUI icons is an experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints.

Some of these GUI icons can only be created in browsers that support CSS3 transforms. It has been tested on Firefox 3.5+, Safari 5+, Chrome 5+, Opera 10.6+. However, this is not a “production ready” CSS icon set yet.

VISIT Pure CSS GUI icons

Sprite Box

Spritebox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image.

It is based on the principle of using the background-postion property to align areas of a sprite image into block elements of a web page.

It was made using a combination of jQuery, CSS3 and HTML5, and it totally free to use.

VISIT Spritebox


Every time we start a new website, we need to write our CSS code from the beginning. Actually, many of the codes are the same as our previous website, like settings of blockquote, title(<h1> to <h6>), etc. I was thinking that we can create a CSS template for all websites which containing most common CSS settings.

I lately found Kyle has done this, his master stylesheet has everything I need for a new website. I tried to add something to the stylesheet, but not much can be added, but the global browser setting I learn from Andrew, which may be useful:

[css]
* {
padding:0;
margin:0;
}
[/css]

Read More