xav76
xav76
/ script.js
Created
October 23, 2012 18:30
A CodePen by Tim Pietrusky. Colorful stripes - A striped background based on linear-gradients. Inspired by the header background image of http://www.wearejh.com
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
| /** | |
| Striped background | |
| # What? # | |
| A striped background based on linear-gradients | |
| Inspired by the header background image of http://www.wearejh.com | |
| # 2012 by Tim Pietrusky | |
| # timpietrusky.com |
xav76
/ index.html
Created
October 23, 2012 18:32
A CodePen by Mark E. Carter. Fancy Banners - A pure CSS3 fancy text banner using transforms, pseudo-elements, last-child, and more!
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="banner"> | |
| <div class="line"> | |
| <span>Fancy Banners</span> | |
| </div> | |
| <div class="line"> | |
| <span>Make It Look</span> | |
| </div> | |
| <div class="line"> | |
| <span>Nice & Classy</span> | |
| </div> |
xav76
/ index.html
Created
October 23, 2012 18:34
A CodePen by Jeremy T. Loading spinners - A few loading spinners using CSS3 animations
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
| Background: | |
| <input type="radio" id="blackBack" name="back" checked/> | |
| <label for="blackBack">Black</label> | |
| <input type="radio" id="whiteBack" name="back"/> | |
| <label for="whiteBack">White</label> | |
| <input type="radio" id="grayBack" name="back"/> | |
| <label for="grayBack">Gray</label><br/> | |
| Period: | |
| <input type="radio" id="pulse" name="period"/> | |
| <label for="pulse">Pulse</label> |
xav76
/ index.html
Created
October 23, 2012 18:35
A CodePen by Roman Diaz. Obligatory CSS3 UI Nav - Here's a fun little nav bar. NO IMAGES. CSS3 FTW I relied on pseudo elements, gradients, data urls, icons by Stephen Hutchings and other fun things that may never work in Internet Explorer. Not great for
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="container"> | |
| <ul id="nav"> | |
| <li><a href="#" class="icon-home"></a></li> | |
| <li class="active"><a href="#" class="icon-camera"></a></li> | |
| <li><a href="#" class="icon-mail"></a></li> | |
| <li><a href="#" class="icon-comment"></a></li> | |
| <li><a href="#" class="icon-user"></a></li> | |
| <li><a href="#" class="icon-cog"></a></li> | |
| </ul> | |
| </div> |
xav76
/ index.html
Created
October 23, 2012 18:35
A CodePen by Roman Diaz. Obligatory CSS3 UI Nav - Here's a fun little nav bar. NO IMAGES. CSS3 FTW I relied on pseudo elements, gradients, data urls, icons by Stephen Hutchings and other fun things that may never work in Internet Explorer. Not great for
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="container"> | |
| <ul id="nav"> | |
| <li><a href="#" class="icon-home"></a></li> | |
| <li class="active"><a href="#" class="icon-camera"></a></li> | |
| <li><a href="#" class="icon-mail"></a></li> | |
| <li><a href="#" class="icon-comment"></a></li> | |
| <li><a href="#" class="icon-user"></a></li> | |
| <li><a href="#" class="icon-cog"></a></li> | |
| </ul> | |
| </div> |
xav76
/ index.html
Created
October 23, 2012 18:35
A CodePen by Stein. A fun textbox - A textbox that looks like a notepad! Forms are fun!
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="wrapper"> | |
| <form id="paper" method="get" action=""> | |
| <div id="margin">Title: <input id="title" type="text" name="title"></div> | |
| <textarea placeholder="Enter something funny." id="text" name="text" rows="4" style="overflow: hidden; word-wrap: break-word; resize: none; height: 160px; "></textarea> | |
| <br> | |
| <input id="button" type="submit" value="Create"> | |
| </form> | |
| </div> |
xav76
/ index.html
Created
October 23, 2012 18:36
A CodePen by Bobby. Delete menu with modal dialog box. - still playing with input:checkbox modal dialog box implementation. The Trash Can it self inspired by Google Chrome Extension Manager. Inspired by: Google Chrome extension trash can.
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="container"> | |
| <label for="delete"> | |
| <div class="wrapper"> | |
| <div class="lid"></div> | |
| <div class="can"></div> | |
| <span>delete</span> | |
| </div> | |
| </label> | |
| <input type="checkbox" name="" id="delete"> | |
| <div class="dialog"> |
xav76
/ index.html
Created
October 23, 2012 18:37
A CodePen by Stein. Progress Bar Button - The idea is to create a button which becomes clickable when [something] is done loading.
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="pb"> | |
| <div id="progress"> | |
| <div id="done">Done!</div> | |
| </div> | |
| Loading... | |
| </div> |
xav76
/ index.html
Created
October 23, 2012 18:37
A CodePen by Stein. Progress Bar Button - The idea is to create a button which becomes clickable when [something] is done loading.
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="pb"> | |
| <div id="progress"> | |
| <div id="done">Done!</div> | |
| </div> | |
| Loading... | |
| </div> |
xav76
/ index.html
Created
October 23, 2012 18:38
A CodePen by Mike King. Nexus Q Sleep Animation - Experimenting with nth-child, a SASS loop & animating objects on a circular path. No classes.
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
| <ul> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> |