Personally, I have never celebrated valentine’s day in my life, in-fact I am completely against the idea of reserving days for our dear ones. Be it valentine’s day, Mother’s day or Friendship day, I just can’t understand the logic of waiting for a particular day to celebrate love or express gratitude for my loved ones. My affection will always be there and my dear ones will know it all the time. Besides, at least in India Valentine’s Day is nothing more than a marketing gimmick, it is hyped by marketing folks to sell their products.

Similarly I am also gonna use this day for the first time just to market my blog

Here in this day I am expressing here, my whole hearted love and affection towards such a wonderful web tool called CSS. That too in a different way, with a Pure CSS Valenties Day Card.

This Valentine’s Day Card is designed purely using CSS & HTML. No images, fonts or symbols here, simply CSS with plain DIVs and Classes, even the text ‘I LOVE CSS’. Go ahead and check…

Browser Compatibility: I have checked it in Firefox 3.5 and Chrome 4.0 and it’s working fine in both the browsers. There are some rendering issues in IE-7 and Opera 9.02. I am not sure about Safari.

CSS Heart – LIVE PREVIEW

Sample HTML Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<div id="container">
	<div class="hrt-lft"></div>
	<div class="hrt-rgt"></div>
	<div class="bot"></div>
 
	<div class="arw1"></div>
	<div class="arw2"></div>
	<div class="pointer"></div>
	<div class="pointer2"></div>
	<div class="pointer3"></div>
 
	<div class="shade1"></div>
	<div class="shade2"></div>
	<div class="shade4"></div>
	<div class="shade5"></div>
 
	<div class="msg-holder">
		<div class="i"></div>
		<div class="l">
			<div></div>
		</div>
		<div class="o">
			<div></div>
		</div>
		<div class="v"></div>
		<div class="v2"></div>
		<div class="v3"></div>
		<div class="e">
			<div class="e2"></div>
			<div class="e3"></div>
		</div>
		<div class="c">
			<div></div>
		</div>
		<div class="s">
			<div class="s2"></div>
			<div class="s3"></div>
		</div>
		<div class="ss">
			<div class="ss2"></div>
			<div class="ss3"></div>
		</div>
	</div>
</div>

Read the rest of this entry »

It is said that 70 to 80 percentage of the end-user response time is spent on the front-end. A major portion of this time is exhausted on downloading all the external components in a web page including, stylesheet, images, scripts, flash etc. An extra HTTP request adds 200+ milliseconds to a page (worldwide average). Since most of today’s browsers limit about 3 or 4 parallel requests at a time, a page with so many external references can cause the requests to get queued up. This may eventually cause the page loading time to increase. In short, the fewer files the web browser has to fetch that much faster the site loads. It’s as simple as that.

What is CSS sprite?

CSS sprites can be termed as a method for reducing the number of image requests to a web page by combining multiple images into a single image, and display the desired segment using CSS background-image and background-position properites. Now that almost all major browsers started supporting CSS background-image and background-position properties, CSS sprites are getting more significance.

Cool Sprites – Free Pure CSS menu for download

Here I am presenting a cool overlapped pure CSS menu created using CSS sprites. This is an initial draft version, so far I have checked it only in Firefox 3.5, IE 7, Chrome 3.0 & Opera 9.02 and it looks fine. If anyone of you finds any issues in any other browsers, please lemme know. Cool sprites is a pack of four different versions of the same menu. The photoshop source is also available for download, so that you can customize it as per your need. Since this menu is largely dependent on the background image, you need to customize the image to alter the link label, color, size etc.

Cool Sprites – LIVE PREVIEW

Read the rest of this entry »

I am really happy to present my first FREE icon set here, which was actually created to use in my personal blog, but later I have decided to share it online. There are total 18 social media icons including twitter, facebook, linkedin, orkut, myspace etc… and it comes in two sizes of transparent PNG 24-bit format. The photoshop source file (PSD) is also included, so that you can modify and create different versions if required. And they are all free, of course

Read the rest of this entry »