آموزش ساخت پیکان جهت دار برای باکس ها توسط css3
Your browser doesn't support video.
Please download the file: video/mp4
مقدمه
خدمت شما کاربر محترم وبسايت ilikephp سلام عرض مي کنم. با يکي ديگه از آموزش هاي ويژه برنامه نويسي و طراحي وب در خدمت شما هستم. در آموزش امروز قصد داريم تا با نحوه ساخت باکس هاي پيکان دار يا باکس هاي فلش دار توسط CSS3 آشنا شويم.
همون طور که مي دونيد گاهي براي نمايش محتواي يک منو يا يک باکس يک پیکانکوچک از وسط جهت هاي مختلف آن به سمت محتواي آن طراحي ميکنند. اين نوع طراحي بيشتر براي آيتم هاي منوهاي آبشاري که داراي زير منو هستند در نظر گرفته مي شود.
پيش نيازهاي لازم براي يادگيري اين بخش عبارتند از :
آشنايي با
نحوه ساحت فلش يا پيکان براي باکس
خب روند کار بسيار ساده است. ابتدا يک div به عنوان باکس با کلاس box در html قرار مي دهيم و عبارتي را داخل آن مي نويسيم.
<div class="box">
Css arrow
</div>
حال کمي استايل به اين باکس مي دهيم. مثلا رنگ متن داخل جعبه را سفيد و بزرگتر مي کنيم و يا رنگ زمينه اي براي اين باکس تعيين مي کنيم.
کار اصلي که بايد در اين قسمت صورت بگيرد توليد يک مثلث داخل باکس است. هنگامي که مقدار position اين مثلث را برابر absolute قرار دهيم به راحتي مي توانيم مکان اين مثلث را در داخل باکس تعيين کنيم. فقط در نظر داشته باشيد که مقدار position خود جعبه بايستي relative باشد.
پس کدهاي استايل دهي جعبه به صورت زير مي شود.
.box {
position: relative;
background-color: aqua;
padding: 40px;
text-align: center;
color: white;
font-size: 40px;
width: 200px;
height: 100px;
margin: 10% 40%;
position: relative;
}
بسيار عالي. حال میرسيم به طراحي مثلث با css درون اين باکس. به جاي اينکه يک div ديگر داخل اين باکس ايجاد کينم مي توانيم اين مثلث را براي خصوصيات after و يا before کلاس box توليد کنيم. به شکل زير :
.box:after {
bottom: 100%;
left: 50%;
position: absolute;
width: 0;
height: 0;
border: 50px solid transparent;
margin-left: -50px;
border-bottom-color: aqua;
content: "";
}
اجراي کدهاي بالا به شکل زير مي شود. :
براي خصوصيت after به اين صورت عمل کرديم. ابتدا مقدار position آن را برابر absolute قرارداديم. با اين کار تعيين مکان دقيق آن راحت مي شود. سپس مقدار width و height آنرا برابر 0 قرار داديم و به در عوض ضخامت حاشيه يا border آنرا برابر 50px تعيين کرديم. به اين صورت ما يک مربع توليد کرديم. رنگ حاشيه هاي چپ، راست و بالا را برابر transparent قرار داديم تا نمايان نماشند. ولي مقدار border پاييني را برابر رنگ background کل باکس قرار داديم. حال يک مثلث به جهت بالا داريم که کافيه آن را به بالاترين سط و وسط باکس هدايت کنيم. براي اين کار مقدار bottom را برابر 100% و مقدار left را برابر50% تعيين کرديم. البته با اينکار به دليل وجود ضخامت 50 پيکسلي مثث وسط قرار نمي گيرد و بايد به اندازه ضخامت حاشيه margin-left منفي يعني -50px داشته باشيم. ضمنا چون براي خصوصيت after اين موارد تعيين شده حتما contet را برابر هيچ قرار دهيد.
نظرات کاربران