مقدمه
خدمت شما کاربر محترم وبسایت 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 را برابر هیچ قرار دهید.
