1 0 Tag Archives: css
post icon

How do you Stretch a Background Image in a Web Page?

The best way to stretch an image to fit the background of a page is to use the CSS 3 property, background-size:

body {
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
}

Leave a Comment
post icon

Center body content using CSS

#wrapper {
width: 1000px;
margin: 0 auto;
}

 

<body>
<div id=”wrapper”>
<h1>This page is centered!</h1>
<!– rest of page content goes here –>
</div>
</body>

Leave a Comment
post icon

Drop shadow on mouse over

<a href=”#” >

<img src=”Chrysanthemum.jpg” width=”100″ height=”100″ />

</a>

 

 

<style type=”text/css”>
.imagedropshadow {
padding: 5px;
border: solid 1px #EFEFEF;
}
a:hover img.imagedropshadow {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}

</style>

 

 

 

 

 

Example :-

 

 

Leave a Comment
December 29, 2011
post icon

Round Corner box with CSS “Border-radius”

Have you(programmer) ever need a round corner box around some text. What you do

ask designer to make a round corner image and use it as a <DIV> backround, right?

Now with CSS3, IE9, FF7+, you can use CSS to define a “round corner box” using only CSS.

//css

<style>
.round{
border-radius: 25px;
background-color:#CCC;
width:300px;
height:300px;
padding-top:5px;
padding-left:5px;
}
</style>

 

//HTML/PHP

<div class=”round”>This is round corner box</div>

 

//output

CSS Round Corner Box using DIV

 

Leave a Comment