Today I Learned - Rocky Kev

TIL CSS Text Stroke

POSTED ON:

TAGS: css

Creating a stroke around text is a challenging effect to do in CSS.
(By stroke, I'm referring to the outline around the text.)

The 'traditional' way to do it is through text-shadow. But you'll have to use a generator since it's difficult to just mentally do it in your head.

Text Stroke Generator (using text-shadow)
http://owumaro.github.io/text-stroke-generator/

But there's a better and cleaner way, that finally has the support of all the major browsers.

h1 {
  color: black;
  -webkit-text-fill-color: white; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

You need to append -webkit in front of it.

REFERENCE:
https://caniuse.com/text-stroke
https://css-tricks.com/adding-stroke-to-web-text/

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')