Text overlapping

I’m trying to make this effect of text layers ordered in z depth which the top one (z depth = 2) is in fill color but the other two (z depth = 1, 0) are stroke only (see image below)

tried to do it by changing the paragraphs to position; relative, but it won’t stay in the same position across brake points (working on mac book pro, when clicking the ‘eye’ icon to review the design, the position changes accordingly.

any suggestions how can I make it work?
(I’m not experienced with embed external code)


Here is my site Read-Only: http://https://preview.webflow.com/preview/dorons-initial-project?utm_medium=preview_link&utm_source=designer&utm_content=dorons-initial-project&preview=8388ca069399ccfeebb84275a77e7f58&mode=preview

Thank you,
Doron

Hi,

I’ve just had a look at this and solved it. What I did was:

  1. Delete the text to start over

  2. Add a div block into the section, with Flex layout & both Align & Justify set to start

  3. Add a text block or heading and create your top layer of text with the blue fill with position on text set to absolute (also is there any particular reason you were using the paragraph tool to add in what looked like a heading?)

  4. Copy & paste the first text block, add a subclass to it called stroke or something, and apply your blue outline. Set position to absolute, and under spacing apply both a top & left padding of about 4 pixels to achieve your desired effect.

  5. Copy & paste the second text block you just made for the third & final bottom later. Add another subclass to this final layer, called bottom or something, and then change the top & left padding to double whatever you set the middle one as, in this case 8.

  6. Now just make sure in the navigator they are set up in the right order. In terms of how webflow layers things it tends to do things backwards, so whatever is lower down in the navigator menu will show at the top. Therefore you want to layer it like this:

Div Block>
Bottom text outline
Middle text outline
Top Text

Hope this helps, the problem simply lies with how you’ve tried to get about setting it up and your positioning parameters. When making a site it’s important to get this kind of thing right first time otherwise it can cause all kinds of problems for your website down the line, particular with other devices such as mobile. There are plenty of really good tutorials on youtube showing the basics for things like this so it may be worth while having a look to help you get to grips with how to structure and position things.

If you have any problems just let me know!

Good luck

@ cccurtis
Hey,
Thank you, did that and it works perfectly!
I actually took this (self) project in order to test and learn how to work with the platform.
I do have a minor experience with CSS and HTML and I’m watching lots of the tutorials webflow has to offer however it is still very hard to find the most proper tutorial to meet your particular needs tho.

Thank you for your detailed guidance & help,
Very much appreciated.

1 Like