Streaming live at 10am (PST)

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


#1

Hello awesome people,

How can I do stroke for text when I use a border for text it just gives me a border to a container

Here’s an example:


#2

use text-shadow not box-shadow

Create 4 layers of shadows (all sides) + blur “0”

1/4 (0 deg)

2/4 (90 deg)

image

3/4 (180 deg)

4 /4 (270 deg)

Result

The idea from her:

transperent issue:

** Note: The text is not transperent (You must use text color for this trick- white in this example).
How to solve this? only by custom CSS code.


#3

Still, have a problem when I do it here :frowning:


#4

Hi,

Please Add live URL.


#5

http://ahmedemad.webflow.io , if you checked about page the style-text okay there but in home page i need it to be over the image and shown it.


#6

In the about page use my trick (Black text with white outline).

homepage you must add custom code for transperent outline (See the links I added above).

“MIX”
If you want to use the same styles from “about” -
A very fast trick is to add custom-code for blendmodes

<style>
.italic-text-5{
     mix-blend-mode: screen;
}
</style>

** out of topic - change “italic-text-5” to more semantic name (“outline-text” and so on)


#7

Thanks bro :heart:
" I wanna “More” on all screen start like that cutting from the half at end of the screen to make users scroll down to see what happened there.
Can You help me with this problem too,



#8

Ask again - I don’t understand the problem.

If you want “is more” to be “cut” always at the bottom.

Create one div for “less” + height: 100 vh (or 95) - next, create second div for “is more” (Use some small negative margin for the overlap). Should work fine

One more option is by position absolute (but by vh its easier)


#9

yes that what i talk about, will try it and get back to you


#10

http://ahmedemad.webflow.io/
I did what you say but doesn’t work


#11

looks fine :slight_smile: if not please add illustration of the problem (screenshot with arrows).