SNilesh.com -:- Nilesh Shiragave » CSS

CSS3 introduced some effects like text-shadow, border-radius, background gradient without using images. In this post we will create simple CSS3 button having all these effects.

HTML Part

 Click Me

CSS Part

/* Styling button */

a.button{
	color:white;
	padding:5px 20px;
	text-shadow:1px 1px 0 #145982;
	font-family:Arial,Helvetica,sans-serif;
	font-size:15px;
	font-weight:bold;
	text-align:center;
	border:1px solid #60b4e5;
	margin:50px auto;
	float:left;
	clear:both;
	/*
		CSS3 gradients for webkit and mozilla browsers fallback color for the rest:
	*/

	background-color: #59aada;
	background-image: -moz-linear-gradient(#F902B6, #FFA4E6);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F902B6), to(#FFA4E6));
	box-shadow:3px 3px 3px #000000;
	-moz-box-shadow:3px 3px 3px #000000;
	-webkit-box-shadow:3px 3px 3px #000000;
	border:1px solid #F902B6;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
}

a.button:hover{
	/* Lighter gradients for the hover effect */
	text-decoration:none;
	background-color: #F902B6;
	background-image: -moz-linear-gradient(#6bbbe9, #57a5d4);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6bbbe9), to(#57a5d4));
	box-shadow:3px 3px 3px #333;
	-moz-box-shadow:3px 3px 3px #333;
	-webkit-box-shadow:3px 3px 3px #333;
}

Final Complete Code





CSS3 Butons




Click Me

Steps to Write Better Css

snilesh — Fri, 18 Sep 2009 10:59:24 +0000

There are plenty of CSS tutorials are available on internet but the few tutorials are useful. In this tutorial you will find steps to write better css code. I hope you will enjoy this tutorial.

Organize you Stylesheet

First thing you have to keep in mind is to organize your stylesheet. if you organize your stylesheet so it is better to read and it will be easier for you to find the selectors if you organize it better. Also make sure to include comments to explain parts of the stylesheet.

/*Reset*/
Remove margin and padding elements

/*Basic Elements*/
Define style for basic elements: body, h1, h2, h3, h4, h6, ol, ul, dl, p etc.

/*Generic Classes*/
Define style for generic classes: simple things like remove the bottom,
floating to the sides etc.
/*Basic Layout*/

/*Basic Layout*/
Define the style for basic layout: header. footer, sidebar etc.

/*Header*/
Define the style for header

/*Content*/
Define the style for content area

/*Footer*/
Define the style for footer

Reset CSS

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

So you can use CSS reset stylesheets there are plenty of reset stylesheets available or you can create your own.

html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, iframe,
 blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em,
 font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
dd, dl, dt, fieldset, form, label, legend, table, caption, tbody, tfoot,
 thead, tr, th, td, input, select, textarea
{
margin:0px;
padding:0px;
}

Or You can Reset stylesheet with similar like

//Reset Stylesheet using Universal Selector
*{
margin:0px;
padding:0px;
}

Only Use universal selector like * when you don’t have any form elements in your design. As form elements are so unstable cross-browser it does more damage than good

CSS Shorthand

Make sure to write CSS code as minimized as possible.

Incorrect Code

{
margin-top:5px;
margin-right:10px;
margin-bottom:5px;
margin-left:10px;
padding-top:10px;
padding-right:7px;
padding-bottom:10px;
padding-left:7px;
font-size:12px;
font-weight:bold;
font-family: Arial,Verdana, Tahoma, sans-serif;
background-color:#cccccc;
background-image:url('images/yourimage.jpg');
background-repeat:no-repeat;
background-position:top left;
}

Correct Code

{
margin:5px 10px 5px 10px;
padding:10px 7px 10px 7px;
font:bold 12px Arial,Verdana, Tahoma, sans-serif;
background:#cccccc url('images/yourimage.jpg') no-repeat top left;
}

Use Conditional Stylesheets

There are conditional comments available for IE to include different stylesheet or to write different styles for each browser

For more details of Conditional Comments read this article “Conditional CSS Comments“

Dynamic Font Replacement

snilesh — Thu, 30 Jul 2009 17:05:05 +0000

For every website design Typography plays a very important role.
And in current website trends there are many fonts used for better user experience but on most of cases they are not system fonts so cant be displayed on any cases.
For this fonts problem there is a solution i.e. Image Replacement which has always been a good solution.

Here I put together a clean list of popular Dynamic Image Replacement solutions that will help you solve various font related issues.

1] sIFR 2.0

sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash.

2] SIFR 3

sIFR lets you use your favorite font on your websites by cleverly working with Flash, JavaScript and CSS.

3] SIIR

The SIIR program serves to basically change dynamic text on your website into pretty generated images with any font of your liking.

4] cufón

Cufón aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use. Cufón consists of two individual parts – a font generator, which converts fonts to a proprietary format and a rendering engine written in JavaScript.

5] P+C DTR

P+C DTR allows you to take a vanilla standards-based (X)HTML web page and dynamically create images to replace and enhance page headings using only PHP + CSS.

