nladart’s gists

nladart / index.html

Created March 19, 2013 08:18

A CodePen by Chris Coyier. BERG Cloud Buttons - From [here](http://bergcloud.com/)

	<a href="#" class="button blue">
	Find Out<br>More
	</a>

	<a href="#" class="button yellow">
	Pre-Order<br>Now
	</a>

nladart / index.html

Created March 19, 2013 20:22

A CodePen by Olex. Flat Buttons - Simple flat button family similar to bootstrap buttons. Nothing much going on here, just margin + border adding up to the same value on and off hover.

	<div class="container">
	<a href="javascript:void(0);" class="btn whooooa">ZOIDBERG</a>
	<h1>Flat Button Family</h1>
	<a href="javascript:void(0);" class="btn">Snap</a>
	<a href="javascript:void(0);" class="btn inverse">Inverse</a>
	<p>Nearly flat buttons.</p>


	<a href="javascript:void(0);" class="btn winner">Winner</a>
	<a href="javascript:void(0);" class="btn create">Create</a>

nladart / index.html

Created March 19, 2013 20:26

A CodePen by Johanna Ruiz. CSS Generated Content Buttons - I wanted to experiment with icon fonts and pseudo-elements to create some buttons. The buttons and content are generated purely with css. Using the before and after pseudo-elements and the css "content" attribute, the icon and button name have been injected into the DOM using CSS. CSS tr…

	<div id="social-links">
	<ul id="social-icons">
	<li class="facebook"><a class="zocial-facebook" href="#"></a></li>
	<li class="twitter"><a class="zocial-twitter" href="#"></a></li>
	<li class="linkedin"><a class="zocial-linkedin" href="#"></a></li>
	<li class="forrst"><a class="zocial-forrst" href="#"></a></li>
	<li class="github"><a class="brandico-github"href="#"></a></li>
	<li class="instagram"><a class="brandico-instagram" href="#"></a></li>
	</ul>
	</div>

nladart / functions-snippet-1.php

Created March 21, 2013 18:10 — forked from neverything/functions-snippet-1.php

For Require + Foundation Child Theme

	<?php
	// Add the following line to your required_starter_themesetup in your child theme functions.php
	remove_action( 'wp_enqueue_scripts', 'required_load_scripts' );

nladart / webkit-pseudo-elements.md

Created May 16, 2013 19:25 — forked from leostratus/webkit-pseudo-elements.md

Web-Kit HTML5 form controls, etc. css

An ongoing project to catalogue all of these sneaky, hidden, bleeding edge selectors as I prepare my JSConf EU 2012 talk.

Everything is broken up by tag, but within each the selectors aren't particularly ordered.

I have not tested/verified all of these. Have I missed some or got it wrong? Let me know. - A

A friendly reminder that you may need to set this property on your target/selected element to get the styling results you want:

-webkit-appearance:none;

nladart / normalized.html

Created June 9, 2013 23:06 — forked from scottkellum/normalized.html

	<!doctype html>

	<html>
	<head>
	<!-- Encoding -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>

nladart / index.html

Created August 10, 2013 02:04

A CodePen by Chris Coyier. Percentage sized and still centered - Translate() has to be used instead of negative top margin, because that is based on width which doesn't work.

	<div>
	Percentage sized and still centered.
	</div>

nladart / index.html

Created August 10, 2013 02:09

A CodePen by Shaw. Absolute Centering - Perfect horizontal AND vertical centering in CSS, at any width or height! Works with percentage based width/height, min-/max- width, images, position: fixed and even variable content heights.

	<div class="Modal-Background toggle-Modal">
	<div class="Center-Block Absolute-Center is-Fixed Modal" id="Fixed-Modal">
	<h1 class="Title">Absolute Center.</h1>

	<p>This box is absolutely centered within the viewport, horizontally and vertically, using only CSS.</p>

	<p>Click me to learn more.</p>
	</div>
	</div>

nladart / index.html

Created August 11, 2013 17:15

A CodePen by Daniel Ott. Long Shadow Sass Mixin - A mixin to create easily create the newest fad in design: long shadows!

	<div class="banner">
	<h1>Long Shadows</h1>
	<h2>Sass Mixin for Long Shadows</h2>
	</div>

nladart / index.html

Created August 12, 2013 00:11

CSS3 Creative Resume

	<div class="container">
	<div class="word_split wrapper">
	<span class="word word1"> Antony </span>
	<span class="word word2">Smith</span>
	<span class="word word3">Personal</span>
	<span class="word word4">Details</span>
	<span class="word word5">Employment</span>
	<span class="word word6">History </span>
	<span class="word word7">Education</span>
	<span class="word word8">Personal</span>

Nick LaDart nladart