اموزش ایجاد مثلث با ۵٫۰
دوستان عزیز سلام ، همراهان عزیز وقت شما بخیر.امیدوارم آماده یکی دیگراز آموزش های ما که درمورداموزش ایجاد مثلث با css میباشد که به شما در انتخاب و کار با وردپرس میتواند بسیار کمک کند.در این آموزش قراره که کمی در مورد ایجاد شکلهای مختلف با استفاده از زبان css صحبت کنیم البته شما باید توجه کنید که استفاده از css در تمامی قسمت های کار های وب سایت مورد استفاده است و بسیار بسیار مهم است.پس به این کد نویسی مطمئنا نیاز دارید.
آموزش ایجاد مثلث با css
دوستان همراه من به احتمال زیاد در هنگام کدنویسی و طراحی قالب وردپرس و همچچنین افزونه های وردپرس با اشکال هندسی در طرح رابط کاربری یا همان psd قالب برخورد کرده اید و شاید نیاز به شکل هایی داشتید که نمیتوانید آن ها را ایحاد کنید، برای پیاده سازی اشکال هندسی چند راه وجود دارد که به اختصار هر کدام را شرح میدهیم.پس حتما با من همراه باشید دوستان عزیز و محترم
۱٫ روش اول استفاده از فونت آیکون ها میباشد
اگر سایر ایکون و تصاویر پوسته در مجموعه فونت آیکون موجود هستند میتوانید از فونت آیکون برای نمایش ایکونهای بخشهای مختلف رابط کاربری استفاده کنید که خب روشی خوب و ساده برای این نمایش دادن است و میتواند بسیار خوب و مفید باشد. روش دوم بکارگیری div و اختصاص تصویر به عنوان تصویر زمینه div می باشد که میتوان با تعیین موقعیت position:absolute بخش را جابه جا کرد که خب دوستان این نیز روشی دیگر است اما نسبت به روش اول کمی دشوار تر است. اما بهترین روش ایجاد مثلث با کد css است زیرا توسط چند خط کد ساده امکان ساخت مثلث و سایر اشکال هندسی فراهم میشود درنتیجه سرعت بارگذاری پوسته وب سایت وردپرسی شما افزایش می یابد.حال دوستان در این قسمت توجه کنید که در این مطلب به آموزش و معرفی کدهای css و html لازم جهت ساخت مثلث های مکان نما راست، چپ، بالا و پایین می پردازیم پس تا انتها همراه ما باشید.
دوستان من اطلاع ندارم شما چقدر با کد های css آشنایی دارید یا ندارید.اما در صورتی که با این موراد آشنایی دارید میدانید مثلث سه ضلعی و شبیه پیکان دارای نوک تیز میباشد توسط کدهای زیر و با اختصاص کلاس تعریف شده به div میتوانید مثلثهایی بسازید که نوک پیکان آن روبه بالا (کلاس arrow-up)، پایین (کلاس arrow-down)، راست (کلاس arrow-right) یا چپ (کلاس arrow-left) است.پس به کد های زیر توجه داشته باشید:
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
// html codes
<div class=”arrow-up”></div>
<div class=”arrow-down”></div>
<div class=”arrow-left”></div>
<div class=”arrow-right”></div>
// css codes
.arrow-up{
width: 0; height: 0;
border-left: 5px solid transparent;border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow-down{
width:0;height:0;
border-left: 20px solid transparent;border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right{
width: 0;height: 0;
border-top: 60px solid transparent;border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-left{
width:0;height:0;
border-top: 10px solid transparent;border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
خب روش کار را متوجه شدید؟ بسیار ساده است.حال در این قسمت توجه کنید که برای تغییر رنگ این مثلث های فوق که ترسیم شد باید کد رنگ اختصاص داده شده به border را تغییر دهید اگر میخواهید اندازه انرا نیز کنترل کنید میتوانید مقدار هر border را تغییر دهید.پس میبینید که تمامی موارد آن کنترل شدنی است و اصلا جای نگرانی و مشکل برای شما باقی نخواهد گذاشت
خب دوستان این آموزش وردپرس هم در این قسمت به انتها رسید.خیلی ممنونم از این همراهی شما
در ادامه این آموزش ها هم حتما با من همراه باشید چون آموزش های خوب و حرفه ای برای شما تهیه شده است
موفق و پیروز باشید
