xav76’s gists

xav76 / index.html

Created October 24, 2012 16:27

A CodePen by Fabrice Weinberg. Unfold Map pure CSS - Idea from Eric F Tremblay (http://cssdeck.com/user/ericft) Cleaned up HTML usage (6 divs for shadow). The pin was designed by Dan Eden (https://twitter.com/#!/_dte).

	<h1>Unfold Map pure CSS</h1>

	<div class="holder">
	<div class="map fold">
	<span class="pin" style="left: 140px; top: 75px;" alt="Montreal"></span>
	<span class="pin" style="left: 373px; top: 103px;" alt="Hong-Kong"></span>
	<span class="pin" style="left: 79px; top: 95px;" alt="Las Vegas"></span>
	</div>
	</div>

xav76 / index.haml

Created October 24, 2012 16:27

A CodePen by M Naufal. Martabak Box - Pure CSS3 With Single elements

	.box
	martabak box

xav76 / index.html

Created October 24, 2012 16:26

A CodePen by Joshua Hibbert. 3D Button

xav76 / index.html

Created October 24, 2012 16:24

A CodePen by Ilya N. Zykin. Calendar without tables - Example of calendar building without tables, minimalistic style

	<div id="calendar" class="calendar_modern">
	<div class="calendar">

	<div class="nav">
	<i title="left"></i>
	<b title="right"></b>
	</div>

	<div class="months">
	<div class="month" data-date="2011.1">

xav76 / index.html

Created October 24, 2012 16:23

A CodePen by Kseso. Kaleidoscopio Css - Original demo https://github.com/coldhead/kaleidos Este pen es sólo para ilustrar un artículo en mi blog. ALL CREDITS AND AWARDS must go to https://github.com/coldhead

	<body>
	<!--original https://github.com/coldhead/kaleidos
	Ejemplo para ilustrar artículo en KsesoCss.blogspot.com -->
	<div class="kaleidoscope">
	</div>
	<span class="move">Move the mouse over the img!</span>
	<a id="fork" href="http://github.com/coldhead/kaleidos" target="_blank">Fork coldhead on Github</a>
	</body>

xav76 / index.html

Created October 24, 2012 16:23

A CodePen by Jason Delia. CSS Background Grid Lines - Proof of concept for a project I'm working on. Inspired by Abby Getman https://twitter.com/gogogetman

xav76 / index.html

Created October 24, 2012 16:23

A CodePen by jklm313. Pure CSS 360deg/panorama viewer... - General Selector. Salud!

	<div class="fixed">Swipe mouse over the image horizontally to see it in action:</div>

	<div class="g">
	<div class="h"></div>
	<div class="h"></div>
	<div class="h"></div>
	<div class="h"></div>
	<div class="h"></div>
	<div class="h"></div>
	<div class="h"></div>

xav76 / index.html

Created October 24, 2012 15:08

A CodePen by Fabrice Weinberg. nth-everything css - See here: https://github.com/FWeinb/nthEverything

	<h1><p id="nthEverthing">nth-Everthing</p></h1>

	<p id="letters">Hover a red letter. Cool, hu?</p>
	<p id="pseudo">Pseudo elements are working</p>
	<p id="click">Please click here</p>
	<p id="flip">Every second letter is flipped</p>
	<p id="crazy">Flip Hover Flip</p>
	<p id="font">Zoom all the things!</p>
	<p id="word">FirstWord some words Green some words LastWord</p>
	<p id="firstLastWord">Hello from nth-everthing</p>

xav76 / index.html

Created October 24, 2012 15:08

A CodePen by Chris Simari. SQ45° MENU - This jQuery plugin was inspired by the CSS keyframe animation on www.gonzalves.fr

	<div id="demo">
	<ul id="flip-panels">
	<li>
	<a href="https://twitter.com/chrissimari" target="_blank" rel="dummy-thumb" title="twitter">
	<h1 class="linkTitle">twitter</h1>
	<div class="edge edge-left"></div>
	<div class="edge edge-right"></div>
	<div class="surface"><img class="icon" src=""></div>
	</a>
	</li>

xav76 / index.html

Created October 24, 2012 15:08

A CodePen by o'holloran. CSS Timeline - Created this timeline for the company history section of www.meridianapps.com. Uses the LESS CSS framework and some jquery hover/click events.

	<div id="history">

	<div id="history_clock">

	<div id="clockface">

	<div id="clockglare"></div>
	<div id="clockarm_1" ></div>
	<div id="clockarm_2"></div>