Skip to content

Instantly share code, notes, and snippets.

ɥɔɐ⅂ ɐɥɔsɐS voodoocode

View GitHub Profile
View _helpers.scss
/* shorthand for breakpoints. names as proposed by chris coyier (css-tricks) */
@mixin breakpoint($point) {
@if $point == papa-bear {
@media (min-width: 980px) {
@content;
}
} @else if $point == mama-bear {
@media (max-width: 979px) {
@content;
}
@voodoocode
voodoocode / _helpers.scss
Created Aug 22, 2013
box shadow as border. uses inset, so you border can be used dditionally
View _helpers.scss
/* a box shadow that looks like a border. control border strength with $spread. */
@mixin box-shadow-as-border($spread, $r, $g, $b, $a) {
-webkit-box-shadow: inset 0 0 1px $spread rgba($r, $g, $b, $a);
-moz-box-shadow: inset 0 0 1px $spread rgba($r, $g, $b, $a);
box-shadow: 0 0 1px $spread rgba($r, $g, $b, $a) inset;
}
@voodoocode
voodoocode / _helpers.scss
Created Aug 22, 2013
flip an image horizontal
View _helpers.scss
@mixin flip {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
@voodoocode
voodoocode / _helpers.scss
Created Aug 22, 2013
scss mixin for a vertical gradient with 3 steps
View _helpers.scss
@mixin vertical-3stop-gradient($fromColor, $viaColor, $toColor) {
background: #fff; /* Old browsers */
background: -moz-linear-gradient(top, $fromColor 0%, $toColor 49%, $viaColor 50%, $toColor 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $fromColor), color-stop(49%, $toColor), color-stop(50%, $viaColor), color-stop(100%, $toColor)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, $fromColor 0%, $toColor 49%, $viaColor 50%, $toColor 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, $fromColor 0%, $toColor 49%, $viaColor 50%, $toColor 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, $fromColor 0%, $toColor 49%, $viaColor 50%, $toColor 100%); /* IE10+ */
background: linear-gradient(to bottom, $fromColor 0%, $toColor 49%, $viaColor 50%, $toColor 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#{ie-hex-str($fromColor)}', endColorstr='
You can’t perform that action at this time.