Tampilkan postingan dengan label CSS. Tampilkan semua postingan
Tampilkan postingan dengan label CSS. Tampilkan semua postingan

Jumat, 17 Juli 2015

HTML FORM tutorial with CSS based Example

FORMS are used to pass data to a server and contain input elements like
text, check box, radio, button, submit, reset, password.HTML FORM tutorial with CSS based Example
A form is incomplete with out input box . Data sent to server through forms using input elements  and executed on the server.





Lets have a example of a form

<form action="name.php" method="post">
<input type="text" name="name" />
<input type="submit" name="submit" value="Go"/>
</form>
Output
Explanation:
action- pointed to page where programming codes will be there.
type- we have to define type of input box whether it is text, password,submit or so on..
method- we have to define which method we are using GET or POST , remember POST is secure compare to GET.

Lets have Complete example -
In this example used PHP as Programming language, CSS for making the form look good and html5.

Complete Script -

 <!DOCTYPE html>
<html lang="en">
<head>
<title>Form Tutorial</title>
<meta charset="utf-8" />
<style type="text/css">
.input{
background:#fff;
border: 1px solid #999;
box-shadow:inset 0 0 2px #000000; 
color: #222; 
}
.input:hover{
background:#f6f6f6;
border: 1px solid #999;
color: #222;
}
</style>
</head><body>
<?php
if(isset($_POST['submit')){
$name=$_POST['name'];
echo "Hello ". $name. " its Working naa";
}
?>
<form action="" method="post">
<input type="text" name="name"  class="input"/>
<input type="submit" name="submit" value="Go" class="input"/>
</form>
</body>
</html>

If you have any question then please comment .

Minggu, 12 Juli 2015

Simple Link Hover Effect using CSS Tutorial

Are you bored with custom link colors and want to give a  new look to your links with new colors and effect then you come to right place, in this tutorial I am going to share how to make a link hover effect.
Simple Link Hover Effect using CSS





Structure :
you have to place this simple Code in you HTML <head> tag. just like

<head>
<style type="text/css">
a:link{color: #370;}
 a:visited {color:#369;}
a:hover   {color:#f90;}
a:active  {color:#444;} </style>
</head>


A complete Example :

<!DOCTYPE html>
<html lang="en">
<head>
<title>Link Hover Effect by HTML5Planet</title>
<meta charset="utf-8" />
<style type="text/css">
a:link{color: #370;font-family:arial;text-decoration:none}
a:visited {color:#369;}
a:hover   {color:#f90;font-family:Times New Roman;font-weight:bold;text-decoration:underline}
a:active  {color:#444;} </style></head>
<body>
<a href="http://html5planet.blogspot.in/" title="">HTML5Planet</a>
|<a href="http://www.openplus.in/" title="">OpenPlanet</a>
</body>
</html>

Jumat, 10 Juli 2015

Creating Stunning Pure CSS Navigation Menu with Simple Coding

I am not going to teach you each step as you see the code , you will be able to understand it with out any problem. If you have any problem then please comment I will help you.

Screenshot:
 Pure CSS Navigation Menu with Simple Coding

Coding:

 <!DOCTYPE html>
<html lang="en">
<head>
<title>Sanjay' HTML5 World</title>
<meta charset="utf-8" />
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
background:#FFD700;
border: 1px solid #f80;
padding:5px 5px 5px 15px;
}
li
{
display:inline;
}
li a:link{
color:#222;
text-decoration:none;
}
li a:active{
color:#222;
text-decoration:none;
}
li a:visited{
color:#222;
text-decoration:none;
}
li a:hover{
color:#f30;
text-decoration:underline;
}
</style>
</head>
<body>
<ul>
<li><a href="home.htm">Home</a></li>
<li><a href="service.htm">Services</a></li>
<li><a href="contact.htm">Contact</a></li>
<li><a href="about.htm">About</a></li>
</ul>
</body>
</html>


Selasa, 03 Februari 2015

Web Developer extension and the choice of Best Web Browser

If you are a web developer then the question is quite common which is

the best web browser for web development . In this tech arena every

browser want to take the number one tag. In this blog I am going to

share my favorite browser and why it became number one .

Mozilla Firefox is my favorite, I accept chrome has taken the market

share for being light and fast, internet explorer 10 is also doing well

but still I die for firefox. Right now I use Firefox 18 , in speed its

par with chrome and IE 10 in some cases faster, but right now we use

modern computer that has atleast 1GB of RAM and dual core CPU so you

can't see the speed difference only benchmarks can tell the difference.

Firefox uses more memory around 130MB but its not a problem.

Firefox offers net and clean interface, always welcome new technologies,

devoted towards open source and also stable and secure. Its extension

arena has everything you need and it makes you special , chrome also

supports extension and has decent store where you can download and

install extension with no restart feature but firefox interface is

awesome as firefox is feature rich compared to chrome. IE is by greedy

microsoft the company is not listening to its old customer as the

support of IE10 is limited to Windows 8 still now does not supports

multiplatform so it was ommitted from my list.



Firefox and the extension we die for :

If we are a web developer or SEO Expert then Firefox makes you job easy,

I am going to share a partial list of my favorite extension.



1. ADBLOCK PLUS

Web Designer has to surf a lot to get new ideas or inspiration but the

the annoying ads and pop ups make the job hard, adblock plus not only

block all these but gives you interface to control it.



2. Colorzilla

If you are a web designer or UI designer then you can't stop yourselve

playing with colors. This is not a color picker tool but has eyedropper

and other cool option.



3. Firebug

HTML , HTML5 , CSS , javascript wonder which kind of scripting is using

this firebug is the only solution, it give not only to view source of

website but with advance option. This is Web Designer no. one app.



4. Webrankstat

This is a SEO tool provides alexa rank, google rank,page index

,backlinks and other information while surfing.



list is going to updated soon.