Abdullah Yahya

As you probably know, browsers have their own default CSS styles which determine how a web page looks such as the spacing between elements and how form fields look. To save yourself from the headache of trying to fiddle with CSS settings to get your websites to look right in all browsers, add the following CSS reset code to the top of your CSS file.
[cc lang=”css”]/* reset / remove browser defaults */
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, blockquote {
margin: 0px;
padding: 0px;
border: 0px;
font-weight: normal;
}[/cc]

When designing websites, you normally don’t want to hard code any link or references to files. For example, if you reference an image, you should do so as

[cc lang=”html”]/images/header.jpg[/cc]

instead of

[cc lang=”html”]http://www.mysite.com/images/header.jpg[/cc] Continue reading Automatic Browser Protocol Detection

If you’re a local business targeting a local geographic area, it may not matter much. But, if many of your customers come from different parts of the world, you can improve website performance by using a CDN (Content Delivery Network). Basically, website assets like images and videos can be referenced in your code to come from a CDN instead of the same server hosting your web pages. If a user is viewing your website from the US, then the website’s assets will be downloaded from a fast server near the US. Similarly, is a user is viewing your website from Europe, then the website’s assets will be download from a fast server near Europe. Though CDNs used to be expensive, they’re cheap now. Amazon offers a cheap and easy-to-use CDN called CloudFront where you pay per use.  Here’s one way to set it up: Continue reading Improve Website Performance Using a CDN (Content Delivery Network)

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/