آموزش Shadow (سایه) در CSS3

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

1. Box-Shadow (سایه برای جعبه‌ها و عناصر)

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

    box-shadow: offset-x offset-y blur-radius spread-radius color;

• offset-x: فاصله سایه در محور افقی (مثبت به راست و منفی به چپ)
• offset-y: فاصله سایه در محور عمودی (مثبت به پایین و منفی به بالا)
• blur-radius: میزان محوشدگی سایه (اختیاری)
• spread-radius: میزان گسترش سایه (اختیاری)
• color: رنگ سایه

مثال:

    .box {
        width: 200px;
        height: 100px;
        background-color: lightblue;
        box-shadow: 10px 10px 15px 5px rgba(0, 0, 0, 0.3);
    }

2. Text-Shadow (سایه برای متن‌ها)

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

    text-shadow: offset-x offset-y blur-radius color;

• offset-x و offset-y: موقعیت سایه در محورهای افقی و عمودی
• blur-radius: میزان محوشدگی (اختیاری)
• color: رنگ سایه

مثال:

    .text {
        font-size: 24px;
        color: black;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    }    

3. سایه داخلی (Inset Shadow)

در CSS3، می‌توان سایه را درون عناصر نیز قرار داد. این کار با استفاده از کلمه کلیدی inset انجام می‌شود. مثال:

    .box {
        width: 200px;
        height: 100px;
        background-color: lightgray;
        box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
    }

افزودن چند سایه به یک عنصر

می‌توانید به یک عنصر چندین سایه اضافه کنید، با استفاده از کاما آن‌ها را از هم جدا کنید. مثال:

    .box {
        width: 200px;
        height: 100px;
        background-color: white;
        box-shadow: 5px 5px 10px gray, -5px -5px 10px lightgray;
    }

دو سایه در جهت‌های مختلف به عنصر اضافه شده است.

ترکیب با Hover (افکت هنگام هاور)

سایه‌ها را می‌توان برای افکت‌های تعاملی مانند تغییر در زمان هاور استفاده کرد. مثال:

    .button {
        width: 100px;
        height: 50px;
        background-color: blue;
        color: white;
        box-shadow: 3px 3px 5px black;
        transition: box-shadow 0.3s;
    }
    
    .button:hover {
        box-shadow: 6px 6px 10px black;
    }

جمع بندی

استفاده از box-shadow و text-shadow در CSS3 به شما این امکان را می‌دهد که طراحی‌های مدرن و حرفه‌ای ایجاد کنید. با تنظیم رنگ، موقعیت، و میزان محوشدگی سایه‌ها می‌توانید به وب‌سایت خود عمق و جذابیت بصری بیشتری ببخشید.