CSS Programming for Wordpress Website Part9

Sunday, March 12, 2017

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>

</head>

<body>

<ul>

<li><a href="aboutus.html" > ABOUT US</a></li>

<li><a href="client.html" >CLIENT</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>

</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>

</body>

</html>

CSS Transitions Code:

@charset "utf-8";

/* CSS Document */

{ 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

Lectra Wilcom