Skip to content

Instantly share code, notes, and snippets.

Avatar
💜
Kicking ass, taking names

R Nabors rachelnabors

💜
Kicking ass, taking names
View GitHub Profile
@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
@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 / index.html
Created Oct 30, 2012
A CodePen by Rachel Nabors.
View index.html
<div class="tuna"></div>
<p>Awwww yeah...</p>
@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 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
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 / 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 / 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;
}
View animationGDIRDU.md