#OUTLINE FONT CODE#
Please note that this JS code does not have to be part of the page where you display the CSS stroke text. Run this function with steps=16 and you will get the CSS value for the text-shadow property. To calculate the offsets of the shadows we use the polar coordinates formulas: Intuition says that we should spread them evenly on a circle with a radius equal to the width of the text stroke.
#OUTLINE FONT HOW TO#
If we add more shadows to our text, we need to figure out how to shift those shadows around our text to cover all the gaps in the text outline. This is a “Definitive Guide to Stroke Text” after all, so we need to be thorough. Hang on to your hats kids and take out your math notebooks. We see some breaks in the text stroke because we are only using 4 shadows that we shift on 4 directions. If you start playing around with this and change the thickness of the text stroke you will notice that for larger values, something is wrong at the corner of the letters.
In the text-shadow property, I’ve made use of the CSS calc function to allow me to multiply the text stroke width by -1 for the up and left shadow directions. This allows making changes only in one place if we were to modify the color or the width of the text stroke. Then in the text shadow we use those variables.
The -stroke-color variable stores the color for the text stroke and -stroke-width stores the width of the stroke. Offset the 4 shadows by 1px up, left, down and right. So, let’s make a white on white text and add 4 red shadows to it. CSS allows adding multiple shadows to a text element via the property text-shadow. Just to give you a hint of what you can create with this text stroke CSS property, here’s my Cyber Space text effect part of the 80s fonts text effects gallery.Īnother method to outline text in CSS is by using shadows. Was briefly included in a spec as the text-outline property, but this was removed. It’s not supported on all browsers and according to : this property does not yet appear in any W3C specification. This is a non-standard feature, so not something you can rely 100%. You can use this to stroke text in CSS on all Webkit based browsers (like Chrome or Edge) and Firefox too. You can change this to get thicker outline text or a thinner outline, depending on what effect you want to obtain. Then, the -webkit-text-stroke property adds a black outline stroke 5px thick. Pretty straight forward, we make the text transparent – though this is not necessary, but I only want to the outline of the text to be visible and not the body of the letters. Enter fullscreen mode Exit fullscreen mode
0 kommentar(er)
