Skip to content

Instantly share code, notes, and snippets.

Avatar

Matthew Crist matthewcrist

View GitHub Profile
View gist:5397433
---
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 Mar 25, 2013
Add this to your application.js for the asset pipeline
View gist:5237803
//= require turbolinks
@matthewcrist
matthewcrist / Turbolinks
Last active Dec 15, 2015
Add this to your Gemfile
View Turbolinks
@matthewcrist
matthewcrist / index.html
Created Sep 11, 2012
Responsive vertical/horizontal image centering with CSS only
View index.html
<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
Example of Data URI Image in CSS
View data-uri.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 Apr 10, 2012
CSS3 translate3d for WebKit
View gist:2353575
selector {
-webkit-transform: translate3d(0,0,0);
}
@matthewcrist
matthewcrist / breakpoint-example.html
Created Apr 3, 2012 — forked from stonehippo/breakpoint-example.html
Targeting tablets with media queries, but not tripping those queries on the desktop
View breakpoint-example.html
<!-- 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) {
View gist:2237382
@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;
}
View box-sizing-example.css
* {
-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 Feb 16, 2012
WebKit Proprietary CSS Properties
View gist:1840862
-webkit-box-reflect
-webkit-text-stroke
-webkit-mask
-webkit-text-size-adjust
-webkit-tap-highlight-color
-webkit-text-fill-color