Hello Friends,
In these Tutorials we to get Shadow behind Image, let me explain briefly. A box shadow property allows us to draw a shadow behind an element. The box-shadow used to apply an inset or drop shadow to a block element. Since all HTML block elements are considered as boxes, you can apply a shadow to any block-level element.
Image : 1
HTML & CSS Code :
<%@ 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
HTML & CSS Code :
<%@ 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
HTML & CSS Code :
<%@ 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
HTML & CSS Code :
<%@ 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>
0 Komentar untuk "Images with shadow effect in asp.net"