xav76’s gists

xav76 / index.html

Created October 24, 2012 16:47

A CodePen by dhaakon. Simple Text Effect - Using Dojo 1.6.

xav76 / index.html

Created October 24, 2012 16:47

A CodePen by RogueSkolar.

	<div id="wrapper"> <!-- this is only for demo -->
	<h1>A simple float clearing demo</h1>

	<h2>Problem</h2>
	<p><strong>1. Borders and backgrounds misbehaving when applied to an element that contains a float/s</strong></p>

	<div class="demo">
	<div class="grid">
	<img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>

xav76 / index.haml

Created October 24, 2012 16:46

A CodePen by dmac37. CSS Hexagon - CSS Hexagon Styling

	.center
	.hexagon
	.hexagon-in1
	.hexagon-in2

xav76 / index.html

Created October 24, 2012 16:45

A CodePen by Hakim El Hattab. Avgrund - A modal concept with a visible level of depth between the page and modal layers.

	<article class="avgrund-contents">
	<h1>Avgrund</h1>
	<p>
	A modal concept with a visible level of depth between the page and modal layers. Click a button below to give it a try.
	</p>
	<button onclick="avgrund.activate( 'stack' );">Stack it</button>
	<button onclick="avgrund.activate();">Grow it</button>
	<p>
	Uses CSS transforms to scale components and CSS filters to blur the page.
	</p>

xav76 / index.html

Created October 24, 2012 16:45

A CodePen by James Doyle. No Web Font Stars - Using html special characters to make some stars

	<ul>
	<li><a href="#">&#9733</a></li>
	<li><a href="#">&#9733</a></li>
	<li><a href="#">&#9733</a></li>
	<li><a href="#">&#9733</a></li>
	<li><a href="#">&#9733</a></li>
	</ul>

xav76 / index.html

Created October 24, 2012 16:32

A CodePen by James Doyle. No Web Font Stars - Using html special characters to make some stars

	<ul>
	<li><a href="#">&#9733</a></li>
	<li><a href="#">&#9733</a></li>
	<li><a href="#">&#9733</a></li>
	<li><a href="#">&#9733</a></li>
	<li><a href="#">&#9733</a></li>
	</ul>

xav76 / index.html

Created October 24, 2012 16:32

A CodePen by RogueSkolar.

	<div id="wrapper"> <!-- this is only for demo -->
	<h1>Image <span class="amp">&</span> caption demo with borders</h1>

	<!-- Small Centered Image With Caption -->
	<h2>Small centered image with caption</h2>
	<div class="figure small centered">
	<div class="liner">
	<img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_z.jpg" alt="" title="">
	<p class="caption">Giving credit where credit is due</p>
	</div>

xav76 / index.html

Created October 24, 2012 16:30

A CodePen by T.J. Fogarty. Comment with character counter - Simple character counter with a custom min and max comment length. Not much in the way of validation, just something simple.

	<form id="enquiry" action="">
	<textarea maxlength="140" name="message" id="message" placeholder="Add your comment!"></textarea>
	<input type="submit" value="Add Comment">
	</form>

xav76 / index.html

Created October 24, 2012 16:29

A CodePen by Jack Rugile. Canvas Bokeh Generation - Pretty heavy, and not exactly true to real photography, but it's a start.

<h1>Canvas Bokeh</h1>

xav76 / index.html

Created October 24, 2012 16:28

A CodePen by Mike King. Twisty - Simple square CSS animation inspired by mr. div's gif animations (http://mrdiv.tumblr.com/)

	<div class="container">
	<div class="square black">
	<div class="square">
	<div class="square black">
	<div class="square">
	<div class="square black">
	<div class="square">
	<div class="square black">
	<div class="square">
	<div class="square black">