xav76
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 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:19
A CodePen by Tyrus. Progress Bars - Simple progress bar styles. *Chris Coyier's scalable background image technique: http://css-tricks.com/perfect-full-page-background-image/
This file contains 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="bg"> | |
| <img src="http://img.skitch.com/20120814-m3ei5cptau2yjn7sgi2a4i62kn.png" alt=""> | |
| </div> | |
| <div class="wrapper"> | |
| <div class="progress"></div> | |
| </div> | |
| <div class="wrapper"> |
xav76
/ index.html
Created
October 24, 2012 17:18
A CodePen by Mario Gonzalez. Canvas PS3 homescreen wave
This file contains 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
/ script.js
Created
October 24, 2012 17:18
A CodePen by Takashi Kitao. Lighting and Billboard with CSS - This is an example of DivSugar, a CSS-based 3D graphics library. DivSugar: https://github.com/kitao/divsugar
This file contains 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
| 'use strict'; | |
| // create a scene | |
| var scn = new DivSugar.Scene().setSize(800, 600).setImage('#d0d0d0').appendTo(document.body); | |
| // maximize the scene size | |
| function resize() { scn.adjustLayout(window.innerWidth, window.innerHeight, 'cover'); } | |
| window.addEventListener('resize', resize, true); | |
| resize(); |
xav76
/ index.html
Created
October 24, 2012 17:18
A CodePen by Christian Naths. Responsive Admin Template - Just a design I'm working on for an admin area of a CMS. Just one responsive breakpoint at 800px; one layout for portrait iPad and smaller and another layout for landscape iPad and larger.
This file contains 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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | |
| <meta name="description" content="" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <title></title> |
xav76
/ index.html
Created
October 24, 2012 17:16
A CodePen by Sergio Tapia Gutierrez. Google Logo with CSS3 Animations. - This is taken from the logo that appears on the main Google website: http://www.google.com The icon has a nice animation effect, and I wanted to recreate it using CSS3 animations.
This file contains 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>Google Logo with CSS3 Animations</h1> | |
| <p>Another one of my experiments while learning about CSS3 animations and transitions. @lostinthegc</p> | |
| <div class="wrap"> | |
| <img src="http://i.imgur.com/e8LMT.png" /> <!-- Original logo. --> | |
| <div class="pen"> <!-- Sexy times logo.--> | |
| <div class="blue"></div> |
xav76
/ index.html
Created
October 24, 2012 17:15
A CodePen by Tristan. Geese - A tribute to Giess - Best Winamp vis plugin ever. Type your name in the Seed box to see what it looks like! Most of the control is done with Ctrl, Alt and Shift & Mouse Wheel / Click on the Canvas element. Seedrandom.js co
This file contains 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
| <body> | |
| <section id="wrapper"> | |
| <label title="Ctrl-Click">[ <span id="screenshot">Screenshot</span> ]</label> | |
| <label title="Shift-Click">[ <span id="revRotation">Reverse Rotation</span> ]</label> | |
| <label title="Alt-Click">[ <span id="palette">Reverse Palette</span> ]</label> | |
| <label class="right" title="Ctrl-Mouse Wheel">[ Draw Alpha: <span id="drawAlpha">0.0750</span> ]</label> | |
| <label class="right" title="Alt-Mouse Wheel">[ Clear Alpha: <span id="clearAlpha">0.0100</span> ]</label> | |
| <label class="right" title="Shift-Mouse Wheel">[ Rotation: <span id="rotation">0.0050</span> ]</label> | |
| <label class="right" title="Mouse Wheel">[ Scale: <span id="scale">1.2000</span> ]</label> | |
| <canvas id="canvas" width="1200" height="600"></canvas> |
xav76
/ index.html
Created
October 24, 2012 17:14
A CodePen by Ben Markowitz. That's No Moon! - Webkit 3D transforms, Keyframe Animation, and JQuery used to create a 3D blueprint of the Death Star. Probably only works in Safari/Chrome.
This file contains 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"> | |
| <div id="container"> | |
| <div id="output"></div> | |
| <div id="star"> | |
| <div class="trench_wall north"></div> | |
| <div class="trench_wall"></div> | |
| <div class="trench_wall south"></div> | |
| </div> | |
| </div><!-- container --> | |
| </div><!-- wrapper --> |
xav76
/ index.html
Created
October 24, 2012 17:14
A CodePen by Hugo Giraudel. CSS kaleïdoscop - A small pen to try with SASS for loops, HSLa and Zen Coding. ALL IN ONE ! Plus a colorful result. :P
This file contains 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 class="a-1"></li> | |
| <li class="a-2"></li> | |
| <li class="a-3"></li> | |
| <li class="a-4"></li> | |
| <li class="a-5"></li> | |
| <li class="a-6"></li> | |
| <li class="a-7"></li> | |
| <li class="a-8"></li> | |
| <li class="a-9"></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 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> |