Changing svg color using css filter

css

If you display svg icons using CSS background rule, one problem is that you can not change the fill color of the icon in CSS. This is now possible using CSS filter property. Simply use following tool to generate a filter rule for your desired color:

https://isotropic.co/tool/hex-color-to-css-filter/

Here is an example of displaying a black svg icon in red:

li::before {
    display: inline-block;
    content: "";
    background-image: url(../icons/caret-right-fill.svg);
    vertical-align: -.125em;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    width: 1em;
    height: 1em;
    filter: invert(16%) sepia(100%) saturate(6866%) hue-rotate(6deg) brightness(110%) contrast(123%);
}

Animated loader in CSS

css

Add animated loading icon to any HTML element by adding a "loading" class and the following css rules:

.loading::before {
    content: ' ';
    width: 1em;
    height: 1em;
    border: 0.2em solid #999;
    border-top-color: transparent;
    border-radius: 50%;
    animation: loadingspin 1s linear infinite;
}
    
@keyframes loadingspin {
    100% {
        transform: rotate(360deg)
    }
}

Demo on codepen

Tips of day

css

Various development tips from work today...

CSS best practices

css
  • When animating elements in CSS use opacity and transform properties only. This not only improves performance of your animation, but also avoids triggering layout shifts and repaints. https://web.dev/articles/animations-guide
  • Comment any rule that its purpose is not obvious.
  • Use content: none; to hide pseudo elements (::before, ::after) rather than display: none;.
  • Avoid "!important". If you have to use it, add comment to explain why.
  • Avoid negative margins. If you have to use them, add comment to explain why.
  • To target the first x children of an element, use :nth-child(-n + x).
  • To remove hover underline from a::before set a::before's display to inline-block.
  • Do not use css to hide elements and instead use HTML5 attribute "hidden".
  • Use -webkit-overflow-scrolling: touch; to apply momenutum-based scrolling to an element on touch devices. Read more
  • Check browser support before using new css properties.