Skip to content

Instantly share code, notes, and snippets.

@stephenhay
stephenhay / index.html
Created July 16, 2011 10:41
Simple HTML+CSS progress bar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple HTML+CSS progress bar</title>
<style>
body {
/* Demo only */
font-family: Arial, sans-serif;
@stephenhay
stephenhay / index.html
Created September 6, 2011 18:09
Pearce's Flexbox Snaking Cell Dilemma
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pearce's Flexbox Snaking Cell Dilemma</title>
<style media="screen">
body { font: 100%/1.5 sans-serif; padding: 0 2em;}
.block {
background-color: silver;
@stephenhay
stephenhay / index.html
Created October 7, 2011 11:48
Simple regions example (deprecated syntax, works in Chrome Dev per 7 Oct 2011
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Regions test</title>
<style>
/* A section is a slide. It's size is 800x600, and this will never change */
@stephenhay
stephenhay / index.html
Created October 11, 2011 14:37
Ubuntu logo in HTML/CSS (for the Fronteers CSS challenge)
<style>
#ubuntulogo {
width: 108px;
height: 108px;
position:relative;
}
#ubuntulogo, #inner, .line { background-color: white; }
#outer {
background-color: #d40000;
background-image: -webkit-radial-gradient(-3px 45px, #fb8b00 44px, transparent 44px), -webkit-radial-gradient(70px 0, #f44800 45px, transparent 20px);
@stephenhay
stephenhay / index.html
Last active September 27, 2015 13:38
Smashing Magazine logo with HTML/CSS (just for fun: Fronteers CSS challenge)
<!DOCTYPE html>
<style>
body {
font-size: 100%;
}
h1 {
font-family: Helvetica, Arial, sans-serif;
font-size: 2.4em;
letter-spacing: .05em;
text-transform: uppercase;
@stephenhay
stephenhay / index.html
Last active December 10, 2015 13:49
d3 test
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.2"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.27.2"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.27.2"></script>
<style type="text/css">
.node circle {
body {
font: 100%/1.25 sans-serif;
color: #636363;
padding: 1em;
}
table {
width: 100%;
margin: 0;
border-top: 1px solid #e4e2e8;
body {
display: flex;
align-items: center;
padding: 5em 20%;
font-family: sans-serif;
line-height: 1.4em;
/* color: dimgray; */
}
h1 {
void function() {
var chars = document.body.innerText.split('').sort().filter(function(char, i, arr) {
return i === 0 || arr[i - 1] !== char;
}).join('');
var textarea = document.createElement('textarea'),
snippet = '<pre><link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Inconsolata&text=' + chars + '"></pre>';
textarea.innerHTML = snippet;
textarea.setAttribute('style','position:fixed;top:5vh;left:5vw;height:90vh;width:90vw;box-shadow:0 0 5vmax black;background:white');
document.body.appendChild(textarea);