bijusubhash.com » CSS

BS-Progress Bar Pack

Biju Subhash — Wed, 09 Feb 2011 15:28:46 +0000

Hi folks, I’m just introducing a progress bar pack that you can use for application or website wherever. The pack contains three types of progress bar container and six different type colors of animated gif progress bars.The container have colors with gray, white and black and have title like “Please wait…” and a footer text “Your request is being processed” which you can change as your own content. You can download the source code and images and I have just explained the code so you and learn or edit as you like.

Demo: BS Progress Bar Demo

How To ?

Step 1: CSS

/* Type one Container /*
	.prg_bar_bg{
		background:url(images/progress_bar_bg.png) no-repeat;
		width:298px;
		height:89px;
		padding-top:16px;
		text-align:center;
		}
	.prg_bar_bg .prg_bar {
		text-align:center;
		padding-bottom:5px;
		padding-top:5px;
		}
	.prg_bar_bg .prg_title {
		font:bold 12px/normal Verdana, Geneva, sans-serif;
		color:#323232;
		}
	.prg_bar_bg .prg_cntnt {
		font:normal 11px/normal Verdana, Geneva, sans-serif;
		color:#5d5d5d;
		padding-top:5px;
		}
/* Type Two Container /*
	.prg_bar_bg_black{
		background:url(images/progress_bar_bg_black.png) no-repeat;
		width:302px;
		height:91px;
		padding-top:16px;
		text-align:center;
		}
	.prg_bar_bg_black .prg_bar {
		text-align:center;
		padding-bottom:5px;
		padding-top:5px;
		}
	.prg_bar_bg_black .prg_title {
		font:bold 12px/normal Verdana, Geneva, sans-serif;
		color:#ccc;
		}
	.prg_bar_bg_black .prg_cntnt {
		font:normal 11px/normal Verdana, Geneva, sans-serif;
		color:#999;
		padding-top:5px;
		}
/* Type Three Container /*
	.prg_bar_bg_white{
		background:url(images/progress_bar_bg_white.png) no-repeat;
		width:307px;
		height:90px;
		padding-top:16px;
		text-align:center;
		}
	.prg_bar_bg_white .prg_bar {
		text-align:center;
		padding-bottom:5px;
		padding-top:5px;
		}
	.prg_bar_bg_white .prg_title {
		font:bold 12px/normal Verdana, Geneva, sans-serif;
		color:#333;
		}
	.prg_bar_bg_white .prg_cntnt {
		font:normal 11px/normal Verdana, Geneva, sans-serif;
		color:#666;
		padding-top:5px;
		}

Step 2: HTML

	<div class="prg_bar_bg"> <!-- change this class for different container style -->
    	<div class="prg_title">Please wait...</div>
    	<div class="prg_bar"><img src="images/progress_bar_violet.gif" /></div><!-- call different progress bar image -->
    	<div class="prg_cntnt">Your request is being processed</div>
    </div>

progress bar pack gif animated progress bar

Rating Star with CSS

Biju Subhash — Wed, 26 Jan 2011 19:52:59 +0000

Hi folks, In this post I just describing about how to create rating star with CSS. You can create the mouseover effects verry easly with css. Only the functionality you have to add. Just try this.

1) HTML

2) CSS

.star1 {
width:126px;
height:126px;
background:url(images/gray_star.png) no-repeat;
}
.star2 {
width:126px;
height:126px;
background:url(images/gray_star.png) no-repeat;
margin-left:126px;
}
.star3 {
width:126px;
height:126px;
background:url(images/gray_star.png) no-repeat;
margin-left:126px;
}
.star4 {
width:126px;
height:126px;
background:url(images/gray_star.png) no-repeat;
margin-left:126px;
}
.star5 {
width:126px;
height:126px;
background:url(images/gray_star.png) no-repeat;
margin-left:126px;
}
.star1:hover {
background:url(images/gold_star.png) no-repeat;
}
.star2:hover {
background:url(images/gold_star.png) no-repeat;
}
.star3:hover {
background:url(images/gold_star.png) no-repeat;
}
.star4:hover {
background:url(images/gold_star.png) no-repeat;
}
.star5:hover {
background:url(images/gold_star.png) no-repeat;
}
/* The image icon you have to replace with your own and width and height too. */

