Posts Tagged ‘ CSS ’

Adding DropShadow To Images Using CSS

Wednesday, February 18th, 2009 By Nikhil

Another quick tut. Here is something simple and nice using the POWER of CSS… but was difficult concieve( and it surely wasn’t me) to begin with . Adding Dropshadow, might be a peice of cake for many of us, using some image editing tools like Photoshop anf Fireworks etc.
The reason why , I opted for drop shadow using CSS is that , usually while creating a page design/html of an application , the requirements keep iterating. What I mean is , In a existing web site with many images, like the ones displaying freinds list or an image gallery, it will be difficult to reprocess the entire load of images that had been already unloaded to add or remove the shadows, for that matter.
So If you have done a little forward thinking while creating the HTMLS to add these extra divisions or usually the situation is that you have a Loop Logic generating these icons/thumbnails in XSL, PHP. JAVA or any other programming /scripting language, you can add it anytime, then is just the matter of show and hiding these shadows using the CSS Display property,as per the clients ever changing requirements … I havn’t done this sort of forward thinking before this … but ahev started now!

In the example below, the original image is shadow free and the dropshadows are applied as required! ALSO, I have gone a little extra, by using the tricks of my earlier Tut ( Well! these probably are shortest variety of Tutorials , so it is only justified calling them “Tut”‘s ) about Using CSS Clip Property for show off only

Original Image


CSS DropShadow Results
View Demo  | Download sourcefiles

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

Best Practices: Working with CSS

Thursday, April 24th, 2008 By Nikhil

Put Stylesheets at the Top

If you want a page to load progressively; that is, we want the browser to display whatever content it has as soon as possible, put the CSS at the top of the page inside the document HEAD. This makes pages appear to be loading faster, as this facilitates progressive rendering of the page. This is especially important for pages with a lot of content and for users on slower Internet connections.

It is a documented fact that to enhance overall user experience, it is important to provide progress indicators and visual feedbacks. To avoid having to redraw elements of the page, in case if their styles change, some browsers, including IE, blocks rendering of the page until the CSS is fully loaded. Because of this, the user is gets to see a blank white page.

The W3 HTML Specifications’ also states that the CSS must me include in the HEAD section of the HTML page. Also note that, In IE @import behaves the same as using <link> at the bottom of the page, so it’s best not to use it.

Avoid Using Browser Specific features

Filters : Use of filter increases memory consumption and is applied per element, not per image, so the problem is multiplied. Also, Filters are IE Proprietary, hence will not work as intended in other browsers. If you want transparent or gradient backgrounds, use 1Pixel with images.
Expressions : CSS expressions are a nice feature to have in CSS, but still is IE specific feature. Also, it is important to note that, these expressions are evaluated when the page is rendered and resized, scrolled and even when the user moves the mouse over the page. Needless to say this could affect the performance of your page. Hence in simple words ,Avoid using CSS expressions, unless you feel its pros’ weighs more than its cons’

Externalise you CSS

Using external CSS will result in faster loading of pages because the JavaScript and CSS files are cached by the browser. Inline CSS in HTML documents get downloaded every time the HTML document is requested. This might actually reduce the number of HTTP requests made but it subsequently increases the size of the HTML document. External CSS are cached by the browser; the size of the HTML document is reduced without increasing the number of HTTP requests.

Please note that, if users on your site have multiple page views per session and many of your pages re-use the same scripts and stylesheets, there is a greater potential benefit from cached external files.

Pack Your CSS File

Packing or crunching your CSS is the practice of removing unnecessary characters from code to reduce its size thereby improving load times.

The CSS can me crunched by removing all the comments and any unwanted characters like white spaces, newlines etc.

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

What are CSS Resets?

Tuesday, March 11th, 2008 By Nikhil

A CSS Reset is/are CSS to set a number of element styles to a specific baseline that creates consistency across various browsers.

We all  have been the through the nightmares of writing cross-browser CSS’s.  So when we start writing our CSS , It is a practice to reset it first to remove/reset any cross browser inconsistencies.  CSS Resets , are simple few lines of CSS that you begin your CSS with , giving you a clean base  to start building your  upon.

The CSS resets that I normally tend to use looks like this

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
html {font-size: 76%;}
table {
fieldset, img {

ol, ul {

h1, h2, h3, h4, h5, h6 {

Reset the browser font size

Also note the reset that has been applied to browser font size in the following line …

html {font-size: 76%;}

The above CSS resets the browser font size to 10 pixels, and this makes it possible to work with relative font sizes (which is every important from a WAI compliance prespective)
For e.g., in the following definition, font-size in a span is set to 10 pixels and that in the paragarph is set to 14 pixels…

span {font-size: 1em;}
p {font-size: 1.4em;}

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

CSS Shorthand Properties

Wednesday, August 15th, 2007 By Nikhil

Specifying a CSS property like this,

margin:5px 0;

actually means,

margin:5px 0px 5px 0px;

That first margin property means:

top and bottom margin = 5px ¦¦ left and right margin = 0px

so the ‘longer shorthand’ would be

margin:5px 0px 5px 0px; (T, R, B, L)

you could even use 3 values

margin: 5px 0 5px;

which means

top = 5px ¦¦ right and left = 0px ¦¦ bottom = 5px

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

Nuisence With Internet Explorer Submit Button Horizontal Padding

Tuesday, June 26th, 2007 By Nikhil

Internet Explorer automatically adds padding to buttons in HTML forms.
This space stretches according to the length of the button’s text.

The solution is  add overflow to its style …. i.e.

.button {
padding-left:10px !important;
padding-right:10px !important;
… any other style for this button…


< input type="submit" value="Internet explorer respects my padding" style="overflow:visible;  padding-left:10px !important; padding-right:10px !important;" >;

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter