David Yeiser davidyeiser

Freelance designer and developer.

davidyeiser / css3-text-explosion.css

Created March 8, 2011 05:36

As seen on http://gopotluck.com/

	/*
	STUFF'S GONNA 'SPLODE
	---------------------

	The following CSS enables the exploding effect on the input label.
	(Only seen on modern browsers.)

	Context: http://gopotluck.com/
	Related tutorial: http://designintellection.com/lab/exploding-text/
	*/

davidyeiser / jquery-text-explosion.js

Created March 8, 2011 05:39

Associated jQuery for text explosion. As seen on http://gopotluck.com/

	$(function() {
	$("#email-signup-label").lettering();

	var is_search_empty = $(".email-signup input").attr("value");
	if (!is_search_empty == "") {
	$("#email-signup-label").css({opacity:0});
	}

	$("#email-signup-label").click(function() {
	$(".email-signup input").focus();

davidyeiser / text-explosion-sample.html

Created March 8, 2011 06:01

The sample HTML used for the text explosion demo.

	<form class="email-signup">
	<label id="email-signup-label">Sign-up for news, special offers & beta invites.</label>
	<input type="text" />
	</form>

davidyeiser / text-explosion-sample.css

Created March 8, 2011 06:18

The basic setup CSS for the text explosion sample.

	.lab-exploading-text-example { padding-top:20px; background-color:#edeeee; }
	.lab-exploading-text-example form { padding-bottom:20px; position:relative; }
	.email-signup { height:80px; margin:20px 18px; position:relative; }
	.email-signup label { width:457px; height:31px; padding:17px 10px 8px 10px; position:absolute; left:1px; top:2px; font-size:18px; line-height:21px; text-shadow:0 0 1px rgba(0,0,0,0.15); cursor:text; color:#202020; background-color:transparent; z-index:3; }
	.no-js .email-signup label { position:relative; left:0; top:0; }
	.email-signup input { display:inline-block; width:457px; height:37px; padding:10px; position:relative; font-family:"proxima-nova-1", "proxima-nova-2", "Trebuchet MS", Verdana, sans-serif; font-size:18px; text-shadow:0 0 1px rgba(0,0,0,0.15); color:#909090; border:1px solid #d0d0d0; background-color:#fff; z-index:2; }
	.email-signup input:focus { outline:0; -webkit-box-shadow:2px 2px 0 rgba(0,0,0,0.1); }

davidyeiser / sass_functions.rb

Created February 14, 2012 16:15

Adds the exp() function to SASS

	module Sass::Script::Functions
	def exp(value, power)
	Sass::Script::Number.new(value.value**power.value)
	end
	end

davidyeiser / example.scss

Created February 14, 2012 16:22

Sass mixin for automatically determining modular scale font-size value

	$font-size-base: 16px;
	$font-size-minor: 10px;

	@mixin font-size($scale: 1) {
	font-size: round(
	($font-size-base * ((exp(1.618, $scale) - exp(-0.618, $scale)) / 2.236)) +
	($font-size-minor * ((exp(1.618, ($scale - 1)) - exp(-0.618, ($scale - 1))) / 2.236))
	);
	}

davidyeiser / Command line

Created February 14, 2012 16:29

sass --watch FILENAME.scss:FILENAME.css -r sass_extensions.rb

davidyeiser / example.scss

Created February 14, 2012 16:35

SASS example

davidyeiser / example.css

Created February 14, 2012 16:36

SASS output

davidyeiser / oo-css-bad.css

Last active December 16, 2015 15:19

Object Oriented CSS Example