آموزش ایجاد افکت سایه در CSS | انواع shadow در CSS

سایه (به انگلیسی shadow) از گذشته با به امروز در طرح‌های گرافیکی نقش مهمی داشته و دارد. حتی در زمانی که طرح‌های تخت (flat) مد شده بود، طولی نکشید که طرح‌های فِلَت سایه‌‌دار (با سایه‌های بسیار کشیده و کم رنگ) جای طرح‌های فلت را گرفت. در این درس قصد داریم تا پیاده سازی انواع افکت سایه در CSS را آموزش دهیم.

افکت سایه در زبان CSS

در زبان CSS می‌توان افکت سایه را به عناصر مختلف و متون اعمال کرد. برای ایجاد افکت سایه، ۲ ویژگی مختلف در CSS وجود دارد:

• text-shadow
• box-shadow

آموزش ویژگی text-shadow

از ویژگی text-shadow برای ایجاد افکت سایه برای متن استفاده می‌شود. به مثال زیر دقت کنید:

<p style="text-shadow: 2px 2px 3px black">من یک متن سایه دار هستم</p>

خروجی کد بالا:

من یک متن سایه دار هستم

ویژگی text-shadow می‌تواند ۴ پارامتر به عنوان ورودی بگیرد. پارامتر اول موقعیت سایه در محور X، پارامتر دوم موقعیت سایه در محور Y و کشیدگی سایه را تعریف می‌کند. همچنین با استفاده از پارامتر چهارم می توان رنگ سایه را تعریف کرد.

با کمی تغییر در کد بالا می‌توانید با عملکرد هرکدام از این پارامترها بیشتر آشنا شوید.

پارمتر اول و دوم که موقعیت سایه را تعیین می‌کنند می‌توانند عدد های منفی هم بگیرند (مثل 5px-). مثلا در پارامتر اول اگر مقدار عدد منفی باشد، سایه به سمت چپ کشیده می‌شود. اما اگر عدد مثبت باشد سایه به سمت راست کشیده می‌شود.

پارامتر دوم اگر منفی بود، سایه به سمت بالا و اگر مثبت بود، سایه به سمت پایین متمایل می‌شود.

آموزش ویژگی box-shadow

با استفاده از ویژگی box-shadow می‌توان افکت سایه را به عناصر موجود در صفحه وب اعمال کرد. به مثال زیر دقت کنید:

<p style="background:pink; box-shadow: 5px -8px 5px blue">من یک متن سایه دار هستم</p>

خروجی کد بالا:

من یک متن سایه دار هستم

عملکرد ویژگی box-shadow با ویژگی text-shadow هیچ فرقی نمی‌کند. یعنی دقیقا همان پارامتر‌هایی که توضیح دادیم، اینجا هم وجود دارند. پس از توضیح دوباره آن صرف نظر می‌کنیم.

سایه داخلی در box-shadow

افرادی که کمی با مباحث گرافیک آشنایی دارند می دانند که ما دو نوع سایه داریم: سایه بیرونی و داخلی. تا اینجای آموزش صحبت از سایه‌های بیرونی بود. برای تنظیم سایه داخلی کافیست تا از کلمه inset در ابتدای مقدار ویژگی box-shadow استفاده کنیم. به مثال زیر دقت کنید:

<p style="background:pink; box-shadow: inset 5px -8px 5px blue">من یک متن سایه دار هستم</p>

خروجی کد بالا:

من یک متن سایه دار هستم

نکته: سایه داخلی فقط در box-shadow وجود دارد. یعنی از کلمه inset نمی‌توانید در text-shadow استفاده کنید.