Danya Lette

CSS

Feb 18, 2017

Pure Scss Slideshow

css

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

Here you go!

gist codepen

Oct 15, 2015

Pure CSS Animated Squiggle Underline

animation css

Probably not a great use of my time. Anyways…

Hover over me

Jul 22, 2015

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:

Feb 13, 2015

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!

Jan 10, 2015

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);

???

Jan 5, 2015

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:

Dec 16, 2014

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;

Dec 15, 2014

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

Sep 17, 2014

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; };

Sep 13, 2014

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.)

Jul 25, 2014

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;
}