Skip to content

Instantly share code, notes, and snippets.

View xav76's full-sized avatar

xav76

View GitHub Profile
@xav76
xav76 / index.haml
Created October 24, 2012 18:01
A CodePen by Bruno Dias. css 3d test. webkit. - there is a fork of this code without prefixes = http://codepen.io/saxamaphone69/pen/KIcnF
#folder
.left
.grad
.right
.grad
@xav76
xav76 / index.html
Created October 24, 2012 18:00
A CodePen by Dec Norton. Bouncy Icons - Bouncy icons with a cool shadow effect
<ul class="bouncy">
<li>
<a href="#" title="Facebook"><span>Facebook</span></a>
<span></span>
</li>
<li>
<a href="#" title="Twitter"><span>Twitter</span></a>
<span></span>
</li>
<li>
@xav76
xav76 / index.html
Created October 24, 2012 17:26
A CodePen by Chris Mounsey. CSS 3D Coverflow - ... at least, that is what I have attempted (it's notoriously difficult). It's not perfect but the cards do move in 3D space (although the active one is not centred), and they're controlled by my faithful sta
<!--- This may need to change --->
<div class="main-container">
<div class="coverflow-container">
<ol class="coverflow-list">
<!-- Cover item -->
<input type="radio" name="cover-item" id="cover-1">
<li class="coverflow-item">
<label for="cover-1">
<figure class="album-cover">
<img src="http://devilskitchen.net/media/coverflow-images/love-is-blind.jpg">
@xav76
xav76 / index.html
Created October 24, 2012 17:25
A CodePen by Jack Rugile. Canvas Vertical Light - Just some experimentation. Click to clear!
<!-- click to clear! -->
@xav76
xav76 / index.html
Created October 24, 2012 17:24
A CodePen by Keith Wyland. CSS Drawers - CSS drawers with transform hover effect. based on http://dribbble.com/shots/176332-Navigation
<div class="wrap">
<ul class="drawers">
<li class="drawer"><span class="handle"></span></li>
<li class="drawer"><span class="handle"></span></li>
<li class="drawer"><span class="handle"></span></li>
<li class="drawer"><span class="handle"></span></li>
</ul>
</div>
@xav76
xav76 / index.html
Created October 24, 2012 17:23
A CodePen by turusuke. CSS background effect - no Javascript and Images
<div>
</div>
@xav76
xav76 / index.html
Created October 24, 2012 17:23
A CodePen by David Pedersen. iOS style button
<a href="#" class="back-button">Tilbage</a>
@xav76
xav76 / index.html
Created October 24, 2012 17:22
A CodePen by Jeroen Franse. Toggle switch with checkbox:checked - Round switch button in css with animation cleaned up. Inspired on the design of Paul Flavius, see: http://psd.tutsplus.com/tutorials/interface-tutorials/round-switch-button/ It is pure CS
<p class=l>Don't forget to click the switch to see the action</p>
<div class=round><input type=checkbox id=onoff name=onoff />
<div class=back><label class=but for=onoff><span class=on>I</span><span class=off>0</span></label></div></div>
<p class=r>It is just an ordinary ckeckbox, usable in any form!</p>
@xav76
xav76 / index.html
Created October 24, 2012 17:21
A CodePen by Chris Mounsey. Circular Slideshow - So, I saw a nice circular slideshow at envylabs.com, and I thought that I would try to emulate it in my own way. Inevitably, it is actioned by radio inputs (I can do JQuery—I just prefer the purity of HTML
<div class="container">
<input type="radio" name="slide-control" id="goto-slide-1" checked>
<input type="radio" name="slide-control" id="goto-slide-2">
<input type="radio" name="slide-control" id="goto-slide-3">
<input type="radio" name="slide-control" id="goto-slide-4">
<div class="reflect">
<div class="horizon">
<ul class="slideshow">
<li class="slides slide-1"></li>
<li class="slides slide-2"></li>
@xav76
xav76 / index.html
Created October 24, 2012 17:20
A CodePen by Jonathan Dumaine. Jason Polito 'Tick-Tock' CSS - http://www.reddit.com/r/web_design/comments/y5mve/the_ticktock_gif_from_yesterday_seemed_like_a/
<div class="container">
<div class="actual">
<div class="" id="blurred">
<div class="gear1"></div>
<div class="gear2"></div>
<div class="circle"></div>
<div class="wheel">
<div class="slot">