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

زمانی که یک مرورگر از text-stroke ویژگی، از رنگ تنظیم شده توسط استفاده می کند color ویژگی.

تجربه خود را به اشتراک بگذارید! آیا از روش های دیگری که در این مقاله توضیح داده نشده است استفاده کرده اید؟ در نظرات به ما اطلاع دهید.

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

h1 {
  color: #fff;
  text-shadow:
    3px 3px 0 #000,
    -3px 3px 0 #000,
    -3px -3px 0 #000,
    3px -3px 0 #000;
}

یکی از جنبه‌های جذاب فونت‌ها، گرافیک‌های مبتنی بر برداری، توانایی اعمال خطوط یا خطوط کلی پیرامون شخصیت‌های فردی است. مانند روشی که می‌توانید در برنامه‌های برداری مانند Adobe Illustrator یک خط بکشید، 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