Abdullah Yahya

Say you want to set the background color of something to black. In CSS, you might write something like:

[cc lang=”css”]background-color: #000000;[/cc]

But, what if you wanted the color to be less dark while showing whatever is underneath it like what you’d get by specifying 50% opacity in Photoshop. To do that, do the following:

[cc lang=”css”]background-color: rgba(0, 0, 0, 0.5);[/cc]

The first 3 parameters are the red, green and blue values and the fourth is the alpha transparency from 0 to 1.

To add a drop shadow to an element using CSS, just add the following code to your CSS
[cc lang=”css”]
.shadow {
-moz-box-shadow: 3px 3px 4px #000; // for firefox
-webkit-box-shadow: 3px 3px 4px #000; // for chrome and safari
box-shadow: 3px 3px 4px #000; // for CSS3-supported browsers
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000′)”;/* For IE 8 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000′);/* For IE 5.5 – 7 */
}
[/cc]

If a browser doesn’t support drop shadows, it just won’t show them.

To change the direction and size and opacity of the drop shadow, tweak the values. Learn more at http://www.css3.info/preview/box-shadow/

Here are some different way to horizontally center HTML elements:

<div style=”margin: 0 auto; width:500px;  height: 500px;”> some text </div>

The div is centered but the text within it isn’t.

<div style=”margin: 0 auto; text-align: center; width:500px;  height: 500px; “>some text </div>

The div and the text within it are centered. Continue reading Center Align HTML Elements

To add a gradient to an element using CSS, just add the following code to your CSS

[cc lang=”css”]
background: #dcd9d1; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#dbd8d0′, endColorstr=’#f4f3f1′); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#dbd8d0), to(#f4f3f1)); /* for webkit browsers */
background: -moz-linear-gradient(top, #dbd8d0, #f4f3f1); /* for firefox 3.6+ */
[/cc]

If a browser doesn’t support gradients, it will just display the background color.

To change the direction and other values of the gradient, check out http://webdesignerwall.com/tutorials/cross-browser-css-gradient.

To add rounded corners to an element using CSS, just add the following code to your CSS
[cc lang=”css”]/* 4 rounded corners */
-webkit-border-radius: 10px; // for Safari and Chrome browsers
-khtml-border-radius: 10px; // for Konqueror browser
-moz-border-radius: 10px; // for Firefox browser
border-radius: 10px; // for browsers that support CSS 3
[/cc]
Of course, change the values (10px) to whatever value you want to change the corner radius.

If a browser doesn’t support rounded corners, it will just show square corners.

For more information, visit http://www.css3.info/preview/rounded-border/

I just found a quick and cool way to create rounded corners on images using CSS.  I don’t have time to write about it but you can read about it here:

http://webdesignerwall.com/tutorials/css3-image-styles

Here’s how to use it:

1. Add image to your web page

[cc lang=”html”]

[/cc]

Continue reading CSS Rounded Corners on Images

Keeping track of events on your website is very useful. Google Analytics comes with a useful feature called Event Tracking.

http://code.google.com/apis/analytics/docs/tracking/eventTrackerGuide.html

For example, if you want to track all clicks to on a link you can use

[cc lang="html"]Play[/cc]

Continue reading Google Event Tracking