Outer Stroke

Developer
Joey Hoer
Size
5,119 Kb
Views
16,192
  1. Outer Stroke Previews
  2. Outer Stroke HTML Codes
  3. Outer Stroke CSS Codes

How do I make an outer stroke?

A SCSS mixin to generate an outer stroke focused on producting optimized CSS that offers the best visual results. What is a outer stroke? How do you make a outer stroke? This script and codes were developed by Joey Hoer on 25 November 2022, Friday.

Outer Stroke Previews
IQ Test

Outer Stroke - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Outer Stroke</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ h1 { font-size: 3em; text-shadow: 4.20627px 2.7032px white, 2.07708px 4.54816px white, -0.71157px 4.94911px white, -3.2743px 3.77875px white, -4.79746px 1.40866px white, -4.79746px -1.40866px white, -3.2743px -3.77875px white, -0.71157px -4.94911px white, 2.07708px -4.54816px white, 4.20627px -2.7032px white, 5px 0px white, 5.40581px 2.6033px 2px white, 3.74094px 4.69099px 2px white, 1.33513px 5.84957px 2px white, -1.33513px 5.84957px 2px white, -3.74094px 4.69099px 2px white, -5.40581px 2.6033px 2px white, -6px 0px 2px white, -5.40581px -2.6033px 2px white, -3.74094px -4.69099px 2px white, -1.33513px -5.84957px 2px white, 1.33513px -5.84957px 2px white, 3.74094px -4.69099px 2px white, 5.40581px -2.6033px 2px white, 6px 0px 2px white, 4.20627px 2.7032px red, 2.07708px 4.54816px red, -0.71157px 4.94911px red, -3.2743px 3.77875px red, -4.79746px 1.40866px red, -4.79746px -1.40866px red, -3.2743px -3.77875px red, -0.71157px -4.94911px red, 2.07708px -4.54816px red, 4.20627px -2.7032px red, 5px 0px red, 8.55951px 2.78115px 2px red, 7.28115px 5.29007px 2px red, 5.29007px 7.28115px 2px red, 2.78115px 8.55951px 2px red, 0px 9px 2px red, -2.78115px 8.55951px 2px red, -5.29007px 7.28115px 2px red, -7.28115px 5.29007px 2px red, -8.55951px 2.78115px 2px red, -9px 0px 2px red, -8.55951px -2.78115px 2px red, -7.28115px -5.29007px 2px red, -5.29007px -7.28115px 2px red, -2.78115px -8.55951px 2px red, 0px -9px 2px red, 2.78115px -8.55951px 2px red, 5.29007px -7.28115px 2px red, 7.28115px -5.29007px 2px red, 8.55951px -2.78115px 2px red, 9px 0px 2px red, 4.20627px 2.7032px white, 2.07708px 4.54816px white, -0.71157px 4.94911px white, -3.2743px 3.77875px white, -4.79746px 1.40866px white, -4.79746px -1.40866px white, -3.2743px -3.77875px white, -0.71157px -4.94911px white, 2.07708px -4.54816px white, 4.20627px -2.7032px white, 5px 0px white, 9.59493px 2.81733px white, 8.41254px 5.40641px white, 6.54861px 7.5575px white, 4.15415px 9.09632px white, 1.42315px 9.89821px white, -1.42315px 9.89821px white, -4.15415px 9.09632px white, -6.54861px 7.5575px white, -8.41254px 5.40641px white, -9.59493px 2.81733px white, -10px 0px white, -9.59493px -2.81733px white, -8.41254px -5.40641px white, -6.54861px -7.5575px white, -4.15415px -9.09632px white, -1.42315px -9.89821px white, 1.42315px -9.89821px white, 4.15415px -9.09632px white, 6.54861px -7.5575px white, 8.41254px -5.40641px white, 9.59493px -2.81733px white, 10px 0px white, 11.6513px 2.87179px 2px white, 10.62547px 5.57668px 2px white, 8.98213px 7.95747px 2px white, 6.81678px 9.87581px 2px white, 4.25526px 11.22019px 2px white, 1.44644px 11.91251px 2px white, -1.44644px 11.91251px 2px white, -4.25526px 11.22019px 2px white, -6.81678px 9.87581px 2px white, -8.98213px 7.95747px 2px white, -10.62547px 5.57668px 2px white, -11.6513px 2.87179px 2px white, -12px 0px 2px white, -11.6513px -2.87179px 2px white, -10.62547px -5.57668px 2px white, -8.98213px -7.95747px 2px white, -6.81678px -9.87581px 2px white, -4.25526px -11.22019px 2px white, -1.44644px -11.91251px 2px white, 1.44644px -11.91251px 2px white, 4.25526px -11.22019px 2px white, 6.81678px -9.87581px 2px white, 8.98213px -7.95747px 2px white, 10.62547px -5.57668px 2px white, 11.6513px -2.87179px 2px white, 12px 0px 2px white; margin: 0;
}
h2 { font-size: 1.25em; text-shadow: 3.23607px 2.35114px 2px white, 1.23607px 3.80423px 2px white, -1.23607px 3.80423px 2px white, -3.23607px 2.35114px 2px white, -4px 0px 2px white, -3.23607px -2.35114px 2px white, -1.23607px -3.80423px 2px white, 1.23607px -3.80423px 2px white, 3.23607px -2.35114px 2px white, 4px 0px 2px white, 4.20627px 2.7032px red, 2.07708px 4.54816px red, -0.71157px 4.94911px red, -3.2743px 3.77875px red, -4.79746px 1.40866px red, -4.79746px -1.40866px red, -3.2743px -3.77875px red, -0.71157px -4.94911px red, 2.07708px -4.54816px red, 4.20627px -2.7032px red, 5px 0px red, 7.51754px 2.73616px 2px red, 6.12836px 5.1423px 2px red, 4px 6.9282px 2px red, 1.38919px 7.87846px 2px red, -1.38919px 7.87846px 2px red, -4px 6.9282px 2px red, -6.12836px 5.1423px 2px red, -7.51754px 2.73616px 2px red, -8px 0px 2px red, -7.51754px -2.73616px 2px red, -6.12836px -5.1423px 2px red, -4px -6.9282px 2px red, -1.38919px -7.87846px 2px red, 1.38919px -7.87846px 2px red, 4px -6.9282px 2px red, 6.12836px -5.1423px 2px red, 7.51754px -2.73616px 2px red, 8px 0px 2px red, 4.20627px 2.7032px white, 2.07708px 4.54816px white, -0.71157px 4.94911px white, -3.2743px 3.77875px white, -4.79746px 1.40866px white, -4.79746px -1.40866px white, -3.2743px -3.77875px white, -0.71157px -4.94911px white, 2.07708px -4.54816px white, 4.20627px -2.7032px white, 5px 0px white, 9.59493px 2.81733px 2px white, 8.41254px 5.40641px 2px white, 6.54861px 7.5575px 2px white, 4.15415px 9.09632px 2px white, 1.42315px 9.89821px 2px white, -1.42315px 9.89821px 2px white, -4.15415px 9.09632px 2px white, -6.54861px 7.5575px 2px white, -8.41254px 5.40641px 2px white, -9.59493px 2.81733px 2px white, -10px 0px 2px white, -9.59493px -2.81733px 2px white, -8.41254px -5.40641px 2px white, -6.54861px -7.5575px 2px white, -4.15415px -9.09632px 2px white, -1.42315px -9.89821px 2px white, 1.42315px -9.89821px 2px white, 4.15415px -9.09632px 2px white, 6.54861px -7.5575px 2px white, 8.41254px -5.40641px 2px white, 9.59493px -2.81733px 2px white, 10px 0px 2px white;
}
body { background: red; color: red;
}
/*/ Test Different Font Family
h1, h2 { font-family: serif; font-weight: 500;
}
//*/
/*/ Patterned Background
body { background-color: red; background-image: linear-gradient( 45deg, rgba(white, 0.25) 50%, rgba(white, 0) 50% ); background-size: 0.5em 0.5em; background-position: 50%;
}
//*/
body { text-align: center;
}
:root { height: 100%; display: flex;
}
:root > * { margin: auto;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Outer Stroke</h1>
<h2>With Text Shadow</h2>
</body>
</html>

Outer Stroke - Script Codes CSS Codes

h1 { font-size: 3em; text-shadow: 4.20627px 2.7032px white, 2.07708px 4.54816px white, -0.71157px 4.94911px white, -3.2743px 3.77875px white, -4.79746px 1.40866px white, -4.79746px -1.40866px white, -3.2743px -3.77875px white, -0.71157px -4.94911px white, 2.07708px -4.54816px white, 4.20627px -2.7032px white, 5px 0px white, 5.40581px 2.6033px 2px white, 3.74094px 4.69099px 2px white, 1.33513px 5.84957px 2px white, -1.33513px 5.84957px 2px white, -3.74094px 4.69099px 2px white, -5.40581px 2.6033px 2px white, -6px 0px 2px white, -5.40581px -2.6033px 2px white, -3.74094px -4.69099px 2px white, -1.33513px -5.84957px 2px white, 1.33513px -5.84957px 2px white, 3.74094px -4.69099px 2px white, 5.40581px -2.6033px 2px white, 6px 0px 2px white, 4.20627px 2.7032px red, 2.07708px 4.54816px red, -0.71157px 4.94911px red, -3.2743px 3.77875px red, -4.79746px 1.40866px red, -4.79746px -1.40866px red, -3.2743px -3.77875px red, -0.71157px -4.94911px red, 2.07708px -4.54816px red, 4.20627px -2.7032px red, 5px 0px red, 8.55951px 2.78115px 2px red, 7.28115px 5.29007px 2px red, 5.29007px 7.28115px 2px red, 2.78115px 8.55951px 2px red, 0px 9px 2px red, -2.78115px 8.55951px 2px red, -5.29007px 7.28115px 2px red, -7.28115px 5.29007px 2px red, -8.55951px 2.78115px 2px red, -9px 0px 2px red, -8.55951px -2.78115px 2px red, -7.28115px -5.29007px 2px red, -5.29007px -7.28115px 2px red, -2.78115px -8.55951px 2px red, 0px -9px 2px red, 2.78115px -8.55951px 2px red, 5.29007px -7.28115px 2px red, 7.28115px -5.29007px 2px red, 8.55951px -2.78115px 2px red, 9px 0px 2px red, 4.20627px 2.7032px white, 2.07708px 4.54816px white, -0.71157px 4.94911px white, -3.2743px 3.77875px white, -4.79746px 1.40866px white, -4.79746px -1.40866px white, -3.2743px -3.77875px white, -0.71157px -4.94911px white, 2.07708px -4.54816px white, 4.20627px -2.7032px white, 5px 0px white, 9.59493px 2.81733px white, 8.41254px 5.40641px white, 6.54861px 7.5575px white, 4.15415px 9.09632px white, 1.42315px 9.89821px white, -1.42315px 9.89821px white, -4.15415px 9.09632px white, -6.54861px 7.5575px white, -8.41254px 5.40641px white, -9.59493px 2.81733px white, -10px 0px white, -9.59493px -2.81733px white, -8.41254px -5.40641px white, -6.54861px -7.5575px white, -4.15415px -9.09632px white, -1.42315px -9.89821px white, 1.42315px -9.89821px white, 4.15415px -9.09632px white, 6.54861px -7.5575px white, 8.41254px -5.40641px white, 9.59493px -2.81733px white, 10px 0px white, 11.6513px 2.87179px 2px white, 10.62547px 5.57668px 2px white, 8.98213px 7.95747px 2px white, 6.81678px 9.87581px 2px white, 4.25526px 11.22019px 2px white, 1.44644px 11.91251px 2px white, -1.44644px 11.91251px 2px white, -4.25526px 11.22019px 2px white, -6.81678px 9.87581px 2px white, -8.98213px 7.95747px 2px white, -10.62547px 5.57668px 2px white, -11.6513px 2.87179px 2px white, -12px 0px 2px white, -11.6513px -2.87179px 2px white, -10.62547px -5.57668px 2px white, -8.98213px -7.95747px 2px white, -6.81678px -9.87581px 2px white, -4.25526px -11.22019px 2px white, -1.44644px -11.91251px 2px white, 1.44644px -11.91251px 2px white, 4.25526px -11.22019px 2px white, 6.81678px -9.87581px 2px white, 8.98213px -7.95747px 2px white, 10.62547px -5.57668px 2px white, 11.6513px -2.87179px 2px white, 12px 0px 2px white; margin: 0;
}
h2 { font-size: 1.25em; text-shadow: 3.23607px 2.35114px 2px white, 1.23607px 3.80423px 2px white, -1.23607px 3.80423px 2px white, -3.23607px 2.35114px 2px white, -4px 0px 2px white, -3.23607px -2.35114px 2px white, -1.23607px -3.80423px 2px white, 1.23607px -3.80423px 2px white, 3.23607px -2.35114px 2px white, 4px 0px 2px white, 4.20627px 2.7032px red, 2.07708px 4.54816px red, -0.71157px 4.94911px red, -3.2743px 3.77875px red, -4.79746px 1.40866px red, -4.79746px -1.40866px red, -3.2743px -3.77875px red, -0.71157px -4.94911px red, 2.07708px -4.54816px red, 4.20627px -2.7032px red, 5px 0px red, 7.51754px 2.73616px 2px red, 6.12836px 5.1423px 2px red, 4px 6.9282px 2px red, 1.38919px 7.87846px 2px red, -1.38919px 7.87846px 2px red, -4px 6.9282px 2px red, -6.12836px 5.1423px 2px red, -7.51754px 2.73616px 2px red, -8px 0px 2px red, -7.51754px -2.73616px 2px red, -6.12836px -5.1423px 2px red, -4px -6.9282px 2px red, -1.38919px -7.87846px 2px red, 1.38919px -7.87846px 2px red, 4px -6.9282px 2px red, 6.12836px -5.1423px 2px red, 7.51754px -2.73616px 2px red, 8px 0px 2px red, 4.20627px 2.7032px white, 2.07708px 4.54816px white, -0.71157px 4.94911px white, -3.2743px 3.77875px white, -4.79746px 1.40866px white, -4.79746px -1.40866px white, -3.2743px -3.77875px white, -0.71157px -4.94911px white, 2.07708px -4.54816px white, 4.20627px -2.7032px white, 5px 0px white, 9.59493px 2.81733px 2px white, 8.41254px 5.40641px 2px white, 6.54861px 7.5575px 2px white, 4.15415px 9.09632px 2px white, 1.42315px 9.89821px 2px white, -1.42315px 9.89821px 2px white, -4.15415px 9.09632px 2px white, -6.54861px 7.5575px 2px white, -8.41254px 5.40641px 2px white, -9.59493px 2.81733px 2px white, -10px 0px 2px white, -9.59493px -2.81733px 2px white, -8.41254px -5.40641px 2px white, -6.54861px -7.5575px 2px white, -4.15415px -9.09632px 2px white, -1.42315px -9.89821px 2px white, 1.42315px -9.89821px 2px white, 4.15415px -9.09632px 2px white, 6.54861px -7.5575px 2px white, 8.41254px -5.40641px 2px white, 9.59493px -2.81733px 2px white, 10px 0px 2px white;
}
body { background: red; color: red;
}
/*/ Test Different Font Family
h1, h2 { font-family: serif; font-weight: 500;
}
//*/
/*/ Patterned Background
body { background-color: red; background-image: linear-gradient( 45deg, rgba(white, 0.25) 50%, rgba(white, 0) 50% ); background-size: 0.5em 0.5em; background-position: 50%;
}
//*/
body { text-align: center;
}
:root { height: 100%; display: flex;
}
:root > * { margin: auto;
}
Outer Stroke - Script Codes
Outer Stroke - Script Codes
Home Page Home
Developer Joey Hoer
Username joeyhoer
Uploaded November 25, 2022
Rating 3
Size 5,119 Kb
Views 16,192
Do you need developer help for Outer Stroke?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joey Hoer (joeyhoer) Script Codes
Name
HR Department
Object-fit and object-position
SCSS Star Badges
Mirrored Background
Flexible Rounded Hexagons
CSS Preloader Animations
Shift
Halftone
SVG Faux-Conical Gradient
Admit Two
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!