Skip to content

Instantly share code, notes, and snippets.

View rachelnabors's full-sized avatar
💜
Kicking ass, taking names

R L Nabors rachelnabors

💜
Kicking ass, taking names
1.1k followers · 8 following
View GitHub Profile
@rachelnabors
rachelnabors / solid-anim.md
Last active June 30, 2024 02:52
Solid.js Animations glossary
  • useMatcher identifies an animated element throughout addition and removal from the DOM, not unlike key in React —probably needs a better name!
  • zombie elements are elements that will be removed after their exist animation plays. Implementation
  • use:* is a custom directive that can attach multiple directives (effects, signals) to a single element after render, before addition to DOM implementation
@rachelnabors
rachelnabors / animationGDIRDU.md
Last active August 29, 2015 14:13
@rachelnabors
rachelnabors / gist:8049099
Created December 20, 2013 01:27
A Sass/Compass mixin I built for The Black Brick Road's latest installment.
// 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 August 10, 2013 05:22
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.
if (documents.length > 0)
{
var docRef = activeDocument;
var activeLayer = docRef.activeLayer;
numLayers = docRef.artLayers.length;
var rows = numLayers;
@rachelnabors
rachelnabors / index.html
Last active December 12, 2015 03:39
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!
<h1>Hello!</h1>
@rachelnabors
rachelnabors / index.html
Created November 12, 2012 00:08
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.
<div class="foreground"></div>
<div class="midground">
<div class="tuna"></div>
</div>
<div class="background">
</div>
@rachelnabors
rachelnabors / index.html
Created November 7, 2012 02:53
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
<div id="tuna"></div>
@rachelnabors
rachelnabors / index.html
Created October 30, 2012 01:31
A CodePen by Rachel Nabors.
<div class="tuna"></div>
<p>Awwww yeah...</p>
@rachelnabors
rachelnabors / sassy-extend.scss
Created May 15, 2012 14:46
How I use Sass's @extend withing @media directives
@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 17:21
Comic markup/microformat ideas
***
Format:
***
Comic
panel (scene)
-description*
person/thing/offscreen
-dialog/soundeffect
caption/narration