نحوه اضافه کردن طرح کلی متن با CSS

2 روش برای افزودن طرح کلی متن با CSS

برای رفع این مشکل می توانید از -webkit-text-fill-color خاصیت برای تنظیم a color برای متن و تنظیم یک رنگ بازگشتی با color ویژگی:

به عنوان مثال، بیایید stroke را به یک اضافه کنیم h1 متن عنوان-"به Kinsta خوش آمدید":

h1 {
  -webkit-text-stroke: 3px black;
}

شما می توانید هر دو ویژگی را برای دستیابی به یک جلوه بصری خیره کننده که ترکیبی از طرح کلی متن کامل با تاری ظریف و جلوه های اضافی ارائه شده توسط text-shadow ویژگی. این ترکیب به یک رویکرد همه کاره و قابل تنظیم برای بهبود ظاهر متن شما اجازه می دهد.

برای text-shadow ویژگی، ما از چهار سایه استفاده خواهیم کرد، هر کدام به بالا سمت راست، بالا سمت چپ، پایین سمت چپ، و سمت راست پایین.

این دو خاصیت بالا را می توان با خاصیت مختصر ترکیب کرد -webkit-text-stroke، که به طور همزمان سکته مغزی را مشخص می کند color و width.

#heading-1{
color: white;
-webkit-text-stroke: 1px #F8F8F8;
text-shadow: 0px 1px 4px #23430C;
}

#heading-2{
color: white;
-webkit-text-stroke: 1px #F8F8F8;
text-shadow: 0px 2px 4px red;
}

#heading-3{
color: #333;
-webkit-text-stroke: 1px #282828;
text-shadow: 0px 4px 4px #282828;
}

خلاصه

هر دو text-stroke و text-shadow ویژگی ها گزینه های ارزشمندی برای اضافه کردن خطوط کلی به متن شما ارائه می دهند. انتخاب بین آنها به سازگاری مرورگر، جلوه های مورد نظر و سطح کنترلی که برای طراحی خود نیاز دارید بستگی دارد.

اگر از text-stroke ویژگی برای تنظیم طرح کلی متون شما و کاربر از یک مرورگر پشتیبانی نشده استفاده می کند، اگر رنگ آن با رنگ پس زمینه مطابقت داشته باشد، ممکن است چنین متنی قابل مشاهده نباشد.

وقتی صحبت از اضافه کردن یک افکت طرح کلی به متن خود با استفاده از CSS می شود، دو روش وجود دارد که می توانید از آنها استفاده کنید. بیایید بررسی کنیم و نکات منفی این روش ها و نحوه استفاده از آنها را ببینیم.

1. استفاده از ویژگی text-stroke

اینگونه است که text-stroke اموال با استفاده خواهد شد -webkit- پیشوند:

h1 {
  -webkit-text-stroke: 1px black;
   color: white;
   text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}

این همان خروجی را خواهد داد.

پشتیبانی از ویژگی text-stroke