Posts tagged with “css3”

RGBa vs Opacity: The Difference Explained

Monday, 29 March, 2010
RGBa vs Opacity: Difference between two CSS3 properties explained with examples...

To be able to effectively handle the alpha transparency or opacity of a particular element purely using CSS/HTML was the dream of any web designer. Because, with alpha transparency or opacity they can make visually more beautiful and easily maintainable websites with less effort. Now with CSS3 we can achieve these using properties such as RGBa and Opacity.

What is RGBa?

In addition to RGB (Red Blue Green) CSS3 has introduced a new feature to color setting, which is called RGBA. RGBA stands for Red Blue Green Alpha. Here “A” in this property name stands for “Alpha”. This additional feature can be used to specify an opacity value for any color. The alpha channel is usually used as an opacity channel. If a pixel has 0% value in its alpha channel, it’s fully transparent (and, thus, invisible), whereas a value of 100% in the alpha channel gives a fully opaque pixel. We can use this for anything that can take the CSS color property.

Sample CSS Code:

1
P { background-color: rgba(255, 0, 0, 0.5); }

We can use RGBA now on all new-generation browsers including Firefox 3, Chrome, Safari, and Opera 10, but we won’t see the effect in Internet Explorer.

Live Preview (Screenshot for older browsers)

Read the rest of this entry »

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

Saturday, 13 February, 2010
CSS art - Valentine's day card created purely using css and html - download free

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.

[ad#ad-3]

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 »