Week 5

Code for CSS3 rounded corners background

This is a box with rounded corners.

.rounded1 {
background: pink; 
border: 2px solid black;
width: 60%;
text-align: center;
padding: 8px;
border-radius: 8px;   			/* css standard tag */
-moz-border-radius: 8px; 		/* firefox engine */
-webkit-border-radius: 8px;  		/* safari/iPhone/chrome engine */
}

This is a box with rounded corners.
It will expand as the text gets longer and longer. Text here is aligned left, which is the default

.rounded2 {
background: black; 
border: 8px solid green;
line-height: 140%;
width: 220px;
padding: 18px 24px;
border-radius: 18px;				/* css standard tag */
-moz-border-radius: 18px;			/* firefox engine */
-webkit-border-radius: 18px;		/* safari/iPhone/chrome engine */
color: white;
}

This is a box with rounded corners and a BG image in the border.
It will expand as the text gets longer and longer. Text here is aligned left, which is the default

.strokebg1 {  
line-height: 140%;
width: 220px;
padding: 18px 24px;
border-width: 12px;  /* sets the border width */
border-image: url(multiborder.png) 12;
-webkit-border-image:  url(multiborder.png) 12;
-moz-border-image:  url(multiborder.png) 12;  /* stretch, repeat, or round  */
color: white;
}

This is a box with rounded corners and a BG image in the border.
It will expand as the text gets longer and longer. Text here is aligned left, which is the default

  same settings as .strokebg1, different image

This is a box with rounded corners and a BG image in the border.
It will expand as the text gets longer and longer. Text here is aligned left, which is the default

 same settings as .strokebg1, different image

This is a box with rounded corners and a dropshadow

.dropshadow1 {
background: lightgreen; 
width: 60%;
text-align: center;
padding: 18px;
border-radius: 18px;   /* css standard tag */
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
color: darkgreen;
box-shadow: 5px -5px 10px #888;
-webkit-box-shadow:5px -5px 10px #888;
-moz-box-shadow:5px -5px 10px #888;
}

This is a box with rounded corners and a dropshadow

dropshadow2 {
background: lightyellow; 
border: 1px solid green;
width: 60%;
text-align: center;
padding: 18px;
border-radius: 22px;   /* css standard tag */
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
color: darkgreen;
box-shadow: 15px 10px 20px #888;
-webkit-box-shadow:15px 10px 20px #888;
-moz-box-shadow: 15px 10px 20px #888;
}

Square box, drop shadow only

.dropshadow3 {
background: lightpink; 
border: 1px solid green;
width: 60%;
text-align: center;
padding: 18px;
color: darkgreen;
box-shadow: 15px 10px 20px #888;
-webkit-box-shadow:15px 10px 20px #888;
-moz-box-shadow: 15px 10px 20px #888;
}

Rounded tab

.tab {
background: tan; 
width: 15%;
text-align: center;
padding: 11px;
border-top-right-radius: 18px;   /* css standard tag */
border-top-left-radius:18px;
	-moz-border-radius-topright: 18px;
	-moz-border-radius-topleft: 18px;
	-webkit-border-top-right-radius: 18px;
	-webkit-border-top-left-radius: 18px;
color: darkgreen;
box-shadow: 5px -5px 10px #888;
-webkit-box-shadow:5px -5px 10px #888;
-moz-box-shadow:5px -5px 10px #888;
}

Used in a list menu

we will do this later when we do lists and menus