Skip to content

Instantly share code, notes, and snippets.

View russgossett's full-sized avatar

Russ Gossett russgossett

2 followers · 3 following
View GitHub Profile
@russgossett
russgossett / volume images - base64
Created April 15, 2015 14:40
volume base64 images
.volume-full-image {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExQkY0MUU5OTY4MzZCQ0FCNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MTlFRTkzM0MzREYxMUUyQkI0OEM1QTY5RTM0MjM5MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MTlFRTkzMkMzREYxMUUyQkI0OEM1QTY5RTM0MjM5MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZS
@russgossett
russgossett / Scroll-dependent-Fixed-Nav.markdown
Created March 30, 2015 17:26
Scroll-dependent Fixed Nav
@russgossett
russgossett / Basic-Example-of-SVG-Line-Drawing,-Backward-and-Forward.markdown
Last active August 29, 2015 14:17
Example of a Loading Animation on an SVG Stroke
@russgossett
russgossett / index.html
Created May 15, 2014 13:38 — forked from anonymous/EIhHm.markdown
multi-line ellipsis content
<link href='http://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
<div class="card">
<div class="info">
<h2 class="line-clamp">Headline: Seattle Business Owners Turn To An Unlikely Source Of Consultants: UW Undergrads</h2>
<p>6 hours ago</p>
</div>
</div>
<div class="card">
@russgossett
russgossett / animated-gif.css
Created May 14, 2014 14:04
CSS Gif
/*
<div class="hi"></div>
*/
.hi {
width: 150px;
height: 300px;
background-image: url("http://russgossett.com/portfolio/images/tools-of-trade.png");
-webkit-animation: play 5s steps(4) infinite;
@russgossett
russgossett / equalizer.css
Created May 14, 2014 14:01
Animated Equalizer
*{ list-style-type:none; font-family: Gill sans;}
li {float: left;}
#wrapper {
width:300px;
height:50px;
background: rgb(241, 241, 241);
margin: 250px auto;
border-radius:5px/10px;
@russgossett
russgossett / custom-checkboxes
Created July 18, 2013 16:14
Custom Checkboxes
body {
background: #fff;
}
input[type=checkbox] {
visibility: hidden;
}
/* SQUARED GRAY */
@russgossett
russgossett / index.slim
Created July 1, 2013 12:28 — forked from anonymous/index.slim
CSS Page curls
ul.box
li hello
li you the man
li yeah you are
@russgossett
russgossett / index.html
Created February 14, 2013 16:49 — forked from anonymous/index.html
Pure CSS Album/Record
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="record"></div>
<!--div class="songlist-img-wrap" style="height: 60px;width: 60px;background: #363636;overflow: hidden;position: relative;border-radius:4px;">
<div class="outerCirc" style="height: 50%;width: 50%;border: 16px solid #272727;border-radius: 50%;">
@russgossett
russgossett / index.html
Last active December 12, 2015 12:48 — forked from anonymous/index.html
Use custom HTML tags
<!-- why not -->
<song>
<img src="http://placekitten.com/60/60">
<song-meta>
<name>Name of Song</name>
<artist>Name</artist>
<album class="hidden">add Album</album>