Preloader using css3 without image

Beautifully designed preloader using pure css3 without image, In this tutorial we will code the Pure css preloader for your web contents, made by nitin rana. To create it we will use CSS3 and HTML5.

  Topic: CSS3, HTML 
  Difficulty: Intermediate  
  Estimated completion time: 10 min.

 

Step 1 – HTML Markup

Let’s start creating the HTML markup. Make the div and convert it in a circle using border-radius style property, according to your required size to make preloader.See the given code below...

<div id="up"></div>
<div id="down"></div>

 

Step 2 – CSS Styles

#up
{
width:220px;
height:220px;
border-radius:150px;
background:#fff;
position:absolute;
top:190px;
left:190px;

}

#down
{

width:240px;
height:240px;
border-radius:150px;
background:-moz-linear-gradient(top, #1a82f7,#408080,#F00);
background:-webkit-linear-gradient(top, #1a82f7,#408080,#F00);
background:-o-linear-gradient(top, #1a82f7,#408080,#F00);
position:absolute;
top:180px;
left:180px;
z-index:-1;


transition:all ease-in-out 0.1s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
-moz-animation-name:disc;
-moz-animation-duration:1s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-name:disc;
-webkit-animation-duration:3s;
-o-animation-iteration-count:infinite;
-o-animation-timing-function:linear;
-o-animation-name:disc;
-o-animation-duration:3s; }

@-moz-keyframes disc 
{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
@-webkit-keyframes disc
{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
@-o-keyframes disc
{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}

 

for source file click the below link to download....
download source file

Login form design in jquery with cool animation, simple jquery login form

Login form design in jquery with cool animation

Login form Design in JQquery with cool animation, In this tutorial we will code the Login Form that you can find animate from top, made by nitin rana. To create it we will use CSS3 and jQuery.

  Topic: CSS3, jquery 
  Difficulty: Intermediate / Advanced 
  Estimated completion time: 30 min.

 

Step 1 – HTML Markup

Let’s start creating the HTML markup. Create a form with inputs (for Email, password and submit) and wrap the checkbox input and label in a tag, we will use the tag to style the checkbox. To finish the form and the title with a div tag and give it the id “login”.

<div id="login_nav">
<a href="#">Login</a></div>
</div>
<div id="login">
<form>
Email: < input  name="email" placeholder="enter your email"  type="text" />
Password:<input  name="password" placeholder="enter your password" type="password" />

<input name="button" type="button" value="Login" />
     
<p>don't have an account, click to <a href="#" >Signup</a></p>
</form>
</div>
<div id="login_cover"></div> // for background to transparent the homepage

 

Step 2 – CSS Styles

body, html{margin:0;}
 
#login_nav{
    width:100px;
    height:40px;
    background:#ff3b4e;
    position:fixed;
    right:300px;
    top:-5px;
    z-index:99999;
    text-decoration:none;
    color:#eae7e4;
    font-family:Domine;
    font-size:15px;/* border-radius:5px;*/}
 
#login_nav a {
    text-decoration:none;
    color:#eae7e4;
    font-family:Domine;
    font-size:15px;}
 
#login{
    width:300px;
    height:160px;
    background:#ff3b4e;
    top:-200px;/*top:35%;*/
    left:40%; position:absolute;
    z-index:999999;
    display:block;
    border:2px solid #FFF;
    border-radius:4px; }
 
#login_cover{
    width:100%;
    height:100%;
    opacity:0.7;
    position:fixed;
    z-index:999998;
    background:#000;
    display:none;}

Step 3 – jquery code

 required jquery files

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.google.com/p/phpwcms/source/browse/trunk/template/lib/jquery/plugin/jquery.easing.min.js"></script>

function

$(document).ready(function(){
      $('#login_nav a').click(function(){
      $('#login_cover').fadeIn(500);
      $('#login').animate({top:'35%'},{duration:1500,easing:'easeOutElastic'
      });
 });

       $('#login_cover').click(function(){
       $('#login_cover').fadeOut(500);
       $('#login').animate({top:'-200px'},200);
       });
});

for source file click the below link to download....
download source file