kristinlow
(Kristin Low)
January 14, 2018, 10:48am
1
Hi everyone,
I am trying to replicate the effect of having transparent text with an outline, like the “Trying to work” heading on this page here:
Find spaces to work online in Belfast, Dublin, and London city centre. For freelancers, remote workers and digital nomads
Can’t seem to figure out how to do this in Webflow. Has anyone done this before? Right now I am trying to use text shadows to create an outline, but then when I make the text transparent I can just see the colour of the shadow in its place.
Appreciate any help!
try adding HTML embed and paste this code inside.
<div><h1 class="fancyHeader">Hello <span class="fancy-stud-span">STUDIO</span></h1></div>
<style type="text/css">
.fancy-stud-span {
font-family: Arial ,sans-serif;
font-size: 4.5vw;
line-height: 5vw;
margin-top: 10px;
margin-bottom: 20px;
letter-spacing: -5px;
color: transparent;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #6b6b6b;
}
.fancyHeader {
font-family: 'Great Vibes', cursive;
font-size: 10vw;
line-height: 11vw;
margin-top: 10px;
margin-bottom: 20px;
color: transparent;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #6b6b6b;
}
.fancyHeader::selection {
color: #d30000;
background: 0 0;
-webkit-text-stroke: 0;
-webkit-text-fill-color: #474747;
}
.fancy-stud-span::selection {
color: #d30000;
background: 0 0;
-webkit-text-stroke: 0;
-webkit-text-fill-color: #474747;
}
.fancyHeader::-moz-selection {
color: #d30000;
background: 0 0;
-webkit-text-stroke: 0;
-webkit-text-fill-color: #474747;
}
.fancy-stud-span::-moz-selection {
color: #d30000;
background: 0 0;
-webkit-text-stroke: 0;
-webkit-text-fill-color: #474747;
}
</style>
You can see the preview on my scribble page here
http://kristaps-template.webflow.io/
4 Likes
kristinlow
(Kristin Low)
January 17, 2018, 8:43am
3
Thank you so much, this is a big help!
system
(system)
Closed
May 22, 2018, 8:48am
4
This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.