Building Dynamic Shadows with JavaScript and CSS - Building shadowed elements with liquid dimensions
(Page 4 of 4 )
The final example that I'm going to show you concerning the creation of dynamic shadows with CSS is also based on specifying an "outset" value for the respective "border-style" CSS property of a selected DIV, whose pertinent width has been set as a percentage.
A simple implementation of this technique is illustrated by the following (X)HTML file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example of shadowed DIV using the outset border property (liquid size)</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
text-align: center;
margin: 0;
font: bold 16pt Arial, Helvetica, sans-serif;
color: #000;
}
p{
font: normal 10pt Arial, Helvetica, sans-serif;
color: #000;
}
#container{
width: 30%;
padding: 10px;
margin-left: auto;
margin-right: auto;
background: #ccc;
border: 2px outset #fff;
}
</style>
</head>
<body>
<h1>Example of shadowed DIV using the outset border property (liquid size)</h1>
<div id="container">
<p>Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here.</p>
</div>
</body>
</html>
As you can see, in this case I also used the "outset" value of the "border-style" CSS property to build a basic shadow effect, which is depicted in the following graphic:
Definitely, at this point you'll have to agree with me that building dynamic shadows using the "border" CSS property of a given web page element is actually a pretty limited approach that should be used only when another solution can't be applied, since the results achieved with this method may vary across different browsers.
Final thoughts
In this initial chapter of the series, I demonstrated how to implement some basic CSS approaches to build a few primitive shadowed web page elements. Undoubtedly, these methods have their own pros and cons, and can be used only to construct basic shadows.
In the second part of this series, I'll show you how to build more polished shadows by using a simple combination of CSS styles and JavaScript. Now that you know what to expect from the next tutorial, you won't want to miss it!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
