CSS3 Techniques
<style type="text/css">
body {
background-color: #D6E4FF;
}
.shadow1 {
background-color: #eee;
padding: 10px;
padding-left: 18px;
padding-right: 18px;
box-shadow: 0px 2px 4px rgba(0,0,0,0.7);
-webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.7);
-moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.7);
color: black;
font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
font-size: 10pt;
}
.shadow2 {
background-color: #333;
padding: 10px;
padding-left: 18px;
padding-right: 18px;
box-shadow: 0px 2px 6px rgba(255,255,153,0.7);
-webkit-box-shadow: 0px 2px 6px rgba(255,255,153,0.7);
-moz-box-shadow: 0px 2px 6px rgba(255,255,153,0.7);
color: white;
font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
font-size: 10pt;
}
.round1 {
background-color: #f99;
border: solid 1px black;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
padding: 10px;
padding-left: 18px;
padding-right: 18px;
color: black;
font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
font-size: 10pt;
}
.round2 {
background-color: #333;
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-top-left-radius: 59px 20px;
-webkit-border-bottom-left-radius: 59px 20px;
-moz-border-radius-topleft: 59px 20px;
-moz-border-radius-bottomleft: 59px 20px;
padding: 10px;
padding-left: 18px;
padding-right: 18px;
color: white;
font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
font-size: 10pt;
}
.round3 {
border: dashed 2px #093;
-webkit-border-top-left-radius: 17px;
-moz-border-radius-topleft: 17px;
-webkit-border-bottom-right-radius: 17px;
-moz-border-radius-bottomright: 17px;
background-color: #ff9;
padding: 10px;
padding-left: 18px;
padding-right: 18px;
color: black;
font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
font-size: 10pt;
}
.css5box2 {
<!-- Baseline -->
background-color: #fed;
border-top: solid 1px white;
border-bottom: solid 1px #669;
padding: 10px;
padding-left: 18px;
padding-right: 18px;
color: black;
font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
font-size: 10pt;
margin-bottom: 10px;
border-radius: 8px;
<!-- border radius -->
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
<!-- shadows -->
-moz-border-radius: 8px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
<!-- gradient -->
background: -webkit-gradient(
linear,
center top, center bottom,
color-stop(0%, #fffffa),
color-stop(30%, #fed),
color-stop(80%, #fed),
color-stop(100%, #fffffa)
);
background: -moz-linear-gradient(
top, #eef, #cce 30%, #cce 80%, #eef 100%
);
width:350px;
}
.gradback {
background-color: #eee;
background: -webkit-gradient(
linear,
center top, center bottom,
color-stop(0%, #eef),
color-stop(30%, #cce),
color-stop(80%, #cce),
color-stop(100%, #eef)
);
background: -moz-linear-gradient(
top, #eef, #cce 30%, #cce 80%, #eef 100%
);
border-top: solid 1px white;
border-bottom: solid 1px #669;
padding: 10px;
padding-left: 18px;
padding-right: 18px;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
color: black;
font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
font-size: 10pt;
}
.css5box2 h3 {
text-shadow: 0px 3px 3px rgba(0,0,0,0.2);
color: #339;
}
input.styled {
background-color: #eee;
background: -webkit-gradient(
linear,
center top, center bottom,
color-stop(0%, #eee),
color-stop(100%, #fff)
);
background: -moz-linear-gradient(
top, #eee, #fff
);
border: solid 2px white;
padding: 3px;
padding-left: 7px;
padding-right: 7px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
color: black;
text-shadow: 0px 1px 1px white;
font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
font-size: 10pt;
}
input.styled:focus {
box-shadow: 0px 1px 6px rgba(0,64,255,0.7);
-webkit-box-shadow: 0px 1px 6px rgba(0,64,255,0.7);
-moz-box-shadow: 0px 1px 6px rgba(0,64,255,0.7);
outline: none;
-webkit-focus-ring-color: none;
}
input.roundbutton {
background-color: #eee;
background: -webkit-gradient(
linear,
center top, center bottom,
color-stop(0%, #eee),
color-stop(100%, #ccc)
);
background: -moz-linear-gradient(
top, #eee, #ccc
);
border: solid 2px white;
padding: 10px;
padding-left: 18px;
padding-right: 18px;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
cursor: pointer;
box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
color: black;
text-shadow: 0px 1px 1px white;
font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
font-size: 10pt;
}
input.roundbutton:active {
border-width: 1px;
margin-left: 1px;
margin-right: 1px;
-box-shadow: 0px 1px 1px rgba(0,0,0,0.8);
-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.8);
-moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.8);
background: -webkit-gradient(
linear,
center top, center bottom,
color-stop(100%, #eee),
color-stop(0%, #ccc)
);
background: -moz-linear-gradient(
top, #ccc, #eee
);
}
</style>
<p><b>Shadows</b></p>
<p> <span class="shadow1">Shadow</span> <span class="shadow2">Glow</span></p>
<p><b>Borders with Rounded Corners</b></p>
<p> <span class="round1">Round Corners</span> <span class="round2">Round Corners</span> <span class="round3">Round Corners</span></p>
<p><b>How to Style Boxes</b></p>
<div class="css5box2">
<h3>Lorem Ipsum Dolor</h3>
<p>Lorem ipsum dolor sit amet, vurucelerisque tincidunt ac vel elit.</p>
</div>
<div>
<input type="text" value="I am a text field" size="43" class="styled" />
</div>
<p><b>Styling Forms</b></p>
<div style="height: 43px">
<input type="button" value="Click Me" class="roundbutton" />
</div>
