Jon jonbjornn

Caffeine Animation

HTML5 and JavaScript animation that shows the molecular structure of Caffeine. The double bonds in Caffeine are displayed by darkening the lines.

Basic CSS Effect for a button or div, or whatever really.

	<script>

	/**
	* Do not remove this section; it allows our team to troubleshoot and track feature adoption.
	* TS:0002-07-017
	*/

	lp.jQuery(function($) {

	// Replace email_address with the actual ID of your form field.

	# vim:ft=zsh ts=2 sw=2 sts=2
	#
	#
	# Created by Jon Bjornn based on agnoster's Theme
	# https://gist.github.com/jonbjornn/829ecd40f8274b84497a
	#
	#
	#
	# # README
	#

	/* Custom rules for word wrap and line numbers */
	.highlight .lineno { color: #ccc; display:inline-block; padding-right: 2px;}
	.highlight pre code { display: block; white-space: pre; overflow-x: auto; word-wrap: normal; }


	/* Any indented lines have been changed from generic Github-style syntax highlighting. */

	.highlight { background: #2e2e31; }
	.highlight .n { color: #be9cff } /* Not sure what element this is */
	.highlight .p { color: #ffffff } /* "Punctuation" I believe. According to Pygments documentation */

	// ----
	// Sass (v3.4.4)
	// Compass (v1.0.1)
	// ----

	/*
	This is a Global CSS document.
	For message specific styles, please
	preview the individual messages.
	*/

	<link href='http://fonts.googleapis.com/css?family=Cabin+Condensed:700' rel='stylesheet' type='text/css'>

	<div class="loading wave">
	Loading
	</div>

	<!-- For Firefox -->
	<div class="loading loading-2 wave wave-2">
	<div class="ff">For browsers that don't support background-clip:text:</div>
	<div class="loading-2-text"></div>

	/**Button
	* The first commented line is your dabblet’s title
	*/

	* {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
	}