جلسه ی نوزدهم: سایه ها در css

سایه ها در cssهمه ی شما عموما خاصیت استفاده از سایه ها را دیده اید برای مثال سایه ای که در زیر یک متن یا یک عکس قرار دارد باعث برجستگی و زیباتر نشان داده شدن آن متن می شود حال سوال اینجاس که چگونه می توانیم از استایل shadow استفاده نماییم که باعث بهتر شدن سایت ما شود؟؟؟؟ برای گرفتن جواب این سوال با ما در این آموزش همراه باشید.

 

استایل shadow چیست؟

از استایل shadow برای ایجاد یک سایه برای متن یا عناصر دیگر در وب سایت خود استفاده می کنیم. استایل shadow دارای سه ویژگی می باشد که به وسیله ی این سه ویژگی می توان به تمامی عناصر موجود در وب سایت خود سایه اضافه نمود. این سه ویژگی عبارتند از:

  1. box-shadow
  2. text-shadow
  3. drop-shadow

چگونه میتوانیم یک سایه ایجاد کنیم؟

برای اینکه یک سایه ایجاد کنیم ابتدا باید عنصر مورد نظر خود را شناسایی کنیم یعنی این که عنصر ما اگر یک متن باشد باید از text-shadow استفاده کنیم در غیر این صورت از ویژگی box-shadow استفاده می کنیم.

حال پس از انتخاب نوع ویژگی خود باید به این فکر کنیم که چگونه باید به یک سایه مقادیر مورد نظر خود را بدهیم بگذارید این موضوع را با ذکر یک مثال توضیح دهیم. به نمونه کد زیر توجه کنید:

box-shadow: 3px 5px 10px rgba(0,0,0,0.3)

در مثال بالا ما برای یک باکس یک سایه ی نرم و زیبا ایجاد نمودیه ایم. حال به این موضوع می پردازیم که مقادیر بالا هر کدام کجا و چگونه استفاده می شوند.

کاراکتر اول: ابتدا یک مقدار ۳px ایجاد نموده ایم که برای میزان ضخامت سایه در راستای افقی می باشد این مقدار در صورتی که مثبت باشد در سمت راست شکل و در صورت منفی بودن در سمت چپ شکل قرار خواهد گرفت.

کاراکتر دوم: مقدار دوم ۵px می باشد که ضخامت سایه در راستای عمود می باشد در صورتی که این مقدار مثبت باشد در پایین عنصر و در صورت مثبت بودن در بالای جسم قرار می گیرد.

کاراکتر سوم: مقدار سوم ۱۰px می باشد که برای تعیین نمودن میزان اندازه ی سایه می باشد هر چقد این عدد کوچکتر باشد مقدار سایه منبسط تر (جمع تر و سفت تر) می باشد و هر چه این عدد بیشتر باشد میزان پخش بودن سایه زیاد تر می شود و فضای بیشتر را اشغال می کند.

نکته: در میان این کاراکتر و کاراکتر بعدی می تواند یک کاراکتر قرار بگیرد که از جنس اعداد و مانند کاراکتر های بالا می باشد مقدار پیشفرض برای این ویژگی صفر می باشد اگر آن را مثبت قرار دهیم اندازه ی سایه بزرگتر و اگر آن را منفی قرار دهیم اندازه ی سایه کوچکتر از جسم می شود.

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

ویژگی box-shadow

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

کد های HTML:

<div class="box">کمیابی ها</div>

کد های css:

.box {

width: 400px;

height: 550px;

font-size: 30px;

background: #fff;

color: #000;

text-align: center;

margin: 0 auto;

border: 1px solid rgba(0,0,0,0.3);

border-radius: 3px;

box-shadow: 3px 5px 10px rgba(0,0,0,0.3)

}

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

استایل box shadow

از ویژگی box-shadow علاوه بر ایجاد سایه برای عناصر مختلف در وب سایت می توان از آن برای ایجاد یک خط در پایین عنصر مورد نظر خود نیز استفاده کرد، یعنی شبیه ویژگی border-bottom در CSS اما سوال اینجاست که چه  زمانی از ویژگی box-shadow به جای ویژگی border-bottom استفاده می کنیم؟

جواب: زمانی که نیاز داریم خط مورد نظر ما دارای یک هاله ی زیبا و پخش باشد. به مثال زیر توجه کنید تا فرق این دو ویژگی را متوجه شوید.

نکته: در زبان css امکان دارد بعضی از ویژگی ها در مقادیری خاص خروجی یکسان داشته باشند. 🙂

<div class="box1">

<img src="image/img.jpg" alt="logo" height="208.5px" width="412px">

</div>

<div class="box2">

<img src="image/img.jpg" alt="logo" height="208.5px" width="412px">

</div>

کد CSS:

.box1 {

width: 412px;

height: 208.5px;

font-size: 40px;

background: #e0f7fa;

color: #000;

text-align: center;

margin: 0 auto;

border: 1px solid rgba(0,0,0,0.3);

border-radius: 3px;

box-shadow: 3px 3px 3px rgba(0,0,0,0.3);

margin-bottom: 30px

}

