<p class="outline">After careful consideration, I’ve decided not to endorse your park.</p>
<!-- Sources & info
https://css-tricks.com/almanac/properties/t/text-stroke/
https://caniuse.com/text-stroke
-->
* {
border: 0;
margin: 0;
padding: 0;
}
::selection {
background: #28223b;
}
html {
min-height: 100%;
}
body {
background: #28223b
url(https://images.unsplash.com/photo-1475139441338-693e7dbe20b6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3269&q=80)
no-repeat center center;
background-size: cover;
color: #fff;
font-family: Arial;
min-height: 100%;
padding: 50px;
}
body::before {
content: "";
background: #070411;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.66;
z-index: -1;
}
p.outline {
/* Fallback text color */
color: #fff;
/* Firefox, Chrome, Edge and Safari all support --webkit-text-stroke and --webkit-text-fill-color */
-webkit-text-stroke: 0.025em #fff;
-webkit-text-fill-color: transparent;
font-size: 5rem;
font-weight: bold;
}
p.outline::selection {
-webkit-text-fill-color: #fff;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.