CSS Tutorial Series #1

So this will be the first tutorial series on our site. This is a CSS series in this series we will try to cover all the topics about CSS such as the pseudo-class and etc..

Lets start 

First of all whats CSS?

CSS means Cascadind Sthyle Sheets
Its easy to learn??

Of course yes is one of the easiest languages which most web developers use.

Why to use CSS?

You should use it in order to define the formatting applied on your website such as colors, backround images and etc..

Defining Styles With CSS

The basic purpose of CSS is to allow designers to define a style ( a list of formatting details) and then to apply it to html page(s).

<html>
<head>
<title>Sample Page</title>
<body>
<h1><font face='sans-serif' color='#336600'>Title 1</font>
</h1>
<p>...</p>

<h2><font face="sans-serif" color="#3366CC>Title 2</font>
</h2>
<p></p>


<h2><font face="sans-serif" color="#3366CC>Title 3</font>
</h2>

<p></p>

</body>
</head> 

This was a simple example so we used three separate times. But i wouldn't be better to define the fonts at once, then apply to headinds?

With the power of CSS we can do this



<html>
<head>
<title>Sample Page</title>
<style type="text/css">
h1, h2 {
  font-family: sans-serif;
  color: #3366cc;
}
</style>
<body>
<h1><Title 1</h1>
<p>...</p>

<h2>Title 2</h2>
<p>...</p>

<h2>Title 3</h2>

<p>...</p>

</body>
</head> 

Now this is just a small example what we will learn from this series i know that  you think that this tutorial is a little bit uncompleted but next time i will try to cover the tutorial as much as i can.

Thanks a lot !

Php tutorial, Login script with Jquery

View Demo Download

On today's tutorial were gonna build an Php and Jquery login script.

To make it more easy i separated the article in 4 parts:

1. Html Form
2. Adding Php
3. Jquery checks
4. Final code

First of all we are goind to make the html form which it is well designed in css3
<html>
<head>
<title>Php And Jquery Login tutorial</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="code.js" type="text/javascript"></script>
</head>
<body>
<div id="alert">Please type something.</div>
<div id="box">

<form action="submit.php" method="post" id="ContactForm">
<input type="text" name="user" value="Username.." id="user"><br />
<input type="password" name="pass" value="passwd" id="pass"><br />
<input type="submit" value="Login" class="button">
<div class="form_result"> </div>
</form>

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

The php backend, just a simple login script for demonstration

<?php
if(isset($_POST['user']) && !empty($_POST['pass'])){
$uid = "mikel";
$pid = "thecodertips";
if($_POST['user'] != $uid){
die("Wrong username..");
}
if($_POST['pass'] != $pid){
die("Wrong password..");
}
echo 'Welcome.';
}
?>

Then the css part
input{
outline: none; /* removes google chrome outline */
}

#box{ /* the login box design */
width: 190px;
background-image: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
background-image:    -moz-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
background-image:     -ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
background-image:      -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
background-image:         linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
border: solid 1px #5E5E5E;
border-color: #5E5E5E #888888 #696969 #888888;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
padding: 0px 20px 0px 20px;
display: inline-block;
font-size: 15px;
line-height: 32px;
color: rgba(51,51,51,1);
}

#user, #pass{
padding: 8px;
color:gray;
margin: 10px;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
border: solid 1px #5E5E5E;
border-color: #5E5E5E #888888 #696969 #888888;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}

#user:hover, #pass:hover{
border:1px solid #00BFFF;
color: black;
}

.button {
background-image:-webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
background-image:-moz-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
background-image:-ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
background-image:-o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
background-image:linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
border: solid 1px #5E5E5E;
border-color: #5E5E5E #888888 #696969 #888888;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
padding: 0px 20px 0px 20px;
display: inline-block;
font-size: 15px;
line-height: 32px;
color: rgba(51,51,51,1);
margin-left: 25%;
}
.button:active {
background-image: -webkit-linear-gradient(top, rgba(167,199,225,1) 0%,rgba(124,176,222,1) 100%);
background-image:    -moz-linear-gradient(top, rgba(167,199,225,1) 0%,rgba(124,176,222,1) 100%);
background-image:     -ms-linear-gradient(top, rgba(167,199,225,1) 0%,rgba(124,176,222,1) 100%);
background-image:      -o-linear-gradient(top, rgba(167,199,225,1) 0%,rgba(124,176,222,1) 100%);
background-image:         linear-gradient(top, rgba(167,199,225,1) 0%,rgba(124,176,222,1) 100%);
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(182,226,244,1)inset, 0px -16px 0px 0px rgba(99,165,219,1)inset;
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(182,226,244,1)inset, 0px -16px 0px 0px rgba(99,165,219,1)inset;
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(182,226,244,1)inset, 0px -16px 0px 0px rgba(99,165,219,1)inset;
border: solid 1px #323D9F;
border-color: #323D9F #3365B4 #3365B4 #3365B4;
}

