Box shadow css

Examples:

A

B

C

D

E

F

Example A shows a shadow offset to the left and top by 5px:

#Example_A {
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}

Example B shows the same shadow with a blur distance of 5px:

#Example_B {
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}

Example C shows the same shadow with a spread distance of 5px:

#Example_C {
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
box-shadow: -5px -5px 0 5px #888;
}

Example D shows the same shadow with both a blur distance of 5px and a spread distance of 5px:

#Example_D {
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}

Example E shows a shadow with no offset and a blur distance of 5px:

#Example_E {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}

Example F shows a shadow with no offset and both a blur distance of 5px and a spread distance of 5px:

#Example_F {
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}

css to generate shadow of a table

.shadow
{
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}

<table width="100%" class="shadow">
</table>

ShowHide div on RadioButton Click in javascript

<script language="javascript" type="text/javascript">
    function ShowDiv()
    {      
        if (document.getElementById('<%=rbtn_CourseWise.ClientID %>').checked == true)
        {          
            document.getElementById('<%=div_CourseWise.ClientID %>').style.visibility = "visible";
        }
    }
    function HideDiv()
    {
        if (document.getElementById('<%=rbtn_Complete.ClientID %>').checked == true)
         {
            document.getElementById('<%=div_CourseWise.ClientID %>').style.visibility = "hidden";
        }
    }  
 </script>



<tr valign="top">

<td width="40%">
<asp:RadioButton ID="rbtn_CourseWise" runat="server" Text="Coursewise Fee Reg." style="padding-left:13px;font-family:Verdana;font-size:11px" GroupName="Reg"/>
<asp:RadioButton ID="rbtn_Complete" runat="server" Text="Complete Fee Register" style="padding-left:13px;font-family:Verdana;font-size:11px" GroupName="Reg" Checked="true"/>
</td>

<td width="60%">
<div style="width:100%;visibility:hidden" id="div_CourseWise" runat="server">
<table width="100%">
<tr>
<td width="30%">
<asp:Label ID="lbl_Course" runat="server" Text="Course" CssClass="Details" style="padding-left:10px"></asp:Label>
</td>
</tr>
</table>
</div>
</td>
</tr>


on page_load

rbtn_CourseWise.Attributes.Add("onclick", "javascript:ShowDiv('" + rbtn_CourseWise.ClientID + "')");
rbtn_Complete.Attributes.Add("onclick", "javascript:HideDiv('" + rbtn_Complete.ClientID + "')");  

Centering the table content on zoomin and zoomout

<div style="width:100%;">
<div style="margin:auto;width:1005px">
Your Content Here
</div>
</div>

Menu only through css

style.css

/*****FONTS*****/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
/*****DEMO ONLY*****/

* {
/*margin: 0;
padding: 0;
border: 0;*/
}

::selection {
color: #fff;
background: #3b3b3b;
}

::-moz-selection {
color: #fff;
background: #3b3b3b;
}
a {
color: #3b3b3b;
text-decoration: none;
}

a, #navigation li .sub-nav-wrapper .sub-nav li {
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
margin: 0;
padding: 0;
border: 0;
}

#navigation li .sub-nav-wrapper {
pointer-events: none;
opacity: 0;
filter: alpha(opacity=0);
top: 0;

transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-webkit-transition: all 0.35s ease-in-out;
margin: 0;
padding: 0;
border: 0;
}

#navigation li:hover .sub-nav-wrapper {
pointer-events: auto;
opacity: 1;
filter: alpha(opacity=100);
top: 30px;

}

/*****END ANIMATIONS*****/


/*****DROPDOWN*****/

#navigation {
position: relative;
text-align:left;
margin:0 auto;
background-color:Silver;
}

#navigation li {
position: relative;
list-style: none;
display: inline-block;
padding: 5px 5px;

}

#navigation li a {
padding: 5px;
display: block;

font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 700;
color: #3b3b3b;
text-align: left;
text-shadow: 1px 1px 0 rgba(255,255,255,0.25);
}

#navigation li:hover .main
{
color: #ee4e1d;/*menu color on mouseover*/
}

#navigation li .sub-nav-wrapper {
display: block;
position: absolute;
z-index: 30;
margin: 0;
padding: 0;
border: 0;
}

#navigation li .sub-nav-wrapper .sub-nav {
width: 150px;
margin-top: 4px;
background: #fff;
border-top: 1px solid #fff;
margin-left:0px;
padding: 0;
border: 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

#navigation li:hover .sub-nav-wrapper {
display: block;
}

#navigation li .sub-nav-wrapper .sub-nav li
 {
list-style: none;
display: block;
margin: 0;
padding: 0;
text-align: left;
border-bottom: 1px solid #d7d7d7;
}


#navigation li .sub-nav-wrapper .sub-nav li a
{
display: block;
padding: 11px 20px;
font-size: 12px;
font-weight: 600;
text-shadow: 1px 1px 0 rgba(255,255,255,1.0);
box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
-moz-box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
-webkit-box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
}

#navigation li .sub-nav-wrapper .sub-nav li:hover
{
background: #f5f5f5;
border-bottom: 1px solid #3b3b3b;
/*Setting for submenu on Mouseover
}

/*****END DROPDOWN*****/




Inside head

<link href="NewDropDownMenu/style.css" rel="stylesheet" type="text/css"/>

inside body

<table style="width:100%;margin-top:80px">
    <tr>
    <td width="10%"></td>
    <td width="80%" align="left">
    <ul id="navigation">
    <li>
        <a href="Home.aspx" class="main">Home</a>
    </li>
   
    <li>
        <a href="ManageNewsClippings.aspx" class="main">NewsClipping</a>
       
    </li>
   
    <li>
      <a href="ManageNews.aspx" class="main">News</a>
       
    </li>
   
    <li>
      <a href="#" class="main">Gallery</a>
        <div class="sub-nav-wrapper">
        <ul class="sub-nav">
            <li><a href="AddImageGallery.aspx">Add Images</a></li>
            <li><a href="ManageImageGallery.aspx">Manage Images</a></li>
           
        </ul>
        </div>
    </li>  
   
</ul>
    </td>
    <td width="10%"></td></tr>
    <tr>
    <td width="10%"></td>
    <td width="80%">
    <asp:ScriptManager ID="Script1" runat="server"></asp:ScriptManager>
        <asp:ContentPlaceHolder id="ContentBody" runat="server">
       
        </asp:ContentPlaceHolder>
        </td>
        <td width="10%"></td></tr></table>

Rounded corner fieldset css

<style type="text/css">
       fieldset {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
    </style>

Beautiful Paging in Gridview

<style type="text/css" media="screen">  

    .pager a
    {
            border: 1px solid #EDF5FF;
            color: #0067A5;
            text-decoration: underline;
            padding: 2px 5px;
    }
    .pager span
    {
            background-color: #0067A5;
            border: 1px solid #DBEAFF;
            color: #FFFFFF;
            padding: 2px 5px;
    }


    .pager a:hover
    {
        color: #1E90FF;
    }


    </style>

<PagerStyle CssClass="pager" HorizontalAlign="Center"></PagerStyle>  (of gridview)