6] FLIR

FLIR dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers.

7] DTR

A pretty old JavaScript and PHP technique by Stewart on A List Apart.

8] Typeface.js

Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

9] IFR

By using a dynamic Flash movie, some slick JavaScript and well-structured mark-up the same consistent branding can be achieved while greatly reducing production time and preserving the cleanliness of the mark-up.

10] PHP+CSS DTR

PHP+CSS Dynamic Text Replacement is a JavaScript-free version of the Dynamic Text Replacement method originally created by Stewart Rosenberger. This is the P+C DTR version with word-wrapping and the ability to use inner tags.

11] CSS Image Replacement [static]

Just thought we could include this nice article by Chris Coyier explaining 9 different CSS Image Replacement Techniques. These techniques are the best if you just have very few elements to be replaced.

12] swfir

Using the dark arts of JavaScript and Flash, swfIR gives you the ability to apply an assortment of visual effects to any or all images on your website. This is again not for fonts but is another dynamic image enhancing solution.

Conditional CSS Comments

snilesh — Wed, 15 Jul 2009 12:29:03 +0000

conditional CSS comments allow you to use different stylesheets to different browser. So you can assign different styles for different browsers.

Importance of Using Conditional CSS

Target CSS to any web-browser.
Optimise your CSS.
You can separate CSS for different browsers.

/*CSS FOR ONLY IE*/


/*CSS FOR ONLY IE 5*/

According to the conditional comment this is Internet Explorer 5



/*CSS FOR ONLY IE 5.0*/

According to the conditional comment this is Internet Explorer 5.0



/*CSS FOR ONLY IE 5.5*/

According to the conditional comment this is Internet Explorer 5.5



/*CSS FOR ONLY IE 6*/

According to the conditional comment this is Internet Explorer 6



/*CSS FOR ONLY IE 7*/

According to the conditional comment this is Internet Explorer 7



/*CSS FOR Greater than IE 5*/

According to the conditional comment this is Internet Explorer 5 and up


/*CSS FOR Less than IE 6*/

According to the conditional comment this is Internet Explorer lower than 6



/*CSS FOR Less than equal to IE 5.5*/

According to the conditional comment this is Internet Explorer lower or equal to 5.5


/*CSS FOR Greater than IE 6*/

According to the conditional comment this is Internet Explorer greater than 6

If you want to use Different Styles for different browsers in your CSS files or within the style tag

For IE6


*html .your_class
	{
	/* Your Style*/
	}
/* FOR ID*/

*html #your_ID
	{
	/* Your Style*/
	}

For IE7


*+html .yourclass
{
	/* Your Style*/
}
/* FOR ID*/
*+html #your_ID
{
	/* Your Style*/
}

For Google Chrome, opera, safari


body:nth-of-type(1) .your_class
{
/* Your Style*/
}
/*For ID*/

body:nth-of-type(1) #your_ID
{
/* Your Style*/
}

Jquery Image Slider

snilesh — Tue, 07 Jul 2009 10:14:09 +0000

Image sliders are become increasingly popular within webpages over the last year or so, and with jQuery becoming ever more popular, more and more developers have been creating these amazing powerful, versatile and sleek galleries.
Below you will the most powerful, the most creative and most versatile of jQuery plugins and tutorials built using jQuery.

1] Jquery Easy Image / Content Slider

Easy Slider (as I call this plugin) enables images or any content to slide horizontally or vertically on click. It is configurable with css alone. So, basically you link to plugin file, set the content up and style it with css.

2] s3Slider jQuery plugin

The s3Slider jQuery plugin is made by example of jd`s smooth slide show script. Nice slider with good example list.

3] Featured Content Slider Using jQuery UI

Nice Featured content slider with thumbnail support. Also very easy to navigate between the slides.

4] Beautiful jquery Sliders

Nice Image slider script with image numbers for navigation and small description.

5] GalleryView: A jQuery Content Gallery Plugin

GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.

6] GALLERIA

Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

7] Start/Stop Slider

Jquery slider with start and stop option.

8] Circular Image Gallery

Slide a list of images from right to left across the screen.
When an image moves out of view on the left, it should get appended to the end of the list thus creating the illusion of a never ending or circular procession of images across the screen.

8] Customizing jQuery innerfade plug-in

Customizing jQuery innerfade plug-in is added control to manage the slide images like pause,play to the original jquery innerfade plugin

9] FullScreen Image-Gallery

It’s a full screen image gallery that automatically scales the image with kept aspect ratio to fill the browser background.

10] SupersizedGallery

Nice SupersizedGallery is used to Resizes images to fill browser while maintaining image dimension ratio
* Cycles Images/backgrounds via slideshow with transitions and preloading
* Navigation controls allow for pause/play and forward/back .

11] ImageRotator

An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery.

12] Galleriffic

A jQuery plugin for rendering fast-performing photo galleries

13] ImagesSwitch

easy-to-use, simple and fast plug-in to create effect when you switch between images.

14] ImageScroller

Building an image scroller, making use of jQuery’s excellent animation features

15] PanoramaView

Nice PanoramaView script with options.