جلسه ۳۴ – دستورات مبتدی shadow

ایجاد سایه با استفاده از CSS

آشنایی با Shadow
آشنایی با Shadow

منظور از سایه ها چیست ؟ چگونه می‌توانیم به متن ها سایه بدیم؟ چگونه سایه ای نرم ایجاد کنیم؟ چگونه با استفاده از CSS سایه ایجاد کنیم؟ در این مقاله، ساختار و فرم کلی دستورات مربوط به سایه ها رو یاد می‌گیریم. در دو مقاله آینده، با شکل پیشرفته تر سایه‌ها، و یه سری مثال های جذاب تر آشنا می‌شیم!

انواع خاصیت های دستور سایه

در CSS، می‌تونیم از سایه، توسط ۲ خاصیت زیر بهره ببریم:

  • text-shadow
  • box-shadow

مفهوم خاصیت text-shadow

این خاصیت، می‌تونه به متن ها و تکست ها سایه بده و تاثیری روی عنصر شامل متن ما نداره.

برای مثال، با استفاده از text-shadow، در عنصر زیر، سایه به متن داده می‌شه و نه به عنصر!

<span>Hello world!</span>

نتیجه:

خاصیت text-shadow

مفهوم خاصیت box-shadow

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

مجددا از عنصر span زیر، اما این بار همراه با خاصیت box-shadow در CSS استفاده می‌کنیم.

<span>Hello world!</span>

نتیجه به شکل زیر خواهد بود:

خاصیت box-shadow

دستورات shadow هم مثل دستور های دیگه، سینتکس و نحوه نوشتار مربوط به خودشون رو دارن که باید ازشون تبعیت کنیم!

از خاصیت text-shadow شروع می‌کنیم.

خاصیت text-shadow

فرم کلی دستور مورد نظر، به شکل زیره:

فرم نوشتاری خاصیت text-shadow

سایه افقی

برای حرکت افقی سایه ها، ما نیاز به یه مبدا داریم که حرکت رو از اون جا شروع کنیم. مبدا و شروع حرکت سایه ها، از عنصر یا متنی هست که بهش سایه رو اختصاص دادیم.

در مثال زیر، سایه عمودی، گستردگی سایه و رنگ سایه رو ثابت در نظر گرفتیم.

به مقدار اول که شامل سایه‌ی افقی هست توجه کنین:

سایه افقی در text-shadowهمونطور که مشاهده می‌کنیم، با توجه به منفی بودن یا مثبت بودن مقدار سایه افقی، می‌تونیم حرکت و جابه جایی اون رو تعیین کنیم. علامت منفی، سایه رو به چپ و علامت مثبت، سایه رو به راست حرکت میده.

سایه عمودی

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

سایه عمودی در text-shadow

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

ترکیب سایه عمودی و افقی در text-shadow

شفافیت سایه

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

شفافیت سایه در text-shadow

مقادیر جا به جایی و رنگ سایه رو بدون تغییر در نظر گرفتیم. همونطور که می‌بینین، با کمتر شدن مقدار شفافیت، سایه تیز تر می‌شه و با افزایش مقدار شفافیت، یک سایه‌ی نرم تر و تار داریم.

نکته: شفافیت سایه، مقدار منفی قبول نمی‌کنه!

رنگ سایه

رنگ سایه با استفاده از مقادیر مختلفی تعیین می‌شه که تو فصل های قبل درموردشون توضیح دادیم.

برای نمونه به مثال زیر توجه کنین:

رنگ سایه در text-shadowدر این مثال، رنگ آبی رو با استفاده از سه روش اصلی رنگ دادن، به سایه مورد نظر اختصاص دادیم.

اگه جایی از مثال رو متوجه نشدین، حتما تو قسمت نظرات پایگاه دانش میزفا بپرسین، پاسخگو خواهم بود 🙂

خاصیت box-shadow

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

به تصویر زیر که ترتیب مقدار پذیری این خاصیت رو نشون می‌ده توجه کنین:

فرم نوشتاری خاصیت box-shadow

