CSS Fonts

CSS Web Safe Font Combinations
https://www.w3schools.com/cssref/css_websafe_fonts.asp

CSS Font Stack
https://www.cssfontstack.com

15 Best Web Safe Fonts

15 Best Web Safe Fonts

32 Gorgeous Web Safe Fonts to Use with CSS

32 Gorgeous Web Safe Fonts to Use with CSS

Web Safe Alternative to Myriad Pro Font?
http://www.cufonfonts.com/font/myriad-pro
https://graphicdesign.stackexchange.com/questions/350/web-safe-alternative-to-myriad-pro-font

CSS Animation Examples

16 top CSS animation examples
https://www.creativebloq.com/inspiration/css-animation-examples

10 Examples of Animation on CodePen You Can Learn From
https://webdesign.tutsplus.com/articles/10-examples-of-animation-on-codepen-you-can-learn-from–cms-28244

A Collection of Pure CSS Animation Snippets & Demos
https://envato.com/blog/pure-css-animation-snippets/

50 Best Creative CSS3 Animation Examples in 2018
https://dcrazed.net/css3-animation-examples/

CSS Arrows From CodePen
https://freebiesupply.com/blog/css-arrows/

Animista CSS Animations on demand
http://animista.net

CSS Animation To jQuery
https://jsfiddle.net/bh3f4/

SASS

Sass Style Guide
https://css-tricks.com/sass-style-guide/

Name Your SASS Variables Modularly
https://webdesign.tutsplus.com/articles/quick-tip-name-your-sass-variables-modularly–webdesign-13364

8 Tips to Help You Get the Best out of Sass
https://www.sitepoint.com/8-tips-help-get-best-sass/

분별 있고, 유지∙확장 가능한 Sass 작성을 위한 주관적인 스타일가이드.
https://sass-guidelin.es/ko/

CSS Triangles

CSS Triangles with :before and :after

div.tooltip {
    /* tooltip content styling in here; nothing to do with arrows */
}

/* shared with before and after */
div.tooltip:before, div.tooltip:after {
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    border: 10px solid transparent; /* arrow size */
}

/* these arrows will point up */

/* top-stacked, smaller arrow */
div.tooltip:before {
    border-bottom-color: #fff;  /* arrow color */

    /* positioning */
    position: absolute;
    top: -19px;
    left: 255px;
    z-index: 2;
}

/* arrow which acts as a background shadow */
div.tooltip:after {
    border-bottom-color: #333;  /* arrow color */

    /* positioning */
    position: absolute;
    top: -24px;
    left: 255px;
    z-index: 1;
}

https://davidwalsh.name/css-triangles

IE Bug

Absolute positioned anchor tag (with no text) not clickable in IE

{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-decoration: none; /* No underlines on the link */
    z-index: 10; /* Places the link above everything else in the div */
    background-color: #fff; /* Fix to make div clickable in IE */
    opacity: 0; /* Fix to make div clickable in IE */
    filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}
{
    background: transparent url('blank.gif') repeat 0 0;
}

absolute positioned anchor tag (with no text) not clickable in IE
clickable div in grid which is not a button