CSS Archives - AuthorCode

How to apply class conditionally using ng-class in AngularJs

The ngClass directive gives you the ability to conditionally change CSS classes via an expression in the html.

Example
Example that demonstrates dynamically set CSS classes on an DIV HTML element. Continue reading “How to apply class conditionally using ng-class in AngularJs”

Create your own custom cursor (mouse pointer) for your web page.

You can change the mouse pointer for the your web page or a specific html element.

Generally we use the cursor property in css that specifies the type of cursor to be displayed when pointing on an element. Such as: Continue reading “Create your own custom cursor (mouse pointer) for your web page.”

Learn CSS3 on the MSDN

CSS(Cascading Style Sheets) is used for look and formatting of the web page written in markup language. I have collecting some important links on MSDN library for learning the CSS label 3. Continue reading “Learn CSS3 on the MSDN”

Arrow slide show – JavaScript and CSS

You can download complete code for slide show that is very simple to use in your website or webpage. It is easy to use.
Its totally customize arrow slide show. we can change number of image display at a time time interval between two images.
Continue reading “Arrow slide show – JavaScript and CSS”

Dropdown menu in html

Drop down menus are the very important things when we design a website. On here we create a very user friendly and light weight drop down menu using html and CSS. You can download the source code that contains html and CSS code.

Download
[wpfilebase tag=file id=5]

You can change the style and appearance of this menu according to you. You can change the height, background color or others appearance. See this Html and CSS code:

HTML Code :

<html>
<head>
    <title>DropDown menu in HTML</title>
    <link href="dropdownmenu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menus">
<ul>
     <li> 
     <a href=''>ABOUT</a>
        <ul>
	<li><a href=''>About Us</a></li> 
	<li><a href=''>Contact Us</a></li> 
	<li><a href=''>Authors</a></li> 
	<li><a href=''>EmailUs</a></li>
        </ul>
     </li>
 
     <li> 
     <a href=''>DEVELOPMENTt</a>  
        <ul>
	<li><a href=''>CSharp language</a></li>
 	<li> <a href=''>Visual Basic .Net </a> </li> 
	<li><a href=''>Visual Basic 6.0</a></li> 
	<li><a href=''>Visual C++</a></li>
	</ul>
     </li>
 
     <li> 
     <a href=''>WEB DEVEL</a> 
        <ul>
	<li><a href=''>ASP.Net</a></li>
 	<li><a href=''>JavaScrip</a></li>
        </ul>
     </li>
 
     </ul>
</div>
</body>
</html>

CSS :

#menus
{
	height:30px;
	background:url(images/navbg7.gif) repeat-x left top;
}
#menus ul
{
	 margin:0px;
	 padding:0px;
 
 
}
#menus ul li
{
	list-style:none;
	display:inline-block;
	float:left;
	position:relative;
	line-height:30px;
	height:30px;
	background:url(images/navbg7.gif) repeat-x left top;
	width:150px;
	text-align:center;
	behavior: url("csshover3.htc");
}
#menus ul li ul
{
	display:none;
}
#menus ul li a
{
	color:#fff;
	 padding:0px 15px;
	 line-height:30px;
	 text-decoration:none;
	 font-size:12px;
}
#menus a:hover
{
	text-decoration:underline;
}
#menus ul li:hover ul
{
	position:absolute;
	left:0px;
	top:30px;
	display:block;
}
#menus ul li ul li
{
	 width:160px;
	 text-align:left;
	 padding-left:10px;
	 height:30px;
	 overflow:hidden;
	 background:url(images/navbg7.gif) repeat-x left top;
}