Skip to content

Instantly share code, notes, and snippets.

View matthewcrist's full-sized avatar

Matthew Crist matthewcrist

32 followers · 10 following
View GitHub Profile
@matthewcrist
matthewcrist / gist:5397433
Created April 16, 2013 16:36 — forked from anonymous/gist:5396725
---
title: Images
layout: guide
---
<h1>Images</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero erat, adipiscing non pellentesque eu, rhoncus et metus. Nunc bibendum elementum ante sed pharetra. Morbi varius egestas diam, sit amet commodo nunc malesuada sed. Quisque et commodo mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero erat, adipiscing non pellentesque eu, rhoncus et metus. Nunc bibendum elementum ante sed pharetra. Morbi varius egestas diam, sit amet commodo nunc malesuada sed. Quisque et commodo mauris.</p>
<figure class="hero-image">
@matthewcrist
matthewcrist / gist:5237803
Created March 25, 2013 15:10
Add this to your application.js for the asset pipeline
//= require turbolinks
@matthewcrist
matthewcrist / Turbolinks
Last active December 15, 2015 09:19
Add this to your Gemfile
@matthewcrist
matthewcrist / index.html
Created September 11, 2012 19:18
Responsive vertical/horizontal image centering with CSS only
<img width="500" height="335" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAFPCAIAAAA0uatrAAA4ZElEQVR42u2d919TW9aH5++aO6YSEnrvqAgCAiIiWLCigiJ2EVBAAbGLV7BgRzqKihQBUXpNIYE0Zub96V05x8twlRIgQHLyzef53GGQkpwcnr322muv/Y/JySkAAAAc4x+4BAAAALkDAACA3AEAAEDuAAAAIHcAAACQOwAAQO4AAAAgdwAAAJA7AAAAyB0AAADkDgAAkDuuAgAAQO4AAAAgdwAAAJA7AAAAyB0AAADkDgAAkDsAAADIHQAAAOQOAAAAcgcAAAC5AwAA5I6rAAAAkDsAAADIHQAAAOQOAAAAcgcAAAC5AwAA5A4AAAByBwAAALkDAACA3AEAAEDuAAAAuQMAAIDcAQAAQO4AAAAgdwAAAJA7AAAAyB0AACB3AAAAkDsAAADIHQAAAOQOAAAAcgcAAMgdAAAA5A4AAAByBwAAALkDAACA3AEAAEDuAAAAuQMAAIDcAQAAQO4AAAAgdwAAAJA7AABA7gAAACB3AAAAkDsAAADIHQAAAOQOAAAAcgcAAMgdAAAA5A4AAAByBwAAALkDAACA3AEAAHIHAAAAuQMAAIDcAQAAQO4AAAAgdwAAAJA7AABA7gAAACB3AAAAkDsAAADIHQAAAOQOAACQOwAAAMgdAAAA5A4AAAByBwAAALkDAACA3AEAAHIHAAAAuQMAAIDcAQAAQO4AAAAgdwAAgNwBAABA7gAAACB3AAAAkDsAAADIHQAAAOQOAACQOwAAAMgdAAAA5A4AAAByBwAAALkDAADkDgAAAHIHAAAAuQMAAIDcAQAAQO4AAAAgdwAAgNwBAABA7gAAACB3AAAAkDsAAADIHQCwUqamtOaDywW5AwBsgIkJ9fi4fFwuVypVC6NSTajVGu2U1mAw6vVGiB5yBwAsJ5rWanU6nUF
@matthewcrist
matthewcrist / data-uri.css
Created May 6, 2012 19:04
Example of Data URI Image in CSS
.selector {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAIAAAD2HxkiAAAD7GlDQ1BpY2MAAHjajZTPbxRlGMc/u/POrAk4B1MBi8GJP4CQQrZgkAZBd7vLtlDLZtti25iY7ezb3bHT2fGd2fIjPXHRG6h/gIocPJh4MsFfES7AQQMJQUNsSEw4lPgjRBIuhtTDTHcHaMX39Mzzfp/v9/s875OBzOdV33fTFsx6oaqU8tb4xKSVuUGaZ1hDN2uqduDnyuUhgKrvuzxy7v1MCuDa9pXv//OsqcnAhtQTQLMW2LOQOga6a/sqBOMWsOdo6IeQeRboUuMTk5DJAl31KC4AXVNRPA50qdFKP2RcwLQb1Rpk5oGeqUS+nogjDwB0laQnlWNblVLeKqvmtOPKhN3HXP/PM+u2lvU2AWuDmZFDwFZIHWuogUocf2JXiyPAi5C67If5CrAZUn+0ZsZywDZIPzWtDoxF+PSrJxqjbwLrIF1zwsHROH/Cmxo+HNWmz8w0D1VizGU76J8Enof0zYYcHIr8aNRkoQj0gLap0RqI+bWDwdxIcZnnRKN/OOLR1DvVg2WgG7T3VbNyOPKsnZFuqRLxaxf9sBx70BY9d3go4hSmDIojy/mwMToQ1YrdoRqNa8XktHNgMMbP+255KPImzqpWZSzGXK2qYiniEX9Lbyzm1DfUqoVDwA7Q93MkVUXSZAqJjcd9LCqUyGPho2gyjYNLCYmHROGknmQGZxVcGYmK4w6ijsRjEYWDvQomUrgdY5pivciKXSIr9oohsU/sEX1Y4jXxutgvCiIr+sTedm05oW9R53ab511aSCwqHCF/uru1taN3Ur3t2FdO3XmguvmIZ7nsJzkBAmbayO3J/i/Nf7ehw3FdnHvr2tpL8xx+3Hz1W/qifl2/pd/QFzoI/Vd9QV/Qb5DDxaWOZBaJg4ckSDhI
@matthewcrist
matthewcrist / gist:2353575
Created April 10, 2012 18:40
CSS3 translate3d for WebKit
selector {
-webkit-transform: translate3d(0,0,0);
}
@matthewcrist
matthewcrist / breakpoint-example.html
Created April 3, 2012 20:00 — forked from stonehippo/breakpoint-example.html
Targeting tablets with media queries, but not tripping those queries on the desktop
<!-- The breakpoint widths below are from a specific client project and probably should be moved to standard 320/460/768 breakpoints in other usage -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<style>
body {color: #333; background-color: #eee; font-family: 'Georgia';}
.hidden { display: none; text-indent: 3em;}
@media screen and (max-width: 653px) {
@matthewcrist
matthewcrist / gist:2237382
Created March 29, 2012 13:15
Font Face
@font-face {
font-family: 'adelle';
src: url('adelle.eot');
src: url('adelle.eot?#iefix') format('embedded-opentype'), url('adelle.woff') format('woff'), url('adelle.ttf') format('truetype'), url('adelle.svg#Adelle') format('svg');
font-weight: 300;
font-style: normal;
}
@matthewcrist
matthewcrist / box-sizing-example.css
Created February 19, 2012 13:12
Box Sizing
* {
-webkit-box-sizing: border-box; /* Safari < 5.1, Chrome < 10 */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+/Safari5.1+/Chrome 10+ */
}
@matthewcrist
matthewcrist / gist:1840862
Created February 16, 2012 01:53
WebKit Proprietary CSS Properties
-webkit-box-reflect
-webkit-text-stroke
-webkit-mask
-webkit-text-size-adjust
-webkit-tap-highlight-color
-webkit-text-fill-color