#alert{ /* alert box */
margin-left: 80%;
width: 200px;
background: #333;
box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
border: 1px solid;
color: #fff;
padding: 15px;
position: fixed;
_position: absolute;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
animation: animate-bg 5s linear infinite;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
text-align: center;
font-weight: bold;
}

Here comes the jquery part, i added some validations and a post method handled by php
$(document).ready(function(){
// hide alert boxes

$('#alert').hide();

// empty() function used when there is nothing entered


   // lets declare the variables for easier usage
 
   var user = $('#user');
   var pass = $('#pass');
   var button = $('.button');
 
   // checking if there is nothing submitted
 
    $(button).click(function(){

if(user.val().length < 3){
$('#alert').fadeIn();
return false;
}
if(pass.val().length < 3){
$('#alert').fadeIn();
return false;
}

$.ajax({type:'POST', url: 'submit.php', data:$('#ContactForm').serialize(), success: function(response) {
    $('#ContactForm').find('.form_result').html(response);
}});

return false;

   });
 
 });

NOTE! The php script contains security holes, it is used just as an example for the tutorial.

Designing input fields using Jquery

To make a website look more professional it is imtortant to use the latest programing languages like Html5 and Css3 and of course Jquery.

First of all we will start with css, making it beautiful then we will use jquery to handle user clicks.

Download Create 3 files, index.html, style.css and script.js
Open index.html and write
<html>
<head>
<title>Jquery input fields | thecodertips.com</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="script.js"></script>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<center><a href="http://thecodertips.com" id="tut" title="Read the tutorial">&#187;&#187; Tutorial &#171;&#171;</a><br /><br />
<input type="text" id="box" value="Type something..">
</center>
</body>
</html>
Now open style.css and write
#box{
outline: none; /* remove default borders */
padding: 5px; /* zoom it by 5px */
border: 1px solid gray; /* set an black border */
color: gray; /* text in the box is set to gray */
/* set border radius */
-webkit-border-radius: 3px; /* to work with google chrome and safari */
-moz-border-radius: 3px; /* to work with firefox */
border-radius: 3px; /* other browsers like ie */
}

/* when the user is typing in the box */
#box:focus{
border: 1px solid #0066FF;
color: #333;
}

/* to style the tutorial link */
#tut{
text-decoration: none;
color: #0066FF;
}
Now open script.js and write
$(document).ready(function(){

// set a variable to the box
var box = $("#box");

// once box get's clicked
box.click(function(){
box.val(""); // set it to empty
});

});

Beautiful Jquery mail form using Php and Css

Huh, more than 1 hour of work and i finished it now.
An amaizing Jquery Form to send an email.

Once someone clicks on any of the boxes they get empty.
Input data first get filtered for empty or same text of the input default box.

Enough talking!

Note! Downloaded version is much cooler.

View Demo Download


This is index.html

<html>
<head>
<title>Less4us ~ Mail form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="code.js"></script>
</head>
<body>
<!-- http://less4us.blogspot.com -->
<span id="sucess">Success! Mail sent succsesfuly</span>
<span id="error">Error! Mail not sent, please check details</span>
<center><h2>Jquery email form</h2></center>
<div id="box">
<span>Name:</span><br>
<input type="text" value="Your name.." name="name" id="name"><br>
<span>Email:</span><br>
<input type="text" value="email@something" name="email" id="email"><br>
<span>Subject:</span><br>
<input type="text" value="Mail subject.." name="subject" id="subject"><br>
<span>Body:</span><br>
<textarea name="body" id="body">Reason of contacting..</textarea><br>
<input type="submit" id="submit" value="Contact">
</div>
</body>
</html>


I included jquery on the file downloads, if you want this script for your website i suggest replacing:


