CSS

Pure Scss Slideshow

css

The performance of this snippet is not great in chrome, but nonetheless…

Here you go!

Pure CSS Animated Squiggle Underline

animation css

Probably not a great use of my time. Anyways…

CSS Border-Style Animation

animation css

You can’t use CSS to animate between a solid and a dotted border style, which makes sense because the change is non-numerical. But you can use CSS to achieve the following effect:

Double Slider Widget

css javascript

CSS Hack: Fixed Width-To-Height Ratio

css

Somehow I only just heard about this hack. But now it seems so obvious!

Set a fixed width-to-height ratio on a css element by including a tiny img in that element and setting the image’s width to 100%.

If my image is 10 pixels wide and 5 pixels high, the element that contains it will also maintain that 2:1 ratio!

Transition-Timing-Function

css

So, obviously

transition: all 1s ease;

and

transition: all 1s linear;

but did you know

transition: all 1s cubic-bezier(0.42,0,0.58,1);

???

Cross-Browser Custom Dropdown

css

I’ve read a number of recommendations for customizing the appearance of dropdowns. This is the closest I’ve come to finding a cross-browser solution:

Bug in Vertical Alignment?

css

I was having trouble applying styles to inline-block elements such that they are rendered consistently across browsers (incl. the latest versions of Firefox, Chrome and Safari). It turns out that they have different default values for vertical-align.

To fix this issue, make sure you normalize this value, e.g.:

vertical-align: bottom;

Prevent Text Selection

css

utility class:

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

scss mixin:

@mixin noselect() {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.item { @include noselect(); }

from SO

SCSS Mixin For @font-face

css

define it

@mixin font-face($fontname){
  $filepath: "fonts/" + $fontname + "/" + $fontname;
  @font-face {
    font-family: $fontname;
    src: url($filepath + ".eot");
    src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf") format('truetype'), url($filepath + ".svg#" + $fontname + "") format('svg');
  }
}

use it

$font1: helvetica;
@include font-face($font1);
p{ font-family: $font1; };

Compile SCSS Automatically On Request w/ PHP

css

I just started playing with SCSS. It didn’t take very long to learn and, so far, I love it.

There are loads of way to compile your SCSS to CSS to serve to the client. One of the easiest ways to get up and running, if you’re using php, is scssphp. The SCSS is compiled and returns plain CSS, every time a request is made by a client to your server for a page containing SCSS. (I don’t recommend this in production though.)

Texturized Text

css

.class {
 color: red;
 -webkit-text-fill-color: transparent;
 background: -webkit-linear-gradient(transparent, transparent),
             url(path/to/bg/image) repeat;
 background: -o-linear-gradient(transparent, transparent);
 -webkit-background-clip: text;
}