ایجاد مثلث با کد css در طراحی قالب وردپرس
به احتمال زیاد در هنگام کدنویسی و طراحی قالب وردپرس با اشکال هندسی در طرح رابط کاربری یا همان psd قالب برخورد کرده اید، برای پیاده سازی اشکال هندسی چند راه وجود دارد که به اختصار هر کدام را شرح میدهیم. روش اول استفاده از فونت آیکون ها میباشد که اگر سایر ایکون و تصاویر پوسته در مجموعه فونت آیکون موجود هستند میتوانید از فونت آیکون برای نمایش ایکونهای بخشهای مختلف رابط کاربری استفاده کنید. روش دوم بکارگیری div و اختصاص تصویر به عنوان تصویر زمینه div می باشد که میتوان با تعیین موقعیت position:absolute بخش را جابه جا کرد. اما بهترین روش ایجاد مثلث با کد css است زیرا توسط چند خط کد ساده امکان ساخت مثلث و سایر اشکال هندسی فراهم میشود درنتیجه سرعت بارگذاری پوسته افزایش می یابد. در این مطلب از وان اسکریپت به آموزش و معرفی کدهای css و html لازم جهت ساخت مثلث های مکان نما راست، چپ، بالا و پایین می پردازیم پس تا انتها همراه ما باشید.
آموزش کشیدن و ایجاد مثلث با کد css و html
همینطور که میدانید مثلث سه ضلعی و شبیه پیکان دارای نوک تیز میباشد توسط کدهای زیر و با اختصاص کلاس تعریف شده به div میتوانید مثلثهایی بسازید که نوک پیکان آن روبه بالا (کلاس arrow-up)، پایین (کلاس arrow-down)، راست (کلاس arrow-right) یا چپ (کلاس arrow-left) است.
|
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 |
// 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 را تغییر دهید.
دیدگاه خود را به اشتراک بگذارید
مطالب مرتبط
فرم ورود به سایت زیبا و فارسی
توسط صادق محمدزاده در تاریخ نوامبر 5, 2016با سلام خدمت شما کاربران عزیز وان اسکریپت، امروز برای شما عزیزان فرمی حرفه ای جهت ورود کاریران به سایت را آماده دانلود کرده ایم. این فرم در سایت های خارجی برای فروش گذاشته شده است که توسط وان اسکریپت فارسی سازی و به صورت رایگان بری دانلود قرار گرفته…
آموزش CSS Reset و آشنایی با کاربرد های آن در طراحی سایت
توسط نگار مظفری در تاریخ اکتبر 30, 2016اگر به هر نحوی با طراحی سایت سر و کار داشته باشید، حتما تا امروز بار ها و بارها با فایل reset.css مواجه شده اید. اگر برایتان این سوال مطرح شده که فایل reset.css چیست و چه کاربردی دارد، این نوشته ی نسبتا کوتاه و کاملا ساده، مخصوص شماست. امروز…
آموزش ساخت منوی کشویی در سایت + افزونه
توسط آرش حسینی در تاریخ اکتبر 28, 2016درست کردن منو زیر منو با jquery و امروزه هم با CSS3 کار چندان مشکلی نیست ولی خب برای دوستانی که یه مقدار آشنایی کمتری دارند سخت است. امروز یه بسته خیلی خوب داریم که دیگه از این به بعد میتوانید به راحتی آب خوردن منو های سایت خودتون رو…
روش صحیح قرار دادن فایل فلش در سایت
توسط نگار مظفری در تاریخ اکتبر 27, 2016هرچند در حال حاضر استفاده از فایل های فلش به نسبت سالهای گذشته با کاهش روبرو شده ولی این نوع فایل ها، هنوز هم در اینترنت کاربرد دارند. چه به یک پلیر نیاز داشته باشید و چه مایل باشید یک انیمیشن در سایت خود پخش کنید و یا حتی اگر…
آموزش ایجاد افکت های مختلف چرخش عکس
توسط نگار مظفری در تاریخ اکتبر 27, 2016آموزش ایجاد افکت های مختلف چرخش عکس با رفتن ماوس به روی آن! چندی قبل (یکمی بیشتر از چندی قبل!) با هم روش کمرنگ کردن تصویر در هنگام قرار گیری ماوس به روی آن را مرور کردیم. امروز تصمیم داریم با هم روش چرخش تصویر با استفاده از CSS را…
افزونه اسلایدر حرفه ای وردپرس Slider Revolution به همراه افزودنی های کامل
توسط صادق محمدزاده در تاریخ اکتبر 25, 2016اسلایدرهای حرفه ای بسازید! اسلایدر ها در برخی از سایت ها برای مثال گالری ها و... یکی از بخش های اساسی سایت می باشد که باید به صورت حرفه ای پیاده سازی شود. امروز در وان اسکریپت افزونه ای قدرتمند به نام Slider Revolution را برای شما عزیزان آماده دانلود…
دیدگاهتان را بنویسید