<script type="text/javascript" src="jquery.js"></script>

With

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


Now the style.css


#box{
margin-left: 10px;
}
#box span{
color: #999;
font-size: 13px;
}
#box input[type="text"], #box textarea{
outline: none;
color: gray;
border: 1px solid #6495ED;
}
#box input[type="text"]:focus, #box textarea:focus{
color: gray;
border: 1px solid gray;
}
#box input[type="text"]:hover, #box textarea:hover{
border: 1px solid green;
color: #009999;
}
#box input[type="text"]{
padding: 5px;
-webkit-border-radius: 5px;
}
#box textarea{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 350px;
height: 100px;
}
#box input[type="submit"]{
color: gray;
padding: 5px;
border: 1px solid gray;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-decoration: none;
}
#box input[type="submit"]:hover{
color: white;
background: black;
border: 1px solid black;
}
#sucess{
margin-left:25%;
margin-right:25%;
background: #7FFF00;
display: block;
padding: 10px;
text-align: center;
font-size: 15px;
color: green;
font-weight: bold;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#error{
margin-left:25%;
margin-right:25%;
background: #FA8072;
display: block;
padding: 10px;
text-align: center;
font-size: 15px;
color: red;
font-weight: bold;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

And submit.php file, i made it simple just to show the idea of the tutorial


<?php

// send the email

$data = " Name --> ".$_GET['name']. "
Body --> ".$_GET['body']."
-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-
";

mail( $_GET['email'],  $_GET['subject'] ,  $data);
?>



Thats it, and dont forget, sharing is caring :)

Amaizing Css Buttons

Hey wats up
Today i decided to make some css buttons.

Ill update them with a new amaizing pack tomorrow, but for today thats it.

View demo: Css Buttons
Source:

<html>
	<head> <title>Less4us | Css Buttons</title>
	<style type="text/css">
	#first{
	background: #ccc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #6495ED;
	padding: 5px;
	text-decoration: none;
	color: #6495ED;
	}
	#first:hover{
	background: #eee;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid green;
	padding: 5px;
	text-decoration: none;
	}
	#second{
	background: black;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #333;
	padding: 5px;
	text-decoration: none;
	color: #6495ED;
	}
	#second:hover{
	background: #333;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid gray;
	padding: 5px;
	text-decoration: none;
	color: #ccc;
	}
	#third{
	background: #333;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid gray;
	padding: 5px;
	text-decoration: none;
	color: #ccc;
	}
	#third:hover{
	background: black;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #333;
	padding: 5px;
	text-decoration: none;
	color: #6495ED;
	}
	#four{
	color: gray;
	padding: 5px;
	border: 1px solid gray;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	text-decoration: none;
	}
	#four:hover{
	color: white;
	background: black;
	border: 1px solid black;
	}
	#five{
	background: #7FFF00;
	padding: 5px;
	border: 1px solid gray;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	text-decoration: none;
	color: gray;
	}
	#five:hover{
	border: 1px solid #A52A2A;
	background: gray;
	color: #A52A2A;
	}
	#six{
	border: 1px solid #A52A2A;
	background: gray;
	color: #A52A2A;
	padding: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	text-decoration: none;
	}
	#six:hover{
	color: black;
	background: #A52A2A;
	border: 1px solid black;
	}
	</style>
	</head>
	<body>
	<h1>Css3 Buttons</h1>
	<a href="#" id="first">&#171; Previous</a>
	<a href="#" id="first">Home</a>
	<a href="#" id="first">Older &#187;</a><br><br>
	<a href="#" id="second">&#171; Previous</a>
	<a href="#" id="second">Home</a>
	<a href="#" id="second">Older &#187;</a><br><br>
	<a href="#" id="third">&#171; Previous</a>
	<a href="#" id="third">Home</a>
	<a href="#" id="third">Older &#187;</a><br><br>
	<a href="#" id="four">&#171; Previous</a>
	<a href="#" id="four">Home</a>
	<a href="#" id="four">Older &#187;</a><br><br>
	<a href="#" id="five">&#171; Previous</a>
	<a href="#" id="five">Home</a>
	<a href="#" id="five">Older &#187;</a><br><br>
	<a href="#" id="six">&#171; Previous</a>
	<a href="#" id="six">Home</a>
	<a href="#" id="six">Older &#187;</a><br><br>
	</body>
	</html>