Apparel Software

Powered by Blogger.

CSS Programming for Wordpress Website Part9

Gradient HTML Code:


<!DOCTYPE html>
<head>

<title>Untitled Document</title>

<link href="css/Gradients.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="box"> </div>
<div class="box2"> </div>
<div class="box3"> </div>
<div class="box4"> </div>
</body>
</html>

Gradient CSS Code:

@charset "utf-8";
/* CSS Document */

.box
{width:200px; height:300px; float:left; margin:20px; background:-moz-linear-gradient(top,black,white); background:-webkit-linear-gradient(top,black,white); }

.box2
{width:200px; height:300px; float:left; background:-moz-linear-gradient(top,black,red,green,yellow); margin:20px; }

.box3
{width:200px; height:300px; float:left; background:-moz-linear-gradient(left,red 40%,green 60%); margin:20px; }

.box4
{width:200px; height:300px; float:left; background:-moz-linear-gradient(left,red 40%,green 10%,yellow 50%); margin:20px; }

Gradient Result of Above Code:


Page Active Menu HTML Code:

<!DOCTYPE html>
<head>


<title>Untitled Document</title>
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="menu">
<ul>
<li><a href="index.html" class="active">HOME</a></li>
<li><a href="aboutus.html"  > ABOUT US</a></li>
<li><a href="client.html" >CLIENT</a></li>
<li><a href="faq.html" >FAQ</a></li>
</ul>

</div>
</body>
</html>

Page Active Menu CSS Code:

@charset "utf-8";
/* CSS Document */



.menu{
width:512px; float:right;height:46px; margin-top:5px; }

.menu ul{
margin:0px; font-size:14px;}

.menu li{
list-style:none; float:left;}

.menu a{
text-decoration:none; color:#b0b0b0; width:68px; line-height:46px; text-align:center; margin:0px 2px; display:block;}

.menu a:hover,.active{
text-decoration:none; background-color:#0F6; width:68px; color:#b0b0b0; }

Page Active Menu Result of Above Code:

HTML Transitions Code: 

<!DOCTYPE html>
<head>

<title>Untitled Document</title>

<link href="css/Transitions.css" rel="stylesheet" type="text/css">
</head>

<body>

<ul>
    <li><a href="#" >Latest</a></li>     <li><a href="#">Web Design</a></li>      <li><a href="#">Branding</a></li>      <li><a href="#">Photography</a></li>      <li><a href="#">Print</a></li>
    <li><a href="#">Mobile Design</a></li>
</ul>

<br>

<img src="email-marketing.png" width="400" height="185">
</body>
</html>

CSS Transitions Code: 

@charset "utf-8";
/* CSS Document */


li 
{ transition:all .5s; -moz-transition:all .5s; font-weight:bolder;}


li:hover
{ cursor:pointer; padding-left:30px; }

 img{ transition:all .2s; -moz-transition:all .2s;}
 
 
img:hover{
transform:rotate(90deg) scale(1.5); -moz-transform:rotate(90deg) scale(1.5); }


Result of  Above Transitions Codes: 

This content is Partial because of buil in functions


Share :

Facebook Twitter Google+ Linkedin
0 Comments "CSS Programming for Wordpress Website Part9"

Back To Top