In this tutorial you’ll learn how to format, real time, user input in a form field.
Read the tutorial on Tuts+ Form Design: How to Automatically Format User Input.
A Pen by Kevin Patrick Westropp on CodePen.
| <h1>Popup/Modal Windows without JavaScript</h1> | |
| <div id="wrapper"> | |
| <p><a class="button" href="#popup1">Click Me</a></p> | |
| <p><a class="button" href="#popup2">Click Me Too</a></p> | |
| </div> | |
| <div id="popup1" class="overlay"> | |
| <div class="popup"> | |
| <h2>Info box</h2> | |
| <a class="close" href="#">×</a> |
In this tutorial you’ll learn how to format, real time, user input in a form field.
Read the tutorial on Tuts+ Form Design: How to Automatically Format User Input.
A Pen by Kevin Patrick Westropp on CodePen.
Use sibling selector (+) to face click event in CSS
A Pen by Kevin Patrick Westropp on CodePen.
| <div class="wrapper"> | |
| <div class="material-textfield blue"> | |
| <input type="text" required/> | |
| <label data-content="username">username</label> | |
| </div> | |
| <div class="material-textfield red"> | |
| <input type="password" required/> | |
| <label data-content="password">password</label> | |
| </div> |
| <link rel="stylesheet" href="https://i.icomoon.io/public/62ac9c9114/Webfont/style.css"> | |
| <div id="wrapper"> | |
| <div class="card"> | |
| <img src="http://media.expedia.com/mobiata/mobile/apps/ExpediaBooking/TabletDestinations/images/SFO.jpg" class="clip-polygon"> | |
| <div class="content"> | |
| <div class="date"><span class="numeric">26</span><span class="month">Jan</span></div> | |
| <div class="info"><span class="trip-name">San Francisco, CA</span><span class="trip-contains"><i class="icon-flightsalt"></i> <i class="icon-hotelsalt"></i> <i class="icon-trainalt"></i> <i class="icon-trainalt"></i> <i class="icon-flightsalt"></i></span></div></div></div> | |
| <div class="card"> | |
| <img src="http://media.expedia.com/mobiata/mobile/apps/ExpediaBooking/TabletDestinations/images/JFK.jpg" class="clip-polygon"> |
By George Martsoukos
A Pen by Kevin Patrick Westropp on CodePen.
Forked from Gabi's Pen Flexbox playground.
Forked from Gabi's Pen Flexbox playground.
A Pen by Kevin Patrick Westropp on CodePen.
| <div id="symbol"> | |
| </div> |
In this tutorial you’ll learn how to format, real time, user input in a form field.
Read the tutorial on Tuts+ Form Design: How to Automatically Format User Input.
A Pen by Kevin Patrick Westropp on CodePen.
| <header> | |
| <h1>Pure <strong>CSS</strong> Tree</h1> | |
| <p>...a folders tree view, without JS :P</p> | |
| </header> | |
| <ul id="compositions-list" class="pure-tree main-tree"> | |
| <li> | |
| <input type="checkbox" id="trigger-views" checked="checked"> | |
| <label for="trigger-views">views</label> | |
| <ul class="pure-tree"> | |
| <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li> |