my travels, sometimes politics, and whatever else I just feel like writing about :)
To add rounded corners to an element using CSS, just add the following code to your CSS
-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
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/
To add a gradient to an element using CSS, just add the following code to your CSS
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+ */
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.
Center Align HTML Elements0
Posted In Web Development
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. [..]
To add a drop shadow to an element using CSS, just add the following code to your CSS
-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 */
}
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/
Say you want to set the background color of something to black. In CSS, you might write something like:
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:
The first 3 parameters are the red, green and blue values and the fourth is the alpha transparency from 0 to 1.
