خاصیت border-radius | خاصیت box-shadow

با نام و یاد خدای مهربون
در جلسه گذشته به بحث web typography پرداختیم. در این جلسه می خواهیم خاصیت border-radius و خاصیت box-shadow در css را به صورت کامل مورد بررسی قرار بدهیم.

خاصیت border-radius چیست؟

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

نحوه مقدار دهی به خاصیت border-radius

می توان به حالت های زیر به خاصیت border-radius مقدار داد:

تک مقدار: یک عدد بر اساس درصد،پیکسلی یا em برای این خصوصیت در نظر بگیریم. در این صورت هر چهار گوشه المان به همان اندازه گرد می شود.

دو مقدار: اولین مقدار گردی گوشه بالا سمت چپ و پایین سمت راست و دومین گردی  گوشه بالا سمت راست و پایین سمت چپ را مشخص می کنند.

سه مقدار: اولین مقدار گردی گوشه بالا سمت چپ, دومین مقدار گردی گوشه های بالا سمت راست و پایین سمت چپ و سومین مقدار گردی گوشه پایین سمت راست را مشخص می کند.

چهار مقدار: اولین مقدار گردی گوشه بالا سمت چپ، دومین مقدار گردی گوشه بالا سمت راست، سومین مقدار گردی گوشه پایین سمت راست و چهارمین مقدار گردی گوشه پایین سمت چپ را مشخص می کند.

(خیلی شبیه شیوه مقدار دهی برای margin می باشد)

البته خاصیت border-radius یک خاصیت کلی است که می توان گرد کردن هر گوشه را با ویژگی های زیر تفکیک کرد :

  • border-top-left-radius: این ویژگی فقط گوشه سمت چپ بالا را گرد می کند.
  • border-top-right-radius: این ویژگی فقط گوشه سمت راست بالا را گرد می کند.
  • border-bottom-right-radius: این ویژگی فقط گوشه سمت راست پایین را گرد می کند.
  • border-bottom-left-radius: این ویژگی فقط گوشه سمت چپ پایین را گرد می کند.

در مثال زیر هم حالت های مختلف بالا را کدنویسی کردیم و به تصویر کشیدیم:

کدهای بالا واضح هستند و نیاز به توضیح نداره. از text-shadow هم استفاده کردیم که مروری بر جلسه قبل باشد.

نکته: می توانیم مقدار درصد استفاده کنیم که حالت بیضی ایجاد می کند. در صورتی که عرض و ارتفاع المان برابر باشد و مقدار درصد border-radius را 50 در نظر بگیریم دایره ایجاد می شود.

نتیجه اجرا:

آشنایی با خاصیت border-raduis | خاصیت box-shadow - نتیجه اجرا

 

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

مقدار دهی عمودی و افقی به خاصیت border-radius

border-radius دست ما را باز گذاشته تا گرد کردن گوشه ها در راستای عمودی و افقی رو تفکیک کنیم.  برای اینکار  از / (اسلش) استفاده می کنیم و برای هر گوشه 2 مقدار مشخص کنیم ، مقادیر قبل از اسلش گردی راستای افقی و مقدار بعد از اسلش گردی در راستای عمودی را مشخص می کنند.

توجه: با هر طرف اسلش باید با توجه به نکات بالا برخورد کرد (یک مقدار ، دو مقدار ، سه مقدار ، چهار مقدار).برای درک بهتر به ادامه مطلب توجه کنید.

مثال) به تصویر زیر دقت کنید:

همانطور که گفتیم باید با هر طرف اسلش مشابه 4 حالت بالا برخورد کنیم . الان قبل اسلش یک عدد 2 داریم که در راستای افقی، تمام گوشه ها به این اندازه گرد می شوند.و بعد اسلش 5 داریم که به این اندازه در راستای عمودی، تمام گوشه ها گرد می شوند.

در مثال بعدی قبل اسلش سه مقدار داریم و بعد اسلش دو مقدار که باید با هر طرف جداگانه برخورد کنیم

قبل اسلش:  3 مقدار داریم. مقدار اول، گردی بالا چپ -مقدار دوم، گردی بالا راست و پایین چپ-مقدار سوم، گردی پایین راست را در راستای افقی مشخص می کنند.

بعد اسلش : دو مقدار داریم . مقدار اول، گردی بالا چپ و پایین راست – مقدار دوم، گردی بالا راست و پایین چپ را در راستای عمودی مشخص می کنند

آشنایی با خاصیت border-raduis | خاصیت box-shadow

و به همین ترتیب می توانیم مقادیر دلخواه خود را اعمال کنیم و یک موج جالبی در گوشه های المان ایجاد کنیم.

خب تا اینجا با خاصیت border-radius آشنایی کافی پیدا کردیم در ادامه می خواهیم به مبحث box-shadow بپردازیم.

خاصیت box-shadow

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

آشنایی با خاصیت border-raduis | خاصیت box-shadow

  • مقدار اول: فاصله سایه با المان در راستای افقی یا X را مشخص می کند(طبق محو مختصات اگر مقدار مثبت بود سایه به سمت راست و اگر منفی بود سایه به سمت چپ حرکت می کند)
  • مقدار دوم: فاصله سایه با المان در راستای عمودی یا Y را مشخص می کند(مثبت بود به سمت پایین  و منفی بود به سمت بالا جابه جا می شود)
  • مقدار سوم: میزان محو شدن سایه
  • مقدار چهارم: اندازه سایه(اگر مقدارش صفر باشد هم اندازه با خود باکس است -اگر مثبت باشد سایه از باکس بزرگتر است-اگر منفی باشد سایه از باکس کوچکتر است)
  • مقدار پنجم: رنگ سایه

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

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

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

نتیجه:

آشنایی با خاصیت border-raduis | خاصیت box-shadow - نتیجه اجرا

 

توجه داشته باشید تمام خصوصیاتی که استفاده می کنیم را می توانید در گوگل سرچ کنید و بررسی کنید که چه مرورگرهایی آن را پشتیبانی می کنند. (مثلا برای اینکه بفهمیم چه مرورگرهایی خاصیت box-shadow را پشتیبانی می کنند به این آدرس مراجعه می کنیم)

 

امیداوریم که آموزش خاصیت border-radius و خاصیت box-shadow براتون مفید واقع شود. در جلسه آتی با نحوه ایجاد گردایانت آشنا می شویم.

باز هم تاکید می کنم اگر خودتون دست به کار نشین و کد نزنید، خوندن این مطالب هیچ فایده ای نداره! اگر سوال یا نظری دارین میتونید از طریق دیدگاه زیر همین پست با ما در ارتباط باشین. شاد باشید  ;-) 

به این مقاله چند تا ستاره میدی؟
[تعداد رای: 0 امتیاز: 0]