▼
Streaming live at 10am (PST)

How to make transparent text with an outline?

#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:

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!

How can i adding stroke to text "border"?!
#2

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/

#3

Thank you so much, this is a big help!

closed #4

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.