webkit-text-stroke cutting the stroke

user_9792929 0
Viewed 76

webkit-text-stroke is not working suitable, I would like to have the text stroke affect like that: enter image description here

but it appears like that without cutting: enter image description here

as you can seen when I write long Arabic Text like thet (ملاعــــــب) or (أهــــــــلاً) it is cutting the stroke like that: enter image description here

this is my code with cutting:

.myText {
    font-family: 'DIN Next LT Arabic';
    font-style: normal;
    font-weight: 500;
    font-size: 48px;
    line-height: 71px;
    /* identical to box height */
    
    display: flex;
    align-items: center;
    text-align: right;
    letter-spacing: -0.02em;
    
    color: #FFFFFF;
     -webkit-text-stroke-width: 2px;
     -webkit-text-stroke-color: #2A34BF;
    text-shadow: 2px 1.3px 0px #E34D32, 2px 2px 0px #D6F46B;
}

I also need a multi-layes shadow to be like that in the final result: enter image description here

css html
1 Answers

Finally, I have resolved it and reach the final result using web the text-shadow to make all the texts joined and with about 1px stroke method provided by @kameron

and to create the multi-layered shadow I have used filter and add the numbers of drop shadow I needed

this is the final result same as the final result I needed in the post:

.bg{
  background:#2A34C0;
  padding:20px;
}

.myText {
  font-family: 'DIN Next LT Arabic';
  font-style: normal;
  font-weight: 500;
  font-size: 90px;
  line-height: 71px;
  display: flex;
  align-items: center;
  text-align: right;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-shadow:
    0 0 1px #2A34C0,
    0 0 1px #2A34C0,
    0 0 1px #2A34C0,
    0 0 1px #2A34C0,
    0 0 1px #2A34C0,
    0 0 1px #2A34C0,
    0 0 1px #2A34C0,
    0 0 1px #2A34C0,
    0 0 1px #2A34C0,
    0 0 1px #2A34C0,
    0 0 1px #2A34C0,
    0 0 1px #2A34C0,
    0 0 1px #2A34C0;
    
    filter: 
    drop-shadow(-1px -1px 0px #2A34C0)
    drop-shadow(1px 1px 0px #2A34C0) 
 
    drop-shadow(3px 2px 0px #D6F46B)
    drop-shadow(3px -1px 0px #E34D32);
 
}
<div class="bg">



<p class="myText">
   أهــــــــلاً    ملاعــــــب
</p>

</div>

user_97929290
Related