Abdullah Yahya

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/