مرجع دانلود اسکریپت

وان اسکریپت | اولین مرجع دانلود رایگان اسکریپت در ایران

تبلیغات
تبلیغات
تبلیغات

درخواست شما

اگـر به دنبال قالب و اسکریپت یا هر مطلب دیگری هستید و آن را پیدا نکرده اید ، می توانید درخواست خود را به تیم وان اسـکریپت ارسال کنید تا در کوتاه ترین زمان مطلب مورد نظر شما در سایت قـرار گیرد ! وان اسـکریپت همچنان به دنبال ارائه خدمــاتی با کیفیت بالا به کاربران خود می باشد.

ایجاد مثلث با کد css در طراحی قالب وردپرس

ایجاد مثلث با کد css در طراحی قالب وردپرسReviewed by صادق محمدزاده on Jun 12Rating:

به احتمال زیاد در هنگام کدنویسی و طراحی قالب وردپرس با اشکال هندسی در طرح رابط کاربری یا همان psd قالب برخورد کرده اید، برای پیاده سازی اشکال هندسی چند راه وجود دارد که به اختصار هر کدام را شرح میدهیم. روش اول استفاده از فونت آیکون ها میباشد که اگر سایر ایکون و تصاویر پوسته در مجموعه فونت آیکون موجود هستند میتوانید از فونت آیکون برای نمایش ایکونهای بخشهای مختلف رابط کاربری استفاده کنید. روش دوم بکارگیری div و اختصاص تصویر به عنوان تصویر زمینه div می باشد که میتوان با تعیین موقعیت position:absolute بخش را جابه جا کرد. اما بهترین روش ایجاد مثلث با کد css است زیرا توسط چند خط کد ساده امکان ساخت مثلث و سایر اشکال هندسی فراهم میشود درنتیجه سرعت بارگذاری پوسته افزایش می یابد. در این مطلب از وان اسکریپت به آموزش و معرفی کدهای css و html لازم جهت ساخت مثلث های مکان نما راست، چپ، بالا و پایین می پردازیم پس تا انتها همراه ما باشید.

ایجاد-مثلث-با-کد-css-طراحی-قالب-وردپرس

آموزش کشیدن و ایجاد مثلث با کد css و html

همینطور که میدانید مثلث سه ضلعی و شبیه پیکان دارای نوک تیز میباشد توسط کدهای زیر و با اختصاص کلاس تعریف شده به div میتوانید مثلثهایی بسازید که نوک پیکان آن روبه بالا (کلاس arrow-up)، پایین (کلاس arrow-down)، راست (کلاس arrow-right) یا چپ (کلاس arrow-left) است.

برای تغییر رنگ مثلث باید کد رنگ اختصاص داده شده به border را تغییر دهید اگر میخواهید اندازه انرا نیز کنترل کنید میتوانید مقدار هر border را تغییر دهید.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
نوشته شده در ۱۳۹۵/۰۳/۲۳ / 1,230 نمایش / کد مطلب : 14971

دیدگاه خود را به اشتراک بگذارید

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

35 + = 36

خرید vpn