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


نویسنده:
پنجشنبه 12 تیر 1399
افکت سایه در CSS

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

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

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

  • text-shadow
  • box-shadow


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

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

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

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


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

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

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

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

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

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

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

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


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

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

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

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

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


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

دیدگاهتان را بنویسید

12 پاسخ به “آموزش ایجاد افکت سایه در CSS | انواع shadow در CSS”

  1. mrms گفت:

    سلام . ببخشید میخوام یه سایه ای برای یه img توی سایتم ایجاد کنم که از سیاه شروع بشه و کم کم رنگش تیره بشه تا سیاه. میشه راهنمایی کنین؟ممنون

    • سلام وقت بخیر
      برای تصویر می‌تونید از ویژگی box-shadow استفاده کنید که ۴ پارامتر مختلف دریافت می‌کنه
      برای دریافت اینکه چطور می‌تونید سایه موردنظر خودتون رو با استفاده از این ۴ پارامتر تنظیم کنید لطفا با دقت این مقاله رو بخونید
      موفق باشید

  2. محمد گفت:

    پارامتر سوم چه کاربردی داره؟

  3. کیان گفت:

    هردو سایه باکس نمیتونن همزمان برای “یک باکس” تعریف شن ؟
    یعنی هم به سمت داخل سایه بخوره هم بیرون بدون تعریف کردن پاراگراف اضافه

  4. رضا مهرعلی گفت:

    به عنوان پیش زمینه از اموزش های سایتتون استفاده کردم که جا داره بابت دوره روان و خوبتون تشکر کنم.اما برای تهیه کتاب کمی گیج شدم چون کتاب های زیادی وجود داره و ادم سردرگم میشه

  5. رضا مهرعلی گفت:

    سلام میشه یک کتابی برای اموزش پیشرفته معرفی کنید خیلی ممنون.

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

  6. amirhossein گفت:

    سلام.
    ببخشید آموزش html و css ادامه ندارد؟
    چون اینها فقط در حد ابتدایی است.

دیدگاهتان را بنویسید