One place for hosting & domains

      Google Material Design Input Boxes in CSS3

      Introduction

      Google Material Design is all the rage right now. With Google announcing the new design philosophy and using Polymer to create rich animated applications, many developers are starting to incorporate these ideas into their own experiments.

      We created our own Google Material Design Checkboxes using CSS3 last week and here are some more examples of Google Material Design:

      Today we’ll be looking at how to recreate the Polymer input boxes using CSS. Here is an example:

      We will be doing all of this in CSS and just a tiny bit of JavaScript. Let’s start setting up our HTML so that we can style it and add our animations and transitions in CSS.

      The HTML

      The HTML for this project will be very simple. We just need a form with two groups of inputs.

      Here is the HTML:

      <form>
        <div class="group">
          <input type="text" required>
          <span class="highlight"></span>
          <span class="bar"></span>
          <label>Name</label>
        </div>
      
        <div class="group">
          <input type="text" required>
          <span class="highlight"></span>
          <span class="bar"></span>
          <label>Email</label>
        </div>
      </form>
      

      Here we have the four components we need.

      With our simple HTML ready to go, let’s move on to the CSS transitions and animations.

      We’ll break this down into three parts: the label/placeholder, the underline, and the highlight. Let’s style the foundation so we have a good starting point.

      
      .group {
        position: relative;
        margin-bottom: 45px;
      }
      input {
        font-size: 18px;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 300px;
        border: none;
        border-bottom: 1px solid #757575;
      }
      input:focus {
        outline: none;
      }
      

      We’re just placing things and adding some padding with the code above. We also set the group to position:relative; so that we can place the other elements relative to that. Now let’s start looking at animating our parts. The two techniques we’ll use are CSS transitions and CSS animations.

      Animating on Focus

      We will activate all of our transitions and animations when the input is focused on. In CSS, we call that using input:focus. Let’s see how each part is created and activated.

      Moving the Label/Placeholder (CSS Transition)

      We’ll absolutely position the label relative to the group. Here is the code for the label and when the input is focused:

      
      label {
        color: #999;
        font-size: 18px;
        font-weight: normal;
        position: absolute;
        pointer-events: none;
        left: 5px;
        top: 10px;
        transition: 0.2s ease all;
      }
      
      
      input:focus ~ label,
      input:valid ~ label {
        top: -20px;
        font-size: 14px;
        color: #5264AE;
      }
      

      Now when we focus on our input, the label will change color, move up, and the font will get smaller. We also create the stylings for the :valid pseudo-class so that we can apply that if our input box is filled in. This will let the label stay in the active state, otherwise, it will move back over the input. All done here. Let’s move on to the underline.

      Underline Bar Animation (CSS Transition)

      We will use the pseudo-classes :before and :after to style the left and right parts of the bar. They will start from the center and widen to the outsides. That will give our underline effect.

      
      .bar {
        position: relative;
        display: block;
        width: 300px;
      }
      
      .bar:before,
      .bar:after {
        content: '';
        height: 2px;
        width: 0;
        bottom: 1px;
        position: absolute;
        background: #5264AE;
        transition: 0.2s ease all;
      }
      .bar:before {
        left: 50%;
      }
      .bar:after {
        right: 50%;
      }
      
      
      input:focus ~ .bar:before,
      input:focus ~ .bar:after {
        width: 50%;
      }
      

      Highlight Animation (CSS Animation)

      This is the part of our application where we will need to use an animation. We will need to have the highlight show up, move to the left, and disappear. Since there are three parts to this, we need to make an animation instead of a transition.

      
      .highlight {
        position: absolute;
        height :60%;
        width: 100px;
        top: 25%;
        left: 0;
        pointer-events: none;
        opacity: 0.5;
      }
      
      
      input:focus ~ .highlight {
        animation: inputHighlighter 0.3s ease;
      }
      
      
      @keyframes inputHighlighter {
        from  { background: #5264AE; }
        to    { width: 0; background: transparent; }
      }
      

      Now we have our highlight working. With all of our CSS parts working, we now have an input box similar to the Google Material Design input boxes.

      We have one last thing to finalize with our implementation of these input boxes. Once typing into an input box and clicking out of it, the label moves back over the input. It now overlaps the content we just wrote. We already created a class to make the label position itself above the input box earlier with the input.used CSS class. All we have to do now is apply it using jQuery.

      $(document).ready(function() {
      
        $('input').blur(function() {
      
          
          if ($(this).val())
            $(this).addClass('used');
          else
            $(this).removeClass('used');
        });
      
      });
      

      Just like that, we’re all good to go!

      http://codepen.io/sevilayha/pen/IdGKH

      Update! No JS Necessary!

      Thanks to Felipe Mammoli in the comments for the tip on creating this without any JS at all. All we have to do is add a required attribute to our input boxes like so:

      <input type="text" required>
      

      Once we have added that rule, we can use the :valid psuedo-class to check if something is typed into that input box. Now we can apply the class we had originally created to move our label above the input.

      
      input:focus ~ label,
      input:valid ~ label {
        top: -20px;
        font-size: 14px;
        color: #5264AE;
      }
      

      There’s a cool way to implement Google Material input boxes in CSS. While it doesn’t have all the fancy parts of the official input boxes like animating based on the location of the click event, they’re looking pretty good! For more Material Design, take a look at the Polymer Project to create cool Material Design components. Also, here’s a cool Codepen of our demo with input validation by Don Page and another great project to create Material Design components in CSS/JS: Waves.

      If you’re looking for these inputs and want to use Angular and have it validated with Angular, Martin Hotell has updated this in his awesome Angular Validated Plunker.

      CSS3 Page Landing Animations

      Introduction

      Today we’ll be looking at ways to spice up when people land on our sites. I just experimented with this a little bit on a personal project, CODE Hearted. You can see the logo and content are animated on page load so that it gives the page a little more life.

      Not only can we use this technique to add a little pizazz, but we can also use it for UI/UX purposes to guide the user’s eyes across our page. Let’s say we only want a tagline to show up that tells a user what our site is about, then 3 seconds later, the content shows up. The combinations for this are unlimited and definitely play around with these animations and let your imagination go crazy. I went a little overboard I think on some animations (we probably wouldn’t want everything on a page to move), but it was more for demonstration purposes.

      The main way to build this technique is using CSS3’s animation feature and the animation-delay.

      This demo won’t work in all browsers since it is purely CSS3.

      Let’s start by setting up our site. We are going to use the super awesome Animate.css by Dan Eden for our animations. Also Twitter Bootstrap. We can write up our own but we’ll use this to make it quick and easy.

      Folder/File Structure

      index.html

      We’ll set up the HTML needed to set up our page. We’ll load bootstrap and animate.css from a CDN.

      To use animate.css, we add a class of animated and the type of animation we want to use. These are found here on the cool demo page. After this, all the animations will run at the same time. We add specific classes to each to vary the animation time and that’s what gives us our varied effect.

      <!doctype html>
      <html>
          <head>
              
              <title>CSS3 Page Loading Animations</title>
          
              <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
              <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/2.1.0/animate.min.css">
              <link rel="stylesheet" href="css/style.css">
          
          </head>
          <body>
          <div class="container">
          
              <div id="header" class="row text-center">
                  <div id="logo">
                      <span id="danger">
                          <span class="dd animated bounceInDown">d</span>
                          <span class="da animated bounceInDown">a</span>
                          <span class="dn animated bounceInDown">n</span>
                          <span class="dg animated bounceInDown">g</span>
                          <span class="de animated bounceInDown">e</span>
                          <span class="dr animated bounceInDown">r</span>
                      </span>
                      <span id="zone">
                          <span class="zz animated bounceInDown">z</span>
                          <span class="zo animated bounceInDown">o</span>
                          <span class="zn animated bounceInDown">n</span>
                          <span class="ze animated bounceInDown">e</span>
                      </span>
                  </div>
          
                  <nav id="main-nav">
                      <ul class="list-unstyled list-inline">
                          <li><a id="demo-1" class="animated btn btn-danger" href="index.html">Demo 1</a></li>
                          <li><a id="demo-2" class="animated btn btn-danger" href="two.html">Demo 2</a></li>
                          <li><a id="demo-3" class="animated btn btn-danger" href="three.html">Demo 3</a></li>
                      </ul>
                  </nav>
              </div>
          
              <div id="main" class="row">
                  <div id="sidebar" class="col-sm-4">
                      <nav id="sidebar-nav">
                          <ul>
                              <li><a id="side-home" class="animated bounceInLeft" href="#">Home</a>
                              <li><a id="side-about" class="animated bounceInLeft" href="#">About</a>
                              <li><a id="side-work" class="animated bounceInLeft" href="#">Work</a>
                              <li><a id="side-contact" class="animated bounceInLeft" href="#">Contact</a>
                          </ul>
                      </nav>
                  </div>
          
                  <div id="content" class="animated bounceInUp col-sm-8 text-center">
                      <div class="row">
                          <div class="col-sm-4">
                              <img class="img-responsive animated bounceInUp" src="http://lorempixel.com/500/500/people">
                          </div>
                          <div class="col-sm-4">
                              <img class="img-responsive animated bounceInUp" src="http://lorempixel.com/500/500/nature">
                          </div>
                          <div class="col-sm-4">
                              <img class="img-responsive animated bounceInUp" src="http://lorempixel.com/500/500">
                          </div>
                      </div>
                  </div>
              </div>
          
          </div>
          </body>
      </html>
      

      Now we have a solid foundation for our site. Using animate, all of those things that are animated will now move when you view your site. Let’s add some more styling and then we’ll get to the animations.

          
          @import url(http://fonts.googleapis.com/css?family=Offside);
          
          html                            { overflow-y:scroll; }
          body                            { margin-top:40px; }
          
          
          #header                         { margin-bottom:50px; }
          
              
              #logo                       { color:#FFF; font-family:'Offside'; font-size:80px; margin-bottom:50px; margin-top:50px; }
              #logo span                  { display:inline-block; }
          
          
          #main-nav                       { margin-bottom:30px; }
          
          
          #sidebar                        {  }
          
          #sidebar-nav                    {  }
          #sidebar-nav ul                 { list-style:none; padding-left:0; }
          #sidebar-nav li                 {  }
          #sidebar-nav a                  { background:#428bca; color:#FFF; display:block; margin-bottom:10px; padding:20px; text-transform:uppercase;
              border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;
          }
              #sidebar-nav a:hover        { background:#3276b1; text-decoration:none; }
          
          
          #content                        { background:#FFF; min-height:400px; padding:20px;
              border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;
          }
          #content img                    { border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; }
          
          
          
              
              .dd                         { animation-delay:0.2s; -moz-animation-delay:0.2s; -webkit-animation-delay:0.2s; }
              .da                         { animation-delay:0.8s; -moz-animation-delay:0.8s; -webkit-animation-delay:0.8s; }
              .dn                         { animation-delay:0.6s; -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; }
              .dg                         { animation-delay:1s; -moz-animation-delay:1s; -webkit-animation-delay:1s; }
              .de                         { animation-delay:0.4s; -moz-animation-delay:0.4s; -webkit-animation-delay:0.4s; }
              .dr                         { animation-delay:1.2s; -moz-animation-delay:1.2s; -webkit-animation-delay:1.2s; }
          
              .zz                         { animation-delay:1.4s; -moz-animation-delay:1.4s; -webkit-animation-delay:1.4s; }
              .zo                         { animation-delay:0.4s; -moz-animation-delay:0.4s; -webkit-animation-delay:0.4s; }
              .zn                         { animation-delay:0.6s; -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; }
              .ze                         { animation-delay:0.5s; -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; }
          
              
              #side-home                  { animation-delay:0.2s; -moz-animation-delay:0.2s; -webkit-animation-delay:0.2s; }
              #side-about                 { animation-delay:0.6s; -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; }
              #side-work                  { animation-delay:0.8s; -moz-animation-delay:0.8s; -webkit-animation-delay:0.8s; }
              #side-contact               { animation-delay:0.3s; -moz-animation-delay:0.3s; -webkit-animation-delay:0.3s; }
          
              
              #content                    { animation-delay:1.5s; -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
                  #content img            { animation-delay:1.7s; -moz-animation-delay:1.7s; -webkit-animation-delay:1.7s; }
      

      And that’s it! By adding the variable animation-delays times you can create some pretty sweet animations.

      CSS3: A Quick Intro


      In Web Design and Development, like most fields, you have to evolve to keep up with the times. This is especially true with new features that get added to one of a designers most often used tools, like CSS. CSS3, the latest specification for CSS, has several new features designers can start taking advantage of right now.

      The biggest and most important change in CSS3 is definitely the modularization of the specification approval process. What this means is that each section of CSS3 (borders, box shadow, images, etc) has its own module. That means that they can be approved individually, and developed separately.

      This means we get changes faster, and when they come they are more relevant to what the community and browser developers have been asking for. It also means it’s easier for browser to be up to date on the new standard, because it’s received piecemeal, rather than all at once. This means less worrying about how your content looks across different browsers and platforms.

      We all know a few in our field who are more like dinosaurs than designers. Don’t be a dinosaur, stuck using outdated techniques and boring design practices. Elevate your designs and take advantage of the latest technologies with techniques like:

      Transitions

      Long have designers struggled to use Adobe Flash and JavaScript to accomplish image transitions. No more. Gone are the days of ugly, often tacky Flash transitions and difficult to implement JS animations. Now, with CSS3 transitions, designers can use a clean, lightweight browser-side solution to implement their transitions, instead of a heavy server-side method. There are two key ways to do this. First, and most simply, you can use the transition declaration and trigger mouse-based effects like hover or trigger the animation with a simple JS change. Alternatively you can use the @keyframe rule to specify specific changes to the animation that don’t require user input. You can read more about CSS3 transitions here.

      Gradients

      Tired of mucking about in Photoshop, struggling to get the gradient for those buttons just right? So is everyone else. Thankfully now, you don’t have to! CSS gradients allow designers to create beautiful gradients that look excellent on any display. Best of all, it’s all in a nice, light-weight CSS file that’s supported by all browsers, and doesn’t require you to use heavy, resource taxing images (are you noticing a theme here?). Gradients have actually been around for a while now but only now are they available for use in every browser. Right now, radial and linear repeating and non-repeating gradients are available and more are likely to be on the way.

      3D Transforms

      Let’s be honest for a second here. We designers can be a very…showy group of people. Some might say we enjoy lording our abilities over designers less in the know than we are. Now, if this sounds like you, or if you just want to build a beautiful, eye-catching portfolio, CSS3 3D transforms can really help your work stand out. Never ever underestimate the value of a little flash (pun shamelessly intended) in your web page design, especially when you want to stand out from a veritable sea of other designers.

      Border Radius

      Rounded corners look great. Rounded corners look natural. Rounded corners have historically been a pain in the ass to code, and using images can quickly increase file sizes. Now your buttons can have natural, rounded edges without excessive code! Use CSS3’s new border-radius property to create simple rounded edges that don’t require excess fiddling with height and width properties, and don’t break when you tweak content or location. If you want an example, try these code snippets (courtesy of webreference.com ) on a web page of your own.

      CSS:

      
      .box {
        border: 2px solid orange;
        border-radius : 25px;
        width: 100px;
        padding: 10px;
        text-align:center;
      }
      
      

      HTML:

        `<div class="box">Submit</div>`
      
      

      Border Image

      Continuing on the subject of borders, how often have you wanted to have a nice, pretty border around a div or image, only to realize that you have to spend time in Photoshop and even more time making the border responsive because all of your default choices are just plain unattractive? Now your borders are only limited by your imagination and Photoshop/Illustrator skill. You can now create easy to work with image sprites and apply them with the border-image property. That will let you quickly and easily create those pretty borders you want, all without spending hours fiddling and adjusting things.

      Web Fonts

      It seems like only yesterday designers were forced to consult tables and lists of “web-safe” fonts. Well, those days are behind us now, and all of us should be grateful. The @font-face rule now allows you to use services like Google Web Fonts and typekit to include any font you could possibly imagine just be incorporating a new stylesheet. This means your typography choices are no longer limited to ones you know your end-user is likely to have access to. This also means no more specifying 12 different font-family’s just to be sure your text isn’t an ugly default font.

      CSS Columns

      Want to layout your articles in a responsive, column based layout? Not long ago that meant you had several options. First, you could use a table and be loathed by everyone in the design world. Second, you could use JS to flow your content into containing divs and be loathed by yourself for the torturous amount of time such a process would take. Now, however, no tables or trade-offs are needed! You can simply use the columns rule and you’re done. The only issue you may run into is with getting things to look the same across all browsers (I’m looking at you IE) but with Internet Explorer going the way of the dodo, it looks like that issue should be sorted out as well.

      Selectors

      Finally, and perhaps most importantly, we have new CSS selectors. It would take more space than I want to use to go into detail about them all, so we’ll just hit the highlights and you can check out the complete list here. We can still use the old CSS2 selectors as well, but now we have some new rules. What it comes down to is we now have the ability to select DOM elements based on what their attribute values are, instead of specifying ID’s and Classes for each element. Now you can style them based simply on their attribute field.



      Source link