به طراح وب خوش آمدید.
وقتی صحبت از طراحی وب به میان می آید، جذابیت بصری محتوای شما نقشی حیاتی در جلب و حفظ توجه مخاطبان شما دارد. یکی از جنبه های طراحی که می تواند تفاوت زیادی در زیبایی شناسی و خوانایی کلی وب سایت شما ایجاد کند، سبک متن است.
سبک متن فراتر از انتخاب فونت و رنگ فونت است. این شامل ترکیب دقیق ویژگی های مختلف CSS برای دستیابی به جلوه مورد نظر است، مانند استفاده از خطوط کلی متن برای ایجاد متن شما از نظر بصری قابل توجه.
در این مقاله، به هنر استایل دادن به خطوط کلی متن با CSS خواهیم پرداخت و به نحوه کارکرد آن و همچنین گزینههای مختلفی که میتوانید استفاده کنید، خواهیم پرداخت.
درک متون وب
متن وب متنی است که در یک صفحه وب نمایش داده می شود. فونت ها نقش حیاتی در نمایش متن در وب دارند. این فونت ها اساساً گرافیک برداری هستند، به این معنی که داده های پیکسلی آنها را محدود نمی کند و می توانند در اندازه های مختلف نمایش داده شوند در حالی که هنوز واضح و واضح هستند.
یکی از جنبههای هیجانانگیز فونتهایی که گرافیک برداری هستند، توانایی اعمال خطوط یا خطوط کلی پیرامون شخصیتهای فردی است. همانطور که می توانید یک شکل را در برنامه های برداری مانند Adobe Illustrator ترسیم کنید، CSS نیز ابزاری را برای دستیابی به همان جلوه در متن وب فراهم می کند.
۲ روش برای افزودن طرح کلی متن با استفاده از CSS
وقتی صحبت از اضافه کردن یک افکت طرح کلی به متن خود با CSS می شود، دو روش وجود دارد که می توانید استفاده کنید. بیایید معایب این روش ها و نحوه استفاده از آنها را بررسی و بررسی کنیم.
۱٫ استفاده از ویژگی text-stroke
text-stroke
یک ویژگی CSS است که می توانید از آن برای افزودن ساختار به متون خود استفاده کنید. این به شما امکان می دهد کانتور را مشخص کنید width
و color
. این ویژگی فقط توسط مرورگرهای مبتنی بر WebKit پشتیبانی می شود و برای استفاده از آن باید اضافه کنید -webkit-
پیشوند
برای مثال، بیایید یک سکته مغزی را به آن اضافه کنیم h1
متن عنوان – “به Kinsta خوش آمدید”:
<h1>Welcome to Kinsta</h1>
که چگونه text-stroke
اموال با استفاده خواهد شد -webkit-
پیشوند:
h1 {
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: black;
}
-webkit-text-stroke-width
و -webkit-text-stroke-color
حرکت را نشان می دهد width
و color
، به ترتیب. تنظیم می کند width
به ۳px
و color
به black
.
این دو خاصیت بالا را می توان با خاصیت مختصر ترکیب کرد -webkit-text-stroke
که به طور همزمان مسیر را تعیین می کند color
و width
.
h1 {
-webkit-text-stroke: 3px black;
}
این همان نتیجه را خواهد داشت.
پشتیبانی از ویژگی text-stroke
مطابق با مایل به خاکستریبدون پشتیبانی text-stroke
خواص در اینترنت اکسپلورر
اگر استفاده می کنید text-stroke
برای تنظیم طرح کلی متون خود، و کاربر از یک مرورگر پشتیبانی نشده استفاده می کند، اگر رنگ آن با رنگ پس زمینه مطابقت داشته باشد، ممکن است چنین متنی قابل مشاهده نباشد.
برای رفع این مشکل می توانید استفاده کنید -webkit-text-fill-color
دارایی برای تنظیم color
برای متن و تنظیم رنگ بازگشتی با color
ویژگی:
h1 {
color: black;
-webkit-text-fill-color: white; /* Will override color (regardless of order) */
-webkit-text-stroke: 3px black;
}
زمانی که مرورگر پشتیبانی نمی کند text-stroke
ویژگی، از مجموعه رنگ استفاده می کند color
ویژگی.
گزینه دیگر تأیید این است که مرورگر پشتیبانی می کند -webkit-text-stroke
قبل از اضافه کردن سبک
@supports (-webkit-text-stroke: 3px black) {
h1 {
-webkit-text-fill-color: white;
-webkit-text-stroke: 3px black;
}
}
۲٫ استفاده از ویژگی text-shadow
اگر نمی خواهید تفاوت های پشتیبانی را مدیریت کنید، می توانید استفاده کنید text-shadow
دارایی که دارد حمایت از همه آخرین نسخه مرورگرهای محبوب
برای text-shadow
خاصیت، از چهار سایه استفاده خواهیم کرد که هر کدام در گوشه سمت راست بالا، بالا سمت چپ، پایین سمت چپو پایین سمت راست.
h1 {
color: #fff;
text-shadow:
۳px 3px 0 #000,
-۳px 3px 0 #000,
-۳px -3px 0 #000,
۳px -3px 0 #000;
}
در این مثال، ما از چهار سایه برای ایجاد افکت طرح کلی متن استفاده می کنیم. هر سایه دارای فاصله ۳ پیکسل از متن است و رنگ آن سیاه است (#۰۰۰
). این افکت شبیه به اثری است که در روش اول ایجاد شد.
با اعمال سایه ها در هر چهار گوشه متن، به یک طرح کلی واضح می رسیم. به راحتی می توانید تغییر پیکسل، رنگ سایه یا رنگ متن را مطابق با ترجیحات طراحی خود تنظیم کنید.
این روش به شما یک مزیت اضافه می دهد زیرا می توانید سایه های افقی و عمودی را برای مطابقت با متن تنظیم کنید. همچنین می توانید مقداری شعاع تاری اضافه کنید:
h1 {
color: #fff;
text-shadow:
۳px 3px 2px #000,
-۳px 3px 2px #000,
-۳px -3px 0 #000,
۳px -3px 0 #000;
}
یکی از محدودیتهای استفاده از سایههای متنی این است که وقتی سایه بیشتر از ۱ پیکسل است، ممکن است ضربههای شکسته را تجربه کنید (اگر آن را با آن مقایسه کنید، این را خواهید دید. text-stroke
روش).
ترکیب ویژگی های text-stroke و text-shadow
شما می توانید هر دو ویژگی را با هم ترکیب کنید تا به یک جلوه بصری خیره کننده برسید که طرح کلی متن را با تاری ظریف و جلوه های اضافی ارائه شده ترکیب می کند. text-shadow
ویژگی. این ترکیب یک رویکرد همه کاره و قابل تنظیم برای بهبود ظاهر متن شما ارائه می دهد.
h1 {
-webkit-text-stroke: 1px black;
color: white;
text-shadow:
۳px 3px 0 #000,
-۱px -1px 0 #000,
۱px -1px 0 #000,
-۱px 1px 0 #000,
۱px 1px 0 #000;
}
همچنین می توانید از نیاز به افزودن سایه های جداگانه به هر گوشه خلاص شوید و سایه کلی را در یک خط اعمال کنید:
#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
ویژگیها گزینههای ارزشمندی برای اضافه کردن خطوط کلی به متن شما ارائه میدهند. انتخاب بین آنها به سازگاری مرورگر، افکت های مورد نظر و سطح کنترلی که برای طراحی خود نیاز دارید بستگی دارد.
تکنیک های مختلف را آزمایش کنید و بهترین رویکرد را برای ایجاد طرح های متنی چشم نواز و از نظر بصری جذاب بیابید. شما می توانید قدرت میزبانی Kinsta را با پروژه کامل خود برای حضور آنلاین جذاب ترکیب کنید.
تجربه خود را به اشتراک بگذارید! آیا از روش های دیگری استفاده کرده اید که در این مقاله به آن پرداخته نشده است؟ در نظرات به ما اطلاع دهید.