آموزش text shadow در CSS

یکی از خصوصیاتی که ممکن است در طراحی قالب با CSS برای شما جالب باشد حاصیت text shadow است . همانطور که از اسم این ویژگی مشخص است ، این خاصیت موجب ایجاد سایه روی متن شما ( زیر متن ) خواهد شد . اگر در CSS با دستور shadow آشنا باشید اطلاع دارید که بصورت سایه در کنار المان‌هایی همچون DIV ظاهر خواهد شد .

text shadow نیز به همین حالت ایجاد سایه خواهد کرد اما اینبار بروی متون سایت شما ! اول از هرچیزی توجه کنید که استفاده از این مدل دستورات باید بصورت صحیح و بجا باشد یعنی قرار نیست از این مدل طراحی‌ها در تمام قسمت‌های قالب استفاده کنید .

این دستور در حالت اول ساده است اما اگر با مقالات آموزشی سایت ما آشنا باشید ، اطلاع دارید که به سیر تا پیاز هر موضوعی اشاره می‌کنیم . اکنون علاوه بر روش کدنویسی ، نکات مهم این دستور را نیز خدمتتان ارائه خواهیم کرد .

چگونه از text shadow استفاده کنیم ؟

دستور text shadow را می‌توانید برای تگ‌های فرمتینگ همچون p و span و a و h1 و … استفاده کنید . برای اینکه یک دستور سایه ساده برای متن ایجاد کنیم ، می‌توانیم یک نمونه بصورت زیر کدنویسی کنیم :

h1 {
  text-shadow: 2px 2px #ff0000;
}

اما این اعداد هرکدام چه کاری انجام می‌دهند ؟ مشخص است که رنگ انتهایی به منظور ایجاد رنگ برای سایه است . خروجی کد بالا در زیر را مشاهده می‌کنید :

متن با سایه بلور

عدد اول که 2px است مربوط به محل قرارگیری سایه از نظر موقعیت محور افقی است یا همان محور X ! اگر سایت شما با dir بصورت راست به چپ تنظیم شده باشد ، عدد 2 هر اندازه که بزرگتر شود ، سایه به سمت چپ صفحه حرکت خواهد کرد .

این عدد می‌تواند مقدار منفی نیز داشته باشد . اگر عدد شما بصورت مثلا -20 پیکسل باشد ، اگر سایت شما با dir بصورت راست به چپ تنظیم باشد ، سایه به سمت راست صفحه حرکت خواهد کرد .

عدد دوم که این نیز با مقدار 2 پیکسل است ، محل قرارگیری سایه ازنظر محور عمودی یا همان محور Y را تعیین خواهد کرد . هرچه این عدد از 0 بزرگتر باشد ، سایه از بالای متن به سمت پایین حرکت خواهد کرد و هرچه این عدد مقدار منفی داشته باشد ، سایه به سمت بالای متن حرکت خواهد کرد .

عدد سوم در text shadow

در دستور text shadow می‌توانید یک عدد سوم نیز اصافه کنید . یعنی دستور shadow را بصورت زیر ایجاد کنید :

h1 {
  text-shadow: -5px 10px 5px #FF0000;
}

در این دستور عدد 5 پیکسل اضافه شده است . این عدد میزان تراکم سایه یا به عبارتی میزان بلور ( blur ) را مشخص خواهد کرد . می‌توانید همین دستور را خودتان تست کرده و نتیجه را مشاهده کنید . خروجی بصورت زیر خواهد بود :

متن با سایه بلور

مشاهده می‌کنید که داستان کمی تفاوت کرد . اما این پارامتر باید بصورت هوشمندانه استفاده شود .

دستور shadow با چه سلکتورهایی قابل استفاده است ؟

از آنجایی که این دستور برای تگ‌های فرمتینگ و متنی بیشتر باید استفاده شود از این جهت می‌توانید این ویژگی سایه را تنها به بخشی از متن اعمال کنید . یعنی بجای اینکه روی تمام سطرهای متن شما اعمال شود ، روی سطر اول یا کلمه اول اعمال شود .

دو انتخابگر ::first-line و ::first-letter به شما کمک خواهند کرد تا بتوانید از دستور تکست شدو برای سطر اول و یا خط اول متن استفاده کنید ، لذا اجباری نیست که شما از این ویژگی برای تمام قسمت‌های متن استفاده کنید .

حالت‌های پیشرفته‌تری از این دستور نیز وجود دارند ، مثلا بصورت زیر :

text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;

این دستورات ، بصورت ترکیبی اجرا می‌شوند و ترکیب رنگ‌های ارائه شده را بصورت همزمان و با حالتی که برای هریک درنظر گرفته‌ایم ، بروی متن اجرا می‌کند که ممکن است در جای خودش کارایی داشته باشد . امیدواریم این مقاله برای شما مفید بوده باشد .

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

اشتراک گذاری محتوا