Skip to content

Instantly share code, notes, and snippets.

@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
/**
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
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!
<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 &amp; Classy</span>
</div>
@xav76
xav76 / index.html
Created October 23, 2012 18:34
A CodePen by Jeremy T. Loading spinners - A few loading spinners using CSS3 animations
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
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
<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
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
<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
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!
<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
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.
<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
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.
<div id="pb">
<div id="progress">
<div id="done">Done!</div>
</div>
Loading...
</div>
@xav76
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.
<div id="pb">
<div id="progress">
<div id="done">Done!</div>
</div>
Loading...
</div>
@xav76
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.
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>