.box2 {

width: 412px;

height: 208.5px;

font-size: 40px;

background: #e0f7fa;

color: #000;

text-align: center;

margin: 0 auto;

border: 2px solid rgba(0,0,0,0.3);

border-radius: 3px;

}

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

استایل box shadow

تا اینجا هر چه آموختیم در مورد سایه های داخلی بود اما اگر بخواهیم یک سایه ی داخلی برای جسم ایجاد کنیم چه در این صورت چه باید کرد؟ جواب بسیار ساده اس همه چیز مثل مراحل قبله اما ایندفعه از کلمه ی inset برای داخلی نمودن سایه ی خود استفاده می کنیم.به مثال زیر توجه کنید:

کد HTML:

<div class="box">Kamyabiha.com</div>

کد CSS:

.box {

width: 412px;

height: 208.5px;

font-size: 40px;

background: #e0f7fa;

color: #000;

text-align: center;

margin: 0 auto;

border: 1px solid rgba(0,0,0,0.3);

border-radius: 3px;

box-shadow: inset 5px 3px 10px 2px rgba(0,0,0,0.3);

margin-bottom: 30px

}

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

استایل box shadow

حال که کار با ویژگی box-shadow را آموختید نیاز داریم که کار با ویژگی Text-shadow را نیز بیاموزیم تا در طراحی سایت خود بتوانیم با کمک استایل shadow سایه های زیبا تری ایجاد کنیم.

 

ویژگی Text-shadow

اگر کمی انگلیسی بلد باشیم متوجه می شویم که ویژگی Text-shadow چه کاربردی دارد، از ویژگی Text-shadow برای ایجاد سایه بر روی متن مورد نظر خود استفاده می نماییم.برای مثال به نمونه کد زیر توجه کنید:

کد HTML:

<div class="box">

<h1>Kamyabiha.com</h1>

</div>

کد CSS:

.box {

width: 512px;

height: 258.5px;

font-size: 30px;

background: #fff;

color: #fff;

text-align: center;

margin: 0 auto;

border: 1px solid rgba(0,0,0,0.3);

border-radius: 3px;

box-shadow:5px 3px 10px 2px rgba(0,0,0,0.3);

}

.box h1{

text-shadow: 1px 1px 10px #000;

}

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

استایل text shadow

 

ویژگی drop-shadow

این ویژگی در جلسه ی شانزدهم از طراحی سایت توضیح داده شده است. برای دیدن مطلب کلیک نمایید.

 

حال که با استایل shadow آشنا شده اید می خواهیم که ویژگی های بیشتری را برای شما عزیزان به اشتراک بگذاریم تا باعث پیشرفت شما دوستان گرامی باشیم پس با ما همراه باشید.

 

مبحث تکمیلی

اولین نکته ای که در مورد استایل shadow می توان گفتن این است که شما خود دارای ایده های متفاوت باشید برای مثال سایه ای که در متن بالا استفاده شد تنها دلیل دیده شدن آن متن می باشد که باعث جذاب تر شدن آن نیز می شود. باید به این نکته دقت داشته باشید که مکان قرار گرفتن سایه ها بسیار مهم می باشد.

چگونه برای یک متن چند سایه ایجاد کنیم؟؟

برای اینکه به یک متن چند سایه ایجاد کنیم کافیست سایه های مورد نظر خود را نوشته و آن ها را با علامت کاما (,) از یکدیگر جدا نماییم. برای فهم بیشتر به مثال زیر توجه کنید:

کد HTML:

<div class="box">

<h1>Kamyabiha.com</h1>

</div>

کد CSS:

.box {

width: 512px;

height: 258.5px;

font-size: 30px;

background: #fff;

color: #000;

text-align: center;

margin: 0 auto;

border: 1px solid rgba(0,0,0,0.3);

border-radius: 3px;

box-shadow:5px 3px 10px 2px rgba(0,0,0,0.3);

}

.box h1{

text-shadow: 9px -25px 2px rgba(0,0,0,0.3), 18px 26px 6px rgba(0,0,0,0.2), 48px 0 8px rgba(0,0,0,0.1)

}

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

استایل text shadow

 

خلاصه مطلب:

  1. از استایل shadow برای ایجاد یک سایه برای متن یا عناصر دیگر در وب سایت خود استفاده می کنیم.
  2. از ویژگی box-shadow برای ایجاد یک سایه برای عناصر استفاده می شود.
  3. از ویژگی box-shadow علاوه بر ایجاد سایه برای عناصر مختلف در وب سایت می توان از آن برای ایجاد یک خط در پایین عنصر مورد نظر خود نیز استفاده کرد.
  4. تا اینجا هر چه آموختیم در مورد سایه های داخلی بود اما اگر بخواهیم یک سایه ی داخلی برای جسم ایجاد کنیم باید از کلمه ی inset در اول کد خود استفاده کنیم.
  5. از ویژگی Text-shadow برای ایجاد سایه بر روی متن مورد نظر خود استفاده می نماییم.
  6. اولین نکته ای که در مبحث سایه ها می توان گفتن این است که شما خود دارای ایده های متفاوت باشید.
  7. اولی نکته ای که در مبحث سایه ها می توان گفتن این است که شما خود دارای ایده های متفاوت باشید.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها