Now a days everyone is talking about Material Design. Wherever you go, people are asking you know material design?

I just exited about Material Design and wanted to know more about it. After googling, I found that its an language developed by Google .

Its the future of the Web Design. Android Lollipop UI has been developed in Google’s Material Design

Why Material Design?

• Animation
• Shadows
• 3D Effects
• Motion Visualization
• Inbuilt Components
• Responsive
• CSS Transitions
• Color Palettes
• Patterns – Gesture, Touch Screen, Fingerprint & swipe to refresh etc
• More layout templates

Material Design Login & SignUp Form

In this tutorial, I’m going to explain you how to design a simple login and registration form using Material Design.

Material scripts comes with both the minified and unminified CSS and JavaScript files. This option requires little to no setup.

CSS

<!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">

Javascript

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>

Input Box Design

Text fields allow user input. The border should light up simply and clearly indicating which field the user is currently editing. You must have a .input-field div wrapping your input and label. This helps our jQuery animate the label. This is only used in our Input and Textarea form elements.

You can add an icon prefix to make the form input label even more clear. Just add an icon with the class prefixbefore the input and label. for more icons please click here

You can add custom validation messages by adding either data-error or data-success attributes to your input field labels.

<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
          <i class="mdi-communication-email prefix"></i>
          <input id="email" type="email" class="validate">
          <label for="email" data-error="wrong" data-success="right">Email</label>
</div>
</div>
</form>
</div>

Login form using Material Design

HTML Code for Login Form

<div id="login-page" class="row">
    <div class="col s12 z-depth-6 card-panel">
      <form class="login-form">
        <div class="row">
          <div class="input-field col s12 center">
            <img src="http://w3lessons.info/logo.png" alt="" class="responsive-img valign profile-image-login">
            <p class="center login-form-text">W3lessons - Material Design Login Form</p>
          </div>
        </div>
        <div class="row margin">
          <div class="input-field col s12">
            <i class="mdi-social-person-outline prefix"></i>
            <input class="validate" id="email" type="email">
            <label for="email" data-error="wrong" data-success="right" class="center-align">Email</label>
          </div>
        </div>
        <div class="row margin">
          <div class="input-field col s12">
            <i class="mdi-action-lock-outline prefix"></i>
            <input id="password" type="password">
            <label for="password">Password</label>
          </div>
        </div>
        <div class="row">          
          <div class="input-field col s12 m12 l12  login-text">
              <input type="checkbox" id="remember-me" />
              <label for="remember-me">Remember me</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <a href="login.html" class="btn waves-effect waves-light col s12">Login</a>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s6 m6 l6">
            <p class="margin medium-small"><a href="register.html">Register Now!</a></p>
          </div>
          <div class="input-field col s6 m6 l6">
              <p class="margin right-align medium-small"><a href="forgot-password.html">Forgot password?</a></p>
          </div>          
        </div>

      </form>
    </div>
  </div>

Background Colors

To apply a background color, just add the color name and light/darkness as a class to the element.

for more details please click here – http://materializecss.com/color.html

<body class="red">
<body class="blue">
<body class="yellow">

Login Form Demo  SignUp Form Demo Forgot Password Demo  

Download

I hope you like this article and Please like us in facebook or subscribe to my blog to get the latest updates

Source: W3Lessons