CSS Heart – A web designer way of wishing Valentine’s Day…

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 »