همونطور که می‌بینیم، اینجا به جای ۴ مقدار، باید از یه مقدار پنجمی هم استفاده کنیم.

گستردگی سایه

از اسمش مشخصه، توسط این خاصیت، می‌تونیم گستردگی سایه‌ها رو مشخص کنیم. برای فهم بهتر به مثال زیر توجه کنین:

گستردگی سایه در box-shadow

نکته: شفافیت سایه رو با گستردگی سایه اشتباه نگیرید!

برای درک بهتر تفاوت اون ها، به مثال زیر که دارای شفافیت متفاوتیه توجه کنین:

شفافیت سایه در box-shadow

پایان ترم

[box type=”info” class=”question-from-users” width=””]

سوال:

مشتری ازتون می‌خواد کار زیر رو براش انجام بدید:

زمانی که نشانگر روی دکمه زیر میره، سایه دکمه ظاهر بشه و زمانی که روش کلیک میشه، سایه به شکلی تغییر کنه که کاربر واقعا حس کنه “دکمه کلیک شده و به پایین رفته”.

36873

کدتون رو تو یک قایل با نام “پاسخ کوییز مقاله ۳۴” بنویسین و تو قسمت نظرات آپلود کنین.

راهنمایی: از حالت های لینک active و hover استفاده کنین.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

تو این مقاله آموزش css پیشرفته ، با مفاهیم اولیه و مبتدی در سایه ها آشنا شدیم و تفاوت بین دو خاصیت text-shadow و box-shadow و کاربرد های اون ها رو متوجه شدیم.

سپس به بررسی مقادیر مورد قبول این دو خاصیت پرداختیم و الانم که اینجاییم این مقاله رو به پایان می‌رسونیم 🙂

امیدوارم که از خوندن این مقاله کیف کرده باشین.

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

مدیر محتوا: علی اسمعیلی

فیلم آموزشی asp.net core 2

نوید معدن نژاد
یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!
آموزش CSS
پایین سرفصل های CSS هست، روی منم کلیک کنی میتونی ببینی.

فیلم آموزشی asp.net core 2

11 نظر

11 پاسخ

  1. *{
    direction:rtl;
    font-family: Arial, Helvetica, sans-serif;
    }
    body {
    text-align: center;
    }
    button{
    padding:15px 20px;
    border:none;
    background-color:#1aaf8f;
    color:white;
    border-radius:5px;
    margin-top: 60px;
    }
    button:hover{
    box-shadow: 0px 0px 0px 5px #1aaf8f;
    }
    button:active{
    border-radius:5px;
    padding:15px 20px;
    border:none;
    background-color:#1aaf8f;
    color:white;
    box-shadow: 0px 0px 0px 1px #1aaf8f;

    }

    click

    1. ممنون بهرامی پاسخت درسته. بهت پیشنهاد میکنم زمانی که رو دکمه کلیک میشه از خاصیت های transform هم استفاده کنی که باحال تر هم بشه و اون حالت کلیک کردن بیشتر حس شه.
      برای این قضیه به مقاله تبدیلات دو بعدی در CSS ارجاعت میدم 🙂

  2. *{
    direction:rtl;
    }
    body , html{
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    }
    button{
    padding:20px;
    border:none;
    background-color:#404040;
    color:white;
    border-radius:5px;
    }
    button:hover{
    box-shadow: 0px 0px 0px 5px #404040
    }
    button:active{
    padding:15px;
    border:none;
    background-color:#404040;
    color:white;
    border-radius:5px;
    box-shadow: 0px 0px 0px 1px #404040

    top: 5px
    left: 5px

    }

  3. button:hover{
    box-shadow:2px 4px 5px 3px darkkhaki;
    }

    button:active{
    box-shadow:1px 2px 10px 1px green;
    }

    1. سلام. متاسفانه این پاسخ مورد انتظار نیست. برای درک بهتر سوال به این مثال هدایتت میکنم:
      https://codepen.io/MikeMcChillin/pen/noJweبه نتیجه نهایی دقت کن (فقط نتیجه، چون کدش از CSS پیشرفته استفاده کرده)

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

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=