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.
Kevin Patrick Westropp highlanderkev
🎯
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
highlanderkev
/ formatting-currency-value-result.markdown
Created
February 25, 2026 16:26
Formatting Currency Value: Result
highlanderkev
/ flip-on-click-without-js.markdown
Created
February 25, 2026 16:25
Flip on click without JS
Use sibling selector (+) to face click event in CSS
A Pen by Kevin Patrick Westropp on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="symbol"> | |
| </div> |
highlanderkev
/ formatting-license-number-result.markdown
Created
February 25, 2026 15:56
Formatting License Number: Result
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
NewerOlder