Greetings, fellow developers! Today, we embark on a journey into the world of web design, exploring the art of creating captivating images with shadow effects in ASP.NET. Buckle up as we unveil the magic behind four mesmerizing shadow techniques to elevate your image presentation.
Image Shadows Unveiled
Before we delve into the code, let's take a moment to appreciate the visual allure of images with shadow effects. The shadows add depth and sophistication, turning a mundane image into a captivating visual element.
Image 1: Simple Border and Shadow
Let's start with a subtle shadow effect. The HTML and CSS code for this technique is straightforward. We create a container with a border and apply a basic shadow to give the image a lift.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Image.aspx.cs" Inherits="Example_Image" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.Image_Style
{
width:150px;
height:150px;
border:2px solid #ff0000;
/*border-radius:10%;
box-shadow: 10px 10px 5px #888888;*/
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<img class="Image_Style" src="http://upload.wikimedia.org/wikipedia/commons/d/dd/Salmanrampwalk.png" />
</div>
</form>
</body>
</html>
Image 2: Rounded Image with Shadow
Next up, let's add a touch of finesse by rounding the image corners. The CSS code introduces border-radius, transforming our image into a visually pleasing rounded shape.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Image.aspx.cs" Inherits="Example_Image" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.Image_Style
{
width:150px;
height:150px;
border:2px solid #ff0000;
-moz-box-shadow: 10px 10px 5px #ccc;
-webkit-box-shadow: 10px 10px 5px #ccc;
box-shadow: 10px 10px 5px #ccc;
-moz-border-radius:25px;
-webkit-border-radius:25px;
border-radius:25px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<img class="Image_Style" src="http://upload.wikimedia.org/wikipedia/commons/d/dd/Salmanrampwalk.png" />
</div>
</form>
</body>
</html>
Image 3: Floating Image with Bottom Shadow
Now, let's create the illusion of our image floating with a shadow at the bottom. Adjusting the box-shadow properties gives a realistic lift to the image.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Image.aspx.cs" Inherits="Example_Image" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.Image_Style
{
width:150px;
height:150px;
border:2px solid #ff0000;
-moz-box-shadow: 0px 6px 5px #ccc;
-webkit-box-shadow: 0px 6px 5px #ccc;
box-shadow: 0px 6px 5px #ccc;
-moz-border-radius:190px;
-webkit-border-radius:190px;
border-radius:190px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<img class="Image_Style" src="http://upload.wikimedia.org/wikipedia/commons/d/dd/Salmanrampwalk.png" />
</div>
</form>
</body>
</html>
Image 4: Distinctive Shadow and Shape
For our final act, let's create a distinctive shadow and shape combination. This time, we introduce more advanced properties like border-top-left-radius and border-top-right-radius, resulting in a unique shadow effect.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Image.aspx.cs" Inherits="Example_Image" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.Image_Style
{
width:150px;
height:150px;
border:2px solid #ff0000;
box-shadow: 0px -10px 30px #ccc;
color:white;
font-size:50px;
border-top-left-radius:75px;
border-top-right-radius:75px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<img class="Image_Style" src="http://upload.wikimedia.org/wikipedia/commons/d/dd/Salmanrampwalk.png" />
</div>
</form>
</body>
</html>
Conclusion
Congratulations! You've just mastered the art of incorporating captivating shadow effects into your ASP.NET images. Feel free to experiment with these techniques, customize them to suit your project, and watch your images come to life with style and elegance. Happy coding!
0 Comments