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"