PHP TUTORIALS

Sunday 15 February 2015

Responsive Navigation HTML5 AND CSS3

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Navigation HTML5 AND CSS3</title>
<style type="text/css">
*{
margin:0;
padding:0;

}
#brand{
font-family:Verdana, Geneva, sans-serif;
font-size:30px;
line-height:50px;
float:left;

}
nav{
background:#666;
width:100%;
text-align:center;

}
nav ul{float:right;line-height:50px;}
nav li{
list-style-type::none;
display:inline;
}
nav a{
text-decoration:none;
color:#CCC;
padding:10px;
font-family:Verdana, Geneva, sans-serif;
}
nav a:hover{color:#333;}
@media screen and (max-width:768px){

#brand{margin-top:-50px;}
nav{}
nav ul{float:none; margin-top:50px;background:#F03;}
nav li{display:inline;}
nav a{color:#ccc;}
nav a:hover{color:#ffffff;}

}

@media screen and (max-width:480px){

#brand{width:100%; text-align:center;}
nav{}
nav ul{float:none; margin-top:50px;background:#F03;}
nav li{display:inline;}
nav a{color:#ccc; display:block; border-bottom:1px dotted #ccc; margin:0; padding:3px;}
nav a:hover{color:#ffffff;}

}
</style>
</head>
<body>
<div id="brand">Responsive Navigation</div>
<nav>
<ul>
<a href="#"><li>HOME</li></a>
<a href="#"><li>ABOUT US</li></a>
<a href="#"><li>BLOG</li></a>
<a href="#"><li>PORTFOLIO</li></a>
<a href="#"><li>CONTACT US</li></a>
<a href="#"><li>CONTACT US</li></a>
</ul>
</nav>

</body>
</html>

Friday 13 February 2015

How to Create Mobile Screen Using for HTML,HTML5,CSS,CSS3 Only

How to Create Mobile Screen using CSS and HTML ONLY ( do not use any images). Make it cross browser compatible.

Index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<body>
<div class="module">

<div class="container">
<div class="bubble">
Hello How r u ?
</div>

<div class="bubble bubble--alt">
I am very well u say
</div>

<div class="bubble">
I am also good?
</div>

<div class="bubble bubble--alt">
what r u doing?

</div>

<div class="bubble">
working some important work .
</div>
<div class="bubble bubble--alt">
Great :)

</div>
</div>
<div class="Home-Button">
<img src="logo.png"/>

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

Style.css

.container {
padding:10px 10px;
margin: 0 auto;
width: 220px;
}
/* .bubble */
.bubble {
background-image: linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -o-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -moz-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -ms-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.25, rgb(210,244,254)),color-stop(1, rgb(149,194,253)));
border: solid 1px rgba(0, 0, 0, 0.5);
border-radius: 20px;
box-shadow: inset 0 5px 5px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
clear: both;
float: left;

right: 46px;
margin-bottom: 20px;
padding: 8px 10px;
position: relative;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
width: auto;
max-width: 100%;
word-wrap: break-word;
}
.bubble:before, .bubble:after {
border-radius: 20px / 10px;
content: '';
display: block;
position: absolute;
}
.bubble:before {
border: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.5);
bottom: 0;
left: -7px;
z-index: -2;
}
.bubble:after {
border: 8px solid transparent;
border-bottom-color: #d2f4fe;
bottom: 1px;
left: -5px;
}
.bubble--alt {
background-image: linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -o-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -moz-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -ms-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.25, rgb(172,228,75)),color-stop(1, rgb(122,205,71)));
float: right;
left: 4px;
}
.bubble--alt:before {
border-bottom-color: rgba(0, 0, 0, 0.5);
border-radius: 20px / 10px;
left: auto;
right: -7px;
}
.bubble--alt:after {
border-bottom-color: #ace44b;
border-radius: 20px / 10px;
left: auto;
right: -5px;
}
.module{

border: 5px solid #151618;
border-top-width:60px;
border-bottom-width:60px;
padding: 10px 40px;
background: #dbe1ed;
width: 198px;
height:359px;
border-radius: 25px;

}
.Home-Button img{
width:60px;
height:50px;
margin-left: 62px;
margin-top: 67px;

}
.top-head img{
width:40px;
height:13px;
}

Tuesday 10 February 2015

HTML CSS MENU

Monday 9 February 2015

How to create Click action Multi-level CSS3 Dropdown Menu..

/* demo page styles */
body {
background:#eee;
margin:0;
padding:0;
}
.example {
background:#fff url(../images/tech.jpg);
width:770px;
height:570px;
border:1px #000 solid;
margin:20px auto;
padding:15px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

/* main menu styles */
#nav,#nav ul {
background-image:url(../images/tr75.png);
list-style:none;
margin:0;
padding:0;
}
#nav {
height:41px;
padding-left:5px;
padding-top:5px;
position:relative;
z-index:2;
}
#nav ul {
left:-9999px;
position:absolute;
top:37px;
width:auto;
}
#nav ul ul {
left:-9999px;
position:absolute;
top:0;
width:auto;
}
#nav li {
float:left;
margin-right:5px;
position:relative;
}
#nav li a {
background:#c1c1bf;
color:#000;
display:block;
float:left;
font-size:16px;
padding:8px 10px;
text-decoration:none;
}
#nav > li > a {
-moz-border-radius:6px;
-webkit-border-radius:6px;
-o-border-radius:6px;
border-radius:6px;
overflow:hidden;
}
#nav li a.fly {
background:#c1c1bf url(../images/arrow.gif) no-repeat right center;
padding-right:15px;
}
#nav ul li {
margin:0;
}
#nav ul li a {
width:120px;
}
#nav ul li a.fly {
padding-right:10px;
}
/*hover styles*/
#nav li:hover > a {
background-color:#858180;
color:#fff;
}
/*focus styles*/
#nav li a:focus {
outline-width:0;
}
/*popups*/
#nav li a:active + ul.dd,#nav li a:focus + ul.dd,#nav li ul.dd:hover {
left:0;
}
#nav ul.dd li a:active + ul,#nav ul.dd li a:focus + ul,#nav ul.dd li ul:hover {
left:140px;
}

Thursday 8 January 2015

How to create responsive menu in css

index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<label for="show-menu" class="show-menu">☰</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">About</a>
<ul class="hidden">
<li><a href="#">Who We Are</a></li>
<li><a href="#">What We Do</a></li>
</ul>
</li>
<li>
<a href="#">Portfolio </a>
<ul class="hidden">
<li><a href="#">Photography</a></li>
<li><a href="#">Web & User Interface Design</a></li>
<li><a href="#">Illustration</a></li>
</ul>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>

Style.css

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

ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
li {
display:inline-block;
float: left;
margin-right: 1px;
}

li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}

li:hover a {
background: #19c589;
}

li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}

li:hover ul a:hover {
background: #19c589;
color: #fff;
}

li ul {
display: none;
}

li ul li {
display: block;
float: none;
}

li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}

ul li a:hover + .hidden, .hidden:hover {
display: block;
}

.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: right;
padding: 10px 0;
display: none;
padding-right:12px;

}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}

/*Responsive Styles*/
@media screen and (max-width : 760px){

ul {
position: static;
display: none;
}

li {
margin-bottom: 1px;
}

ul li, li a {
width: 100%;
}

.show-menu {
display:block;
}
}

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.

how to rotate a image in css

Image rotate in css

Index.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);
}

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