» » » Images with shadow effect in asp.net

Images with shadow effect in asp.net

Posted By : Erukulla's

Images with shadow effect

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>
Tag : ASP.NET, HTML5
0 Komentar untuk "Images with shadow effect in asp.net"

Back To Top