Google+ PHP TUTORIALS ONLINE HELP FOR MEDICAL AND PROGRAMMING: 2014-12-28

Friday 2 January 2015

How we can swap page’s Background Image on Navigation Hover

How we can swap  page’s Background Image on Navigation Hover

<!DOCTYPE html>
<html>
<head>
<title>...</title>
</head>
<link href="default.css" rel="stylesheet" type="text/css"/>
<body>
<header>

</header>
<div class="container">
<nav>
<h1>Design By Naulej</h1>
<ul>
<li class="active">
<a href="#">Home</a>
<img src="images/rose.jpg" alt="">
</li>
<li>
<a href="#">About</a>
<img src="images/android.jpg" alt="">
</li>
<li>
<a href="#">Clients</a>
<img src="images/Blue_paint2.jpg" alt="">
</li>
<li>
<a href="#">Work</a>
<img src="images/work.jpg" alt="">
</li>
<li>
<a href="#">Contact</a>
<img src="images/crosshatch_woven_mat-background-colored-50-opacity-1024x768.jpg" alt="">
</li>
</ul>
</nav>

<img src="images/bydefault.jpg" alt="">
</div>

</body>
</html>

Style

@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
body {
background:#666;
}

.container {
position: relative;
overflow: hidden;
margin: 100px auto;
width: 800px;
height: 500px;
-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
}
.container img {
position: absolute;
top: 0;
left: 0;
z-index: -60;
}

.container li img {
position: absolute;
top: 0;
left: 800px;
z-index: -50;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
nav {
width: 170px;
height: 500px;
background: #fff;
}
nav h1 {
padding: 20px;
color: #ccc;
text-align: right;
font: 25px Georgia, Times, serif;
}

ul {
width: 800px;
height: 500px;
list-style: none;
}
li a {
z-index: 1;
display: block;
padding-left: 20px;
width: 150px;
height: 30px;
background: white;
color: #444;
text-decoration: none;
font: 14px/30px Helvetica, Verdana, sans-serif;
}

li:nth-child(1) {
padding-top: 50px;
}
li a:hover {
background:#F00;
}

li a:hover + img {
left: 0px;
}

Display on Screen. look like.




Posted by at No comments:

how to rotate a image in css

Image rotate in css

Index.html

<html>
<head>
<title>....</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<body>
<center>
<a herf="" class="rotate"><img src="images/x-cart-ico.png" class="rotate"/></a>
<a herf="" class="rotate"><img src="images/magento-icon1.png" class="rotate"/></a>
<a herf="" class="rotate"><img src="images/opencart-logo1.png" class="rotate"/></a>
<a herf="" class="rotate"><img src="images/wordpress-icon.png" class="rotate"/></a>
</center>
</body>
</head>
</html>

style.css

.rotate{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}

.rotate:hover
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}


Posted by at No comments:

Thursday 1 January 2015

Design a website using HTML5, CSS3 and Responsive

How we can design a website using HTML5, CSS3 and Responsive.

 You can copy this code.

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ENGINEER YOUR LIFE</title>
<meta name="content-type" content=""/>
</head>
<link href="static/css/style.css" rel="stylesheet" type="text/css" />

<body class="body">
<header class="mainheader">
<img src="static/image/logo.PNG"/>
</header>
<nav>
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Career</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Contact</a></li>
<ul>
</nav>
<div class="main_contain">
<div class="contain">
<article class="top_contain">
<header>
<h1 class="post_title">First Post</h1>
</header>
<footer>
<p class="post_info">This post by Naulej</p>
</footer>
<content>
<p>HTML or HyperText Markup Language is the standard markup language used to create Web pages.HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets . HTML tags most commonly come in pairs like and although some tags represent empty elements and so are unpaired, for example. The first tag in a pair is the start tag, and the second tag is the end tag (they are also called opening tags and closing tags).</p>
<p>A Web browser can read HTML files and compose them into visible or audible Web pages. The browser does not display the HTML tags and scripts, but uses them to interpret the content of the page. HTML describes the structure of a Website semantically along with cues for presentation, making it a markup language, rather than a programming language.</p>

</content>
</article>

<article class="bottom_contain">
<header>
<h2 class="post_title">Second Post</h2>
</header>
<footer>
<p class="post_info">This post by Naulej</p>
</footer>
<content>
<p>HTML or HyperText Markup Language is the standard markup language used to create Web pages.HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets . HTML tags most commonly come in pairs like and although some tags represent empty elements and so are unpaired, for example. The first tag in a pair is the start tag, and the second tag is the end tag (they are also called opening tags and closing tags).</p>
<p>A Web browser can read HTML files and compose them into visible or audible Web pages. The browser does not display the HTML tags and scripts, but uses them to interpret the content of the page. HTML describes the structure of a Website semantically along with cues for presentation, making it a markup language, rather than a programming language.</p>

</content>
</article>
</div>
</div>

<aside class="top_sidebar">
<article>
<h1>Top Sidebar</h1>
<p>HTML or HyperText Markup Language is the standard markup language used to create Web pages.</p>
</article>
</aside>

<aside class="middle_sidebar">
<article>
<h1>Middle Sidebar</h1>
<p>HTML or HyperText Markup Language is the standard markup language used to create Web pages.</p>
</article>
</aside>

<aside class="bottom_sidebar">
<article>
<h1>Bottom Sidebar</h1>
<p>HTML or HyperText Markup Language is the standard markup language used to create Web pages.</p>
</article>
</aside>

<footer class="main_footer">
<p>Copyright &copy:2015 First Design by <a href="http://phptututorials.blogspot.in/">Er Naulej Kumar</p>

</footer>
</body>
</html>

style.css

@charset "utf-8";
/* CSS Document */
body{
background-color:#CCC;
color:#000305;
font-size:14px;
font-family:Arial,'Lucida Sans Unicode';
line-height:1.5;
text-align:left;

}

.body{
margin: 0 auto;
width:70%;
clear:both;
}
.mainheader{
background-image:url(templete/Responsive/static/image/hedaer_banner.jpg);
width:100%;
height:200px;
}
.mainheader img{
width:30%;
height:130;
inherit:auto;
margin:2% 14px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;

}
nav{
background-color:#666;
height:40px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
nav ul{
list-style:none;
margin:0 auto;

}
nav ul li{
float:left;
display:inline;

}
nav a:link, nav a:visited{
text-decoration:none;
color:#fff;
display:inline-block;
padding:10px 25px;
height:20px;
}
nav a:hover, nav a:active,
nav .active a:link, nav .active a:visited{
background-color:#CF5C3F;
text-shadow:none;

}
nav ul li a{
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;

}

.main_contain{
line-height:25px;
border-radius:5px;
margin-top:2%;
-moz-border-radius:5px;
-webkit-border-radius:5px;

}
.contain{
width:70%;
float:left;
}
.top_contain{
background-color:#fff;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:3% 5%;
margin-top:2%;

}
.bottom_contain{

background-color:#fff;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:3% 5%;
margin-top:2%;
}

.post_info{
font-style:italic;

color:#999;

}

.post_title{
color:#CF5C3F;
}

.top_sidebar{
width:21%;
float:left;
margin-left:3%;
padding:2% 3%;
margin-bottom:2%;
margin-top:1.5%;
background-color:#fff;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;

}
.middle_sidebar{
width:21%;
float:left;
margin-left:3%;
padding:2% 3%;
margin-bottom:2%;
background-color:#fff;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;

}
.bottom_sidebar{
width:21%;
float:left;
margin-left:3%;
padding:2% 3%;
margin-bottom:2%;
background-color:#fff;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;

}
.main_footer{
width:100%;
height:40px;
float:left;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#666;
margin-top:2%;

}

.main_footer p{
width:95%;
margin:1% auto;
text-align:center;
color:#fff;
font-family:Arial, Helvetica, sans-serif;

}
.main_footer p a{
color:#FF0;
text-decoration:none;

}

@media only screen and (min-width: 115px) and (max-width: 600px) {

.body{
width:90%;
font-size:95%;
}
.mainheader{
width:100%;
background-color: azure;
}
.mainheader img{
width:200px;
height:95px;
margin: 2% 13px;
}
nav{
height:250px;
}
nav ul{
padding-left:0px;

}
nav ul li{
width:100%;
text-align:center;


}
nav a:link, nav a:visited{
padding:10px 25px;
height:20px;
display:block;
}
.contain{
width:100%;
float:left;
margin:2%;
}
.post_info{
display:none;
}
.top_contain{
background-color:#fff;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:3% 5%;
margin-top:2%;
margin-bottom:4%;

}
.bottom_contain{

margin-top:3%;
}


.top_sidebar{
width:95%;
float:left;
margin:2% 1% 2% 0;
padding:2% 3%;
background-color:#fff;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;

}
.middle_sidebar{
width:95%;
float:left;
margin:2% 1% 2% 0;
padding:2% 3%;
background-color:#fff;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.bottom_sidebar{
width:95%;
float:left;
margin:2% 1% 2% 0;
padding:2% 3%;
background-color:#fff;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;

}

}

After use code you can see look like









Posted by at No comments:
Subscribe to: Posts (Atom)