3) Demo

Please upgrade your browser

The Very Useful 30 CSS Selectors You Should Memorize

Biju Subhash — Wed, 22 Dec 2010 15:14:40 +0000

The NetTut+ have wrote about some css selectors that we should memorize when we build a website or web application. Most of the css rules only available with modern browsers. You owe it to yourself to commit these to memory.

css css-selectors css-rules

A great collection of HTML5 Demos and Examples

Biju Subhash — Fri, 15 Oct 2010 03:42:26 +0000

Remy Sharp’s have cool site for HTML5 demos and examples he have hacked together. The demos listed one by one and you can view the supported browsers in the right side. You can filter the demos by clicking on the browser support icon or the technology tag. You can view source code easily by clicking on the view source link for each demo.

HTML5 JavaScript CSS3

BonBon Buttons – A CSS3 Examples

Biju Subhash — Mon, 13 Sep 2010 05:31:17 +0000

BonBon Buttons, a sweet CSS3 buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible. A mate, glossy and glass are the different 3 version of materials.

These CSS3 buttons are just for demo only and not meant to be used on your next project that target the average internet user. He just wanted to show a couple techniques how to use some of the new CSS3/HTML5 features. So only the current version of Safari, Chrome and Firefox are supported.

CSS3 Examples HTML5 CSS3 Buttons

Create a Custom HTML5 Video Player with CSS3 and JQuery

Biju Subhash — Wed, 04 Aug 2010 07:52:43 +0000

Are you a professional web designer, and you want to create a video player which look consistent across browsers. Each browser provide their own look and feel skin for the browser. And If you want to control to look the same on each browsers and integrate with your own design, you will have to create your own controls from scratch.

All media elements in HTML5 support the media elements API, which we can access using JavaScript and use to easily wire up functions such as play, pause, etc. to any buttons we create. Because the native video player plays nicely with other open web technologies, we can create our controls using HTML, CSS, SVG or whatever else we like.

CSS3 HTML5 jQuery JavaScript HTML5-Video Player

Image with Toolbar and Navigation Overlay – CSS Tutorial

Biju Subhash — Wed, 04 Aug 2010 07:21:59 +0000

Codrops wrote a tutorial to show you how to create a overlay toolbar and navigation for an image. This is you can applied with your gallery images and you can provide some options for users when he is viewing your images.

Image-Gallery CSS-Image-Gallery jQuery

The Google Font Directory

Biju Subhash — Fri, 04 Jun 2010 07:21:33 +0000

The Google font directory help you browse all the fonts available via the Google Font API. You can use all the available fonts on your website under an open source license and served by Google servers. You can use it for your commercial or non-commercial project.

You don’t need any programming, just add a special stylesheet link to your HTML document, then refer to the font in a css style.The Google Font API is compatible with Google Chrome 4.249.4+, Firefox 3.5+, Safari 3.1+ andIE 6+. However, The Google Font API is not currently supported on iPhone, iPad, iPod, or Android.

web-fonts google-fonts google-font-directory

Image-less CSS Tooltip Pointers with Polygonal CSS

Biju Subhash — Fri, 14 May 2010 13:48:28 +0000

A while back, Tantek Celik released A Study of Regular Polygons, which used a little-known CSS trick to create non-rectangular shapes such as triangles and pentagons with nothing more than an ordinary HTML element.

The tool-tip widget design is common in websites uses a small triangular speech bubble pointer that typically created easily with a background image. Filamentgroup break the typical way and build it with pure polygonal CSS.

css tooltip image-free-tooltip

Different Stylesheets for Differently Sized Browser Windows without Javascript

Biju Subhash — Wed, 05 May 2010 08:53:36 +0000

Chris Coyier wrote an article about how to use different style-sheets for differently sized browser windows without java-script. There is a W3C standard way of declaring them. One way is to test the device width with css and another way is with jQuery. The only one problem is using the css technique is IE doesn’t support this.

browser-size browser-window-css css