xav76
xav76
/ index.html
Created
October 24, 2012 17:18
A CodePen by Mario Gonzalez. Canvas PS3 homescreen wave
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="container"> |
xav76
/ index.html
Created
October 23, 2012 18:08
A CodePen by Avi Kohn. CSS image slider w/ next/prev buttons - A 100% pure CSS image slider with previous/next buttons and image transitions. Updated with simplified HTML and CSS, better image transitions and resized images.
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
| <!-- NOTE: None of the included images are mine and I take no credit for them!! --> | |
| <ul id="body"> | |
| <input type="radio" name="radio-btn" id="img-1" checked /> | |
| <li id="img-container"> | |
| <div id="img-inner"> | |
| <img src="http://farm9.staticflickr.com/8043/8098759802_6da1ff5538_z.jpg"> | |
| </div> | |
| <label for="img-6" class="sb-bignav" title="Previous"></label> | |
| <label for="img-2" class="sb-bignav" title="Next"></label> | |
| </li> |
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
| <a href="#" class="back-button">Tilbage</a> |
xav76
/ index.html
Created
October 24, 2012 16:49
A CodePen by Mohamed Moustafa. CSS Hidden Navigation - An experiment, powered by a hidden resizable textarea.
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>Try to Pull the Arrow <span class="me">Down</span></h1> | |
| <div class="wrapper wbot"> | |
| <div class="content"> | |
| <ul> | |
| <li><a href="#">Cool, HUH</a></li> | |
| <li><a href="#">Try to</a></li> | |
| <li><a href="#">Pull the</a></li> | |
| <li><a href="#">Arrow Up</a></li> | |
| <li><a href="http://codepen.io/mmoustafa" target="_blank" class="me">mmoustafa</a></li> |
xav76
/ index.html
Created
October 24, 2012 17:12
A CodePen by Hakim El Hattab. Magnetic - An old <canvas> particle experiment of mine.
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
| <p>Double-click to add new nodes. Drag to move them. <br>Change skin: <a id="prevSkin" href="#">Previous</a> / <a id="nextSkin" href="#">Next</a>.</p> | |
| <canvas id='world'></canvas> |
xav76
/ index.html
Created
October 24, 2012 17:23
A CodePen by turusuke. CSS background effect - no Javascript and Images
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> | |
| </div> |
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
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"> | |
| <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
/ index.html
Created
October 24, 2012 17:19
A CodePen by Tunghsiao Liu. Path 2.0 Flyout Menu using CSS - Demo: http://sparanoid.com/lab/path-menu/ Dribbble page: http://drbl.in/cwcK
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="testfield" class="span16"> | |
| <div class="flyout-wrap"> | |
| <a class="flyout-btn" href="#" title="Toggle"><span>Flyout Menu Toggle</span></a> | |
| <ul class="flyout flyout-init"> | |
| <li><a href="#"><span>Item</span></a></li> | |
| <li><a href="#"><span>Item</span></a></li> | |
| <li><a href="#"><span>Item</span></a></li> | |
| <li><a href="#"><span>Item</span></a></li> | |
| <li><a href="#"><span>Item</span></a></li> | |
| <li><a href="#"><span>Item</span></a></li> |
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
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="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
/ 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/
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"> | |
| <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"> |
NewerOlder