Skip to content

Instantly share code, notes, and snippets.

View dudleystorey's full-sized avatar

Dudley Storey dudleystorey

View GitHub Profile
body { background: #000; }
ul li a { text-decoration: none; color: #fff; font-size: 2rem; font-family: Avenir, sans-serif; text-transform: uppercase; }
ul li a:after, ul li a:before { opacity: 0; font-size: 1.5rem; position: relative; top: -.25rem; color: #f00; z-index: -2; }
ul li a:before { content: "<"; right: -2rem; }
ul li a:after { content: ">"; left: -2rem; }
ul li a:hover:before, ul li a:hover:after { opacity: 1; transition: .7s all linear; }
ul li a:hover:before { right: 0; }
ul li a:hover:after { left: 0; }
@dudleystorey
dudleystorey / auto-generated range ticks
Created April 27, 2014 07:17
Creates an auto-generated series of option values to generate ticks for Chrome & IE10 range sliders. slider requires min,max,step and list attributes.
function ticks(element) {
if (element.hasOwnProperty('list') && element.hasOwnProperty('min') && element.hasOwnProperty('max') && element.hasOwnProperty('step')) {
var datalist = document.createElement('datalist'),
minimum = parseInt(element.getAttribute('min')),
step = parseInt(element.getAttribute('step')),
maximum = parseInt(element.getAttribute('max'));
datalist.id = element.getAttribute('list');
for (var i = minimum; i < maximum+step; i = i + step) {
datalist.innerHTML +="<option value="+i+"></option>";
}
@dudleystorey
dudleystorey / batch-resize.jsx
Created February 24, 2015 06:49
Creates smaller square thumbnail images with correct appended file names, given a folder of original JPEG, PNG and GIF files at large sizes
// explanatory article: https://demosthenes.info/blog/993/1x-2x-3x-more-Batch-Processing-Retina-Images-with-PhotoShop-and-JavaScript
var inputFolder = Folder.selectDialog("Select a folder to process"),
outputFolder = Folder.selectDialog("Select a folder for the output files"),
imageSizes = [
["250px", "250px", "1x"],
["125px", "125px", "icon-2x"],
["75px", "75px", "icon-1x"]
],
numImageSizes = imageSizes.length;
@dudleystorey
dudleystorey / index.html
Created July 4, 2015 05:21
Completed Example: SVG Maps from Natural Earth Data
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>World Map Example</title>
<style>
path {fill: lightgray; stroke: white;}
path:hover {fill: gray;}
</style>
</head>