خاصیت 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: این ویژگی فقط گوشه سمت چپ پایین را گرد می کند.
در مثال زیر هم حالت های مختلف بالا را کدنویسی کردیم و به تصویر کشیدیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> *{ margin:0; padding:0; border:0; } body{ text-align:center; background:#FEFEFE; } .thumb{ font:70px "tahoma"; font-weight:800; text-shadow:2px 3px 2px #ede011; color:#133783; background-color:#AC2023; width:600px; margin: auto; padding:20px; margin-top:50px; } </style> </head> <body> <div class="thumb" style="border-radius:50px;" >Border-1</div> <div class="thumb" style="border-radius:10px 40px;" >Border-2</div> <div class="thumb" style="border-radius:10px 70px 30px;" >Border-3</div> <div class="thumb" style="border-radius:10px 20px 30px 40px;" >Border-4</div> <div class="thumb" style="border-top-left-radius:80px;" >Border-Radius</div> <div class="thumb" style="border-bottom-right-radius:80px;" >Border-Radius</div> <div class="thumb" style="border-radius:50%; height: 300px;width: 300px;text-align: center;"></div> </body> </html> |
کدهای بالا واضح هستند و نیاز به توضیح نداره. از text-shadow هم استفاده کردیم که مروری بر جلسه قبل باشد.
نکته: می توانیم مقدار درصد استفاده کنیم که حالت بیضی ایجاد می کند. در صورتی که عرض و ارتفاع المان برابر باشد و مقدار درصد border-radius را 50 در نظر بگیریم دایره ایجاد می شود.
نتیجه اجرا:
نکته ای که در تصویر بالا مشاهده می شود این است که اگر المان ما پس زمینه از نوع تصویر یا رنگ داشته باشد ، پس زمینه هم به اندازه مشخص شده گرد می شود.
مقدار دهی عمودی و افقی به خاصیت border-radius
border-radius دست ما را باز گذاشته تا گرد کردن گوشه ها در راستای عمودی و افقی رو تفکیک کنیم. برای اینکار از / (اسلش) استفاده می کنیم و برای هر گوشه 2 مقدار مشخص کنیم ، مقادیر قبل از اسلش گردی راستای افقی و مقدار بعد از اسلش گردی در راستای عمودی را مشخص می کنند.
توجه: با هر طرف اسلش باید با توجه به نکات بالا برخورد کرد (یک مقدار ، دو مقدار ، سه مقدار ، چهار مقدار).برای درک بهتر به ادامه مطلب توجه کنید.
مثال) به تصویر زیر دقت کنید:
1 |
border-radius: 2em / 5em; |
همانطور که گفتیم باید با هر طرف اسلش مشابه 4 حالت بالا برخورد کنیم . الان قبل اسلش یک عدد 2 داریم که در راستای افقی، تمام گوشه ها به این اندازه گرد می شوند.و بعد اسلش 5 داریم که به این اندازه در راستای عمودی، تمام گوشه ها گرد می شوند.
در مثال بعدی قبل اسلش سه مقدار داریم و بعد اسلش دو مقدار که باید با هر طرف جداگانه برخورد کنیم
1 |
border-radius: 2em 1em 4em / 0.5em 3em; |
قبل اسلش: 3 مقدار داریم. مقدار اول، گردی بالا چپ -مقدار دوم، گردی بالا راست و پایین چپ-مقدار سوم، گردی پایین راست را در راستای افقی مشخص می کنند.
بعد اسلش : دو مقدار داریم . مقدار اول، گردی بالا چپ و پایین راست – مقدار دوم، گردی بالا راست و پایین چپ را در راستای عمودی مشخص می کنند
و به همین ترتیب می توانیم مقادیر دلخواه خود را اعمال کنیم و یک موج جالبی در گوشه های المان ایجاد کنیم.
خب تا اینجا با خاصیت border-radius آشنایی کافی پیدا کردیم در ادامه می خواهیم به مبحث box-shadow بپردازیم.
خاصیت box-shadow
همانطور که از نامش مشخص است از این خاصیت برای سایه دادن به یک المان استفاده می شود.
- مقدار اول: فاصله سایه با المان در راستای افقی یا X را مشخص می کند(طبق محو مختصات اگر مقدار مثبت بود سایه به سمت راست و اگر منفی بود سایه به سمت چپ حرکت می کند)
- مقدار دوم: فاصله سایه با المان در راستای عمودی یا Y را مشخص می کند(مثبت بود به سمت پایین و منفی بود به سمت بالا جابه جا می شود)
- مقدار سوم: میزان محو شدن سایه
- مقدار چهارم: اندازه سایه(اگر مقدارش صفر باشد هم اندازه با خود باکس است -اگر مثبت باشد سایه از باکس بزرگتر است-اگر منفی باشد سایه از باکس کوچکتر است)
- مقدار پنجم: رنگ سایه
مثال) برای فهم به مثال زیر را توجه کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!doctype html> <html> <head> <meta charset="utf-8"> </head> <style> *{ margin:0; padding:0; border:0; } .div{ height:70px; border-radius:2px; border:1px solid #eee; margin: 50px 10%; font:20px tahoma; text-align:center; } </style> <body> <div class="div" style="box-shadow: 0 -5px 5px 1px #666;"> <div>سایه در راستای عمودی </div> </div> <div class="div" style="box-shadow: 5px 0 5px 1px #666;"> <div>سایه در راستای افقی</div> </div> <div class="div" style="box-shadow: 5px 5px 0 1px #666;"> <div>میزان محو شدن سایه صفر است</div> </div> <div class="div" style="box-shadow: 5px 5px 5px 0 #666;"> <div>سایز صفر </div> </div> <div class="div" style="box-shadow: inset 0 0 5px 3px #666;"> <div>سایه داخلی </div> </div> <div class="div" style="box-shadow: 0 0 0 10px #ff0000, 0 0 0 20px pink, 0 0 0 30px red;"> <div>چند سایه </div> </div> </body> </html> |
نکته: به صورت پیش فرض سایه بیرون المان ایجاد می شود اگر بخواهیم سایه داخل المان ایجاد شود باید مقدار inset را در ابتدا تمام مقادیر قرار دهیم.
نکته: می توانیم به یک المان چند سایه بدهیم و سایه ها به وسیله ویرگول از هم جدا شوند.
نتیجه:
توجه داشته باشید تمام خصوصیاتی که استفاده می کنیم را می توانید در گوگل سرچ کنید و بررسی کنید که چه مرورگرهایی آن را پشتیبانی می کنند. (مثلا برای اینکه بفهمیم چه مرورگرهایی خاصیت box-shadow را پشتیبانی می کنند به این آدرس مراجعه می کنیم)
امیداوریم که آموزش خاصیت border-radius و خاصیت box-shadow براتون مفید واقع شود. در جلسه آتی با نحوه ایجاد گردایانت آشنا می شویم.
باز هم تاکید می کنم اگر خودتون دست به کار نشین و کد نزنید، خوندن این مطالب هیچ فایده ای نداره! اگر سوال یا نظری دارین میتونید از طریق دیدگاه زیر همین پست با ما در ارتباط باشین. شاد باشید ;-)
به این مقاله چند تا ستاره میدی؟[تعداد رای: 0 امتیاز: 0]
سلام خسته نباشید خداقوت .بهترین جامع ترین مقاله ی html.css بود که تابحال خوندم خیلی خوب یادگرفتم .متشکر
فقط ی چیزی؟مقالتون مگه باز ادامه نداره؟ بقیشو پیدانمیکنم..؟!
سلام و عرض ادب
از ارسال نظر و انرژی مثبت شما سپاسگزاریم.همانطور که مستحضر هستید تهیه پست آموزشی با کیفیت زمان بر می باشد.امیدواریم که پست های جدیدی در این زمینه توسط همکاران آماده و ارائه گردد . با تشکر از همراهی شما
سلام و عرض ادب.
واقعا آموزش عالی بود. دست شما درد نکنه. من همه آموزش ها رو مطالعه کردم و واقعا خیلی چیز ها یاد گرفتم. ازتون واقعا ممنونم. نمیدونم چرا فقط جلسه ۱۹ از دسترس خارج بود. کاش اون هم باز بود.
ولی در کل واقعا واقعا واقعا مفید و آموزنده بود. امیدوارم همیشه پیروز و سربلند باشید.
سپاس
سلام و عرض ادب. برای دسترسی به بعضی از مطالب روی سایت نیاز هست که عضویت ویژه خریداری شود و اگر پیامی مبنی بر اینکه شما باید عضویت ویژه تهیه کنید نشان داده نشود شما باید بتوانید آن مطلب را مطالعه کنید.
با تشکر از همراهی شما