Skip to content

Instantly share code, notes, and snippets.

View gregwhitworth's full-sized avatar

Greg Whitworth gregwhitworth

116 followers · 28 following
View GitHub Profile
@gregwhitworth
gregwhitworth / custom-props-get-prop-value.js
Created February 28, 2017 01:39
custom-props-get-prop.js
var myComponent = document.getElementsByClassName('my-component')[0];
var cs = getComputedStyle(myComponent);
cs.getPropertyValue('--primary');
@gregwhitworth
gregwhitworth / custom-props-valid-prop.css
Created February 28, 2017 01:46
custom-props-valid-prop.css
--bg: rgb(calc(var(--r) + var(--modifier)), calc(var(--g) + var(--modifier)), calc(var(--b) + (var(--modifier) + 50)));
@gregwhitworth
gregwhitworth / custom-props-building.css
Created March 17, 2017 16:51
custom-props-building.css
--building-r-mod: 0;
--building-g-mod: 0;
--building-b-mod: 0;
@gregwhitworth
gregwhitworth / custom-props-building-calc.css
Created March 17, 2017 16:52
custom-props-building-calc.css
.distant-building__window
{
fill: rgb(
calc(111 + (111 * var(--building-r-mod))),
calc(79 + (79 * var(--building-g-mod))),
calc(85 + (85 * var(--building-b-mod)))
);
}
@gregwhitworth
gregwhitworth / custom-props-tail-wag.css
Created March 17, 2017 16:57
.tail
{
transform: translateY(10px) rotate(var(--tail-rotate));
transform-origin: 60% 84%;
animation: wagTail 250ms infinite;
}
@keyframes wagTail
{
from
@gregwhitworth
gregwhitworth / custom-props-get-property.js
Created March 17, 2017 17:07
var night = function() {
vars = [
{name: "--sky-start", value: "rgb(100, 75, 128)"},
{name: "--sky-end", value: "rgb(45, 45, 81)"},
{name: "--light-r-mod", value: "-17.5"},
{name: "--light-g-mod", value: "25"},
{name: "--light-b-mod", value: "110"},
{name: "--show-stars", value: "block"},
{name: "--building-r-mod", value: "-.25"},
{name: "--building-g-mod", value: 0},
@gregwhitworth
gregwhitworth / creating-fallbacks.html
Created June 14, 2017 04:50
creating-fallbacks-for-IE
<!doctype html>
<html>
<head>
<title>Fallbacks!!!</title>
<style>
#test {
width: 100px;
height: 100px;
background: red;
}
@gregwhitworth
gregwhitworth / css-grid-3-by-three.css
Created October 23, 2017 21:24
.puzzle-game {
display: grid;
grid-area: game;
align-self: start;
justify-self: center;
max-width: 35vw;
border: 10px solid cornflowerblue;
grid: 1fr 1fr 1fr / 1fr 1fr 1fr;
background: rgba(0, 0, 0, .5);
}
@gregwhitworth
gregwhitworth / css-grid-example-of-longhands.css
Created October 24, 2017 16:35
css-grid-example-of-longhands
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
@gregwhitworth
gregwhitworth / index.html
Created December 7, 2017 04:47
Variable Fonts playground made with Mavo
<p>Variable Fonts</p>