Rounded Corners, Drop Shadows, Opacity & CSS3
Filed under Coding, Demos, Designing, Tutorials on August 12th, 2010
There are some very cool features that have come along with HTML5 and CSS3. Generally, alot are only able to be displayed in Firefox and Webkit-based browsers like Chrome and Safari. Here, I’ll show you an example of how to implement drop shadows, rounded corners and opacity in your designs using CSS3. The first example is from an article by Divya Manian. Really cool designer that one. As usual, IE doesn’t support these features, but there are a few hacks that need to be implemented to get these same effects to work in IE. DEMO PAGE.
Here’s the CSS:
#tiltshadows {
width: 75%;
margin: 1em auto;
position: relative;
z-index: 3;
text-align: center;
}
article {
background: #749194;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding: 10px;
color: #695539;
text-shadow: 0 1px 0 #ffffff;
line-height: 1.7em;
text-align: center;
display: block;
}
article:before, article:after {
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
position: absolute;
bottom: 15px;
z-index: -1;
width: 50%;
height: 20%;
content: "";
background: rgba(0, 0, 0, 0.7);
}
article:after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
right: 10px;
left: auto;
}
article:before {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
right: auto;
left: 10px;
}
#roundandshadow {
background: #faf0e1;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding: 10px;
color: #695539;
text-shadow: 0 1px 0 #ffffff;
line-height: 1.7em;
text-align: center;
display: block;
width: 700px;
margin: 0 auto;
-webkit-box-shadow: 0 15px 10px #000000;
-moz-box-shadow: 0 15px 10px #000000);
box-shadow: 0 15px 10px #000000;
}
#text {
text-shadow: 0 1px 0 #fff;
color: #695539;
text-shadow: 0 1px 0 #fff;
line-height: 1.7;
text-align: center;
display: block;
margin: 60px auto 0;
width: 700px;
}
#opacity {
background: #695539;
opacity: 0.3;
filter: alpha(opacity=30); /* for IE */
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding: 10px;
width: 700px;
margin: -224px auto 0;
height: 210px;
}
Here’s the HTML:
<div id="tiltshadows">
<article>
<h2>Rounded Corners with a "Tilting" Shadow</h2>
<p>CONTENT HERE---CONTENT HERE</p>
</article>
</div><!--END of #tiltshadows-->
<div id="roundandshadow">
<h2>Rounded Corners with a Shadow</h2>
<p>CONTENT HERE---CONTENT HERE</p>
</div><!--END of #roundandshadow-->
<div id="text">
<h2>Opacity</h2>
<p>CONTENT HERE---CONTENT HERE</p>
</div><!--END of #text-->
<div id="opacity">
</div><!--END of opacity-->
No responses to Rounded Corners, Drop Shadows, Opacity & CSS3
Hey guys! This is my first screencast, so I hope that someone actually learns something sorta useful. This one is about reading and writing binary and also reading a binary clock. I’ve included a download for the file that you see in the screencast, in case anyone wants it.
No responses to Binary
0 Comments »