تو این مطلب میخوام روش ساخت arrow رو با css آموزش بدم.حتما تا بحال modal boxها و خیلی دیگه از افزونههای jQuery رو دیدید، حتی bootstrap هم از این ویژگی برای ساخت arrow در tooltip و popover هاش استفاده میکنه.
اینجا
به تصویر زیر نگاه کنید:
به طور خلاصه کل کار برای ساخت arrow کلاسی به صورت زیر هستش:
ابتدا خاصیت border برای یک مقدار اولیه با
رنگ transparent مقدارهی شده و سپس مقدار border-top-color با ccc# مقداردهی شده و حتما عرض و طول باید با 0 مقداردهی بشن تا کادر اضافی حذف بشه،
به این صورت:
.arrow{
width:0;
height:0;
border:10px solid transparent;
border-top-color:#ccc;
}
قرار دادن Arrorw در کادرها!
مقدمات:
-حالا که دونستیم Arrowها چطور ایجاد میشن،این سوال پیش میاد که چطور از این Arrorwها در ساخت tooltipها میشه استفاده کرد؟
CSS به ما این اجازه رو میده که با استفاده از خاصیت content محتوا ایجاد کنیم،البته نه هر محتوایی!،و چیزی که جالبه میتونیم دقیقا مثل یه عنصر باهاش رفتار کنیم و بهش استایل مورد نظر بدیم.
-خاصیت content رو فقط میشه با انتخابگرهای after و before به کار برد.
***نکتهی بسیار بسیار بسیار مهم و حیاتی در طراحی:
***
اگه به خاصیت position عنصری مقدار relative داده بشه و در داخل این عنصر،عنصری(فرزند) با خاصیت position برابر absolute ایجاد کنیم،عنصر پدر به عنوان
مبدا مختصات برای عنصر فرزند عمل میکنه.(این نکته خیلی از جاها حلال مشکلات برای من بوده!)
خب حالا بریم سر موضوع اصلی،ابتدا استایل زیر رو به container مورد نظر میدیم:
#demo {
background-color: #333;
height: 100px;
position: relative;
width: 100px;
}
کاملا واضحه و نیاز به توضیح اضافی نداره،
فقط به relative بودن عنصر دقت کنید.
حالا استایل پایه رو برای ایجاد Arrow برای این container ایجاد میکنیم:
#demo:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
}
در اینجا توجه به دو نکته ضروریه:
1-ما فقط یک space به عنوان محتوا به این استایل دادیم،در واقع همینم کافیه چون ما فقط میخوایم یه بهانه داشته باشیم که با استایل دادن بهش به هدف برسیم،اگه content رو اصلا قید نکنیم،هر استایلی که ایجا بشه نادیده گرفته میشه چون نمیشه هوا رو رنگ آمیزی کرد!
2-ما خاصیت position این عنصر رو به absolute ست کردیم،پس میتونیم این عنصر رو نسبت به container جابجا کنیم.
حالا به عنصر استایل Arrow رو میدیم:
#demo:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-top-color: #333;
}
نکتهی دیگه ای که تو اینجا باید بهش توجه داشت اینه که پهنای Arrow توسط border مشخص میشه،که در اینجا 20px هستش!بله 20px،درواقع 10px مربوط یک گوشهی شیبدار Arrorw و 10px مربوط به گوشهی دیگه میشه.
حالا که Arrow رو ایجاد کردیم و بعد از عنصر اصلی قرار دادیم،میخوایم یکم جابجاش کنیم تا به نتیجه مورد نظر برسیم:
#demo:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-top-color: #333;
top: 100%;
left: 10px;
}
همونطور که میبینید خاصیت top به %100 که باعث میشه در پایینترین نقطهی عنصر اصلی(مبدا!) قرار بگیره،و خاصیت left برابر 10px ست شده که از عنصر اصلی 10px به سمت راست حرکت کردیم(فاصله از چپ 10px) و Arrow رو در این نقطه نقاشی کردیم!
نتیجه نهایی تا اینجای کار