Skip to content

Instantly share code, notes, and snippets.

Rachel Nabors rachelnabors

Block or report user

Report or block rachelnabors

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View animationGDIRDU.md
@rachelnabors
rachelnabors / gist:8049099
Created Dec 20, 2013
A Sass/Compass mixin I built for The Black Brick Road's latest installment.
View gist:8049099
// All the little mixins that will go into one BIG mixin.
// Hey, might need them!
@mixin set-dimensions($width, $height, $parent-width) {
@include background-size(100% auto);
width: percentage($width/$parent-width);
padding-top: percentage($height/$parent-width);
height: 0;
}
@rachelnabors
rachelnabors / Layers-to-Spritesheet Photoshop Script
Created Aug 10, 2013
A Photoshop CS5 script for making sprites out of a pile of layers :D Assumes that the top layer is the first frame, bottom is the last. Based on this one: http://www.garagegames.com/community/blogs/view/11527 I just like my sprites to run vertically. I'm weird like that.
View Layers-to-Spritesheet Photoshop Script
if (documents.length > 0)
{
var docRef = activeDocument;
var activeLayer = docRef.activeLayer;
numLayers = docRef.artLayers.length;
var rows = numLayers;
@rachelnabors
rachelnabors / index.html
Last active Dec 12, 2015
A CodePen by Rachel Nabors. Text Clipping Sass mixin - Based on Divya Manian's pure CSS background clipping solution. Now you can clip text to your heart's content without fear of disappearing text in non-webkit browsers!
View index.html
<h1>Hello!</h1>
@rachelnabors
rachelnabors / index.html
Created Nov 12, 2012
A CodePen by Rachel Nabors. Parallax backgrounds with walk cycle - Multiple background images with CSS3 animation create a multi-depth parallax affect. This is what parallax was meant for.
View index.html
<div class="foreground"></div>
<div class="midground">
<div class="tuna"></div>
</div>
<div class="background">
</div>
@rachelnabors
rachelnabors / index.html
Created Nov 7, 2012
A CodePen by Rachel Nabors. Cat walk + sit w/ animation delay - So walk-cycles are pretty easy. Use steps() in your CSS3 and impress your friends. So what about doing something with the end of that loop? Here I use animation-delay to play a second, sittin
View index.html
<div id="tuna"></div>
@rachelnabors
rachelnabors / index.html
Created Oct 30, 2012
A CodePen by Rachel Nabors.
View index.html
<div class="tuna"></div>
<p>Awwww yeah...</p>
@rachelnabors
rachelnabors / sassy-extend.scss
Created May 15, 2012
How I use Sass's @extend withing @media directives
View sassy-extend.scss
@media screen {
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/* For image replacement */
.ir {
text-indent: 100%;
white-space: nowrap;
@rachelnabors
rachelnabors / comicFormat
Created May 9, 2012
Comic markup/microformat ideas
View comicFormat
***
Format:
***
Comic
panel (scene)
-description*
person/thing/offscreen
-dialog/soundeffect
caption/narration
You can’t perform that action at this time.