CSS
Pure Scss Slideshow
The performance of this snippet is not great in chrome, but nonetheless…
Here you go!
gist | codepen |
Pure CSS Animated Squiggle Underline
Probably not a great use of my time. Anyways…
Hover over me
CSS Border-Style Animation
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:
CSS Hack: Fixed Width-To-Height Ratio
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
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
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?
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
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
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
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
.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;
}