سافت گذر دانشنامه نرم افزار - دانلود رایگان نرم افزار

همه دسته بندی ها

منو
جستجو
اطلاعیه های مهم سایت اطلاعیه های مهم سایت
💐 میلاد زینت پدر حضرت زینب سلام الله علیها مبارک باد 💐
 
 
  1. جهت رفع مشکل باز شدن سایت به دلیل بلاک توسط  نود 32 این ویدیو یا این ویدیو(ورژن 9 به بالا) یا راهنمای تصویری را مشاهده کنید
  2. اکانت های بروزرسانی نود32 با قیمت های مناسب به صورت یک ، سه ، شش و دوازده ماهه از اینجا قابل خرید می باشد.

نرم افزار های پرکاربرد

ثبت نام | ورود

اخبار آموزشی

آموزش ساخت منوی رنگارنگ با CSS3

در این مقاله می خواهیم منوبار رنگارنگ متحرک توسط CSS3 و فونت آیکن ها بسازیم. یک فونت آیکن کاراکتر مورد نظر را بجای حروف به عرصه نمایش در می آورد. این بدین معنی است که شما آیکون هایی را به شکل وکتور دریافت می کنید که در تمام مرورگرها قابل نمایش هستند و توسط html5 هم پشتیبانی می شوند.

به گزارش سافت گذر به نقل ازآی تی پورت؛ برای اینکه یک فونت آیکن را به عناصر صفحه وب تان اضافه کنید می بایست کلاس آن فونت آیکون بخصوص را فراخوانی کنید.

گام اول – HTML

کدهای زیر می بایست در صفحه index.html قرار گیرند.

 

هر یک از آیتم های منوی اصلی در واقع فرزند منوی بالایی خود می باشد که در قالب پیوندها به صورت نا مرتب در کنار هم چیده شده اند. در داخل هر یک آز آیکون ها یک فونت آیکون وجود دارد. و لیست بازشوی دیگر زمانی که ماوس بر روی منو ظاهر می شود به صورت بازشو ظاهر می شود.

منوی CSS

گام دوم – CSS

همانطور که در قطعه کد اچ تی ام ال بالا مشاهده می کنید ما لیست نا مرتبی داریم که درون UL اصلی جا خوش کرده است. بنابراین ما باید استایل خود را با دقت هرچه تمام تر بنویسیم. ما قصد نداریم منوهای اصلی که بصورت آبشاری به روی زیرمنوهای خود باز می شوند را استایل دهی کنیم ( چرا که در واقع آنها خود دارای کلاس اختصاصی آیکن فونت هستند). خوشبختانه سی اس اس برای استایل دهی عنصر فرزند نسبت به والد توسط این نشانگر < چاره اندیشی کرده است. ( < : سلکتوری است که برای انتخاب عناصر فرزند انتخاب می شود).

 

 

کدهای فوق پهنای عنصر را مشخص می کند و میزان حاشیه صفحه را مطابق وسط صفحه قرار می دهد یعنی تمامی عناصر با یک عرض ثابت نسبت چهار طرف صفحه قرار می گیرند البته این خصوصیات تنها روی عنصر نا مرتب اول اثر می کند که از نوادگان مستقیم عنصر  #colorNav می باشد. این مورد را بخاطر بسپارید حالا ببینیم منوهای اصلی به چه شکل ظاهر می شوند.

 

عناصر مورد نظر ما به صورت inline-block ظاهر می شوند بدین معنی که گزینه های منوی ما در یک خط نشان داده می شوند و ما می توانیم یک موقعیت نسبی خاص را به این عناصر نسبت دهیم و منوهای آبشاری را به درستی جابجا کنیم. عنصر لنگر(که به منظور تعیین موقعیت و جابجایی عناصر صفحه استفاده می شود)  نیز خود در فونت آیکن ها دارای کلاس خاص خود می باشد.

 

حالا با منوهای آبشاری کار را دنبال می کنیم. در اینجا از خاصیت CSS3 transition animation بهره می بریم. حدا اکثر ارتفاع را مطابق با مقدار ۰ قرار می دهیم تا خاصیت آبشاری منو مخفی شود. در سوی دیگر وقتی ماوس بر روی منو ظاهر شود و به قولی خاصیت Hover اجرا شود مقدار بزرگی را به ویژگی Height نسبت می دهیم که باعث نمایش آبشاری منو خواهد شد.

 

تکه کد زیر هم به قولی استارت خاصیت انیمیشن در css است که با تنظیم خاصیت height با یک مقدار زیاد که باعث نمایش آبشاری منو خواهد شد.

 

مقدار ۲۰۰ پیکسل به صورت دلخواه است و در صورت تمایل می توانید مقدارش رو کم یا بیشتر کنید البته اگر عناصر بازشوی زیادی در صفحه دارید توصیه می شود مقدارش را کم کنید و اگر تعداد عناصر بازشوی شما کم است می توانید مقدار بیشتری را به خاصیت height اختصاص دهید که ارتفاع زیر منوهای آبشاری را تنظیم می کند.

گام بعدی استایل دهی منوهای آبشاری است.

 

در واقع باید گفت ما بدون رنگ های فانتزی کاری از پیش نبرده ایم. نسخه (استایل) از آنها را مشاهده می کنید.

 

یکی از جنبه های استفاده از فونت آیکن ها اینست که شما می توانید رنگ آنها را تغییر دهید بدین منظور خاصیت Color آن را تغییر دهید. این بدین معناست که شما می توانید تمام خواصش را تنها توسط CSS تغییر دهید و مطابق میل خود آنها را سفارشی سازی کنید.

فونت آیکن های مجموعه ای ارزشمند بمنظور توسعه عناصر وب می باشند. از آنجایی که آنها مرتب می باشند می توانید خواص آنها را مطابق با میل و سلیقه خود تغییر دهید. در مثال فوق به هیچ از جاوا اسکریپت یا تصاویر استفاده نشده است. در نتیجه شما می توانید آنرا مطابق سبک فعلی طراحی خود در عرض چند دقیقه استفاده کرده و بکار بگیرید.

نظرتان را ثبت کنید کد خبر: 26063 گروه خبری: اخبار آموزشی منبع خبر: itport.ir تاریخ خبر: 1394/01/28 تعداد مشاهده: 2334
اخبار مرتبط با این خبر
نظر های کاربران
سرور آپدیت نود 32
پیشنهاد سافت گذر
تحدیر کل قرآن کریم از احمد دباغ

تحدیر کل قرآن کریم از احمد دباغ

تحدیر سوره های قرآن احمد دباغ

Attract Wealth Kelly Howell

Attract Wealth Kelly Howell

موسیقی بی کلام روانشناسی

سخنرانی آماده شده برای دهه اول محرم سال 96 - شب پنجم

سخنرانی آماده شده برای دهه اول محرم سال 96 - شب پنجم

سخنرانی برای پنجم محرم 96

Film Impact Premium Video Effects 25.2.5

Film Impact Premium Video Effects 25.2.5

افزونه پریمیر پرو

Draftable Desktop 25.6.0

Draftable Desktop 25.6.0

مقایسه اسناد متنی

Loaris Trojan Remover 3.2.109

Loaris Trojan Remover 3.2.109

حذف تروجان لوریس

ظهور امام زمان عج

ظهور امام زمان عج

مهدویت

Movie Maker – Photo Video Maker With Music PRO 1.12 For Android +4.1

Movie Maker – Photo Video Maker With Music PRO 1.12 For Android +4.1

مووی میکر

Batman Ninja

Batman Ninja

بتمن

5 جلسه حضرت زهرا سلام الله علیها، نخستین شهید راه امامت و ولایت از حجت الاسلام والمسلمین انصاریان

5 جلسه حضرت زهرا سلام الله علیها، نخستین شهید راه امامت و ولایت از حجت الاسلام والمسلمین انصاریان

حاج آقا انصاریان با موضوع حضرت زهرا س نخستین شهید راه امامت و ولایت

Pluralsight - iOS7 Fundamentals

Pluralsight - iOS7 Fundamentals

فیلم آموزش مهارت‌های بنیادی iOS7

Parking Star 2 1.01 for Android

Parking Star 2 1.01 for Android

بازی پارک ماشین

مداحی حاج عبدالرضا هلالی سال 96

مداحی حاج عبدالرضا هلالی سال 96

محرم شب اول تا شام غریبان هلالی

Pluralsight (TrainSignal) - Windows Server 2012 Configuring Advanced Services (70-412) Part 1 / 2 / 3 / 4

Pluralsight (TrainSignal) - Windows Server 2012 Configuring Advanced Services (70-412) Part 1 / 2 / 3 / 4

مجموعه‌ی 4 دوره آموزش تصویری پیکربندی سرویس‌های پیشرفته‌ی ویندوز سِـروِر 2012 – آزمون 412-70

Huru Beach Party

Huru Beach Party

مدیریت کافه تریا

Beast Quest

Beast Quest

اکشن نقش آفرینی RPG

BB FlashBack Pro 5.60.0.4813

BB FlashBack Pro 5.60.0.4813

ضبط از صفحه نمایش بی بی فلش بک

Adobe Photoshop Lightroom 8.4 / 7.0 / 6.2 / 5.5 / 4.4

Adobe Photoshop Lightroom 8.4 / 7.0 / 6.2 / 5.5 / 4.4

فتوشاپ لایت روم

Autodesk AutoCAD Civil 3D 2016 SP1 x64

Autodesk AutoCAD Civil 3D 2016 SP1 x64

نرم افزار اتوکد ویژه عمران و شهر سازی

گلچین مولودی ولادت امام جواد (ع)

گلچین مولودی ولادت امام جواد (ع)

مولودی ولادت امام محمد تقی

Automate Premium 1.21.2 for Android

Automate Premium 1.21.2 for Android

اتومیت

مداحی سید رضا نریمانی سال 98

مداحی سید رضا نریمانی سال 98

محرم شب اول تا شام غریبان نریمانی

Nuclear Throne

Nuclear Throne

تاج و تخت هسته‌ای

Ocean HD 1.8.1 for Android +2.3

Ocean HD 1.8.1 for Android +2.3

اعماق اقیانوس

اندیشه و تفکر اسلامی

اندیشه و تفکر اسلامی

جهان بینی اسلامی 1

Checkers Pro V 5.00.26 for Android +2.3

Checkers Pro V 5.00.26 for Android +2.3

بازی دوز

ChatGPT v1.1.0 Desktop Application

ChatGPT v1.1.0 Desktop Application

اپلیکیشن چت‌جی‌پی‌تی برای ویندوز

چگونه بازی پلت فرم بسازیم؟

چگونه بازی پلت فرم بسازیم؟

ساخت بازی پلتفرم

CyberLink YouCam Deluxe 10.1.4203.0

CyberLink YouCam Deluxe 10.1.4203.0

یوکم مدیریت دوربین و وب کم

Sky Gamblers: Rise of Glory 1.5.9 for Android +2.3

Sky Gamblers: Rise of Glory 1.5.9 for Android +2.3

هواپیما

Monument Valley 1  2.7.12 / 2  1.3.15 for Android +4.4

Monument Valley 1 2.7.12 / 2 1.3.15 for Android +4.4

بازی نجات شاهزاده

منطق فازی

منطق فازی

آشنایی با منطق و مدیریت فازی

PersianSMS 2.00 for Android

PersianSMS 2.00 for Android

بسته های بروز و رایگان پیامک در inbox شما

Harry Potter 7 Part 1

Harry Potter 7 Part 1

هری پاتر برای کامپیوتر

Styx - Master of Shadows

Styx - Master of Shadows

استیکس - ارباب سایه‌ها

تحلیل قیام سیدالشهدا علیه السلام با سخنرانی آیت الله سیدمحمدمهدی میرباقری

تحلیل قیام سیدالشهدا علیه السلام با سخنرانی آیت الله سیدمحمدمهدی میرباقری

حاج آقا سیدمحمدمهدی میرباقری با موضوع تحلیل قیام سیدالشهدا ع

AnyDesk 9.5.7 Final Win/Mac/Linux

AnyDesk 9.5.7 Final Win/Mac/Linux

انی دسک نرم‌افزار کنترل از راه دور کامپیوتر

مناظره شیعه و سنی

مناظره شیعه و سنی

الصوارم المهرقة فی جواب الصواعق المحرقة

Ashampoo Photo Commander 18.0.5 (x64)

Ashampoo Photo Commander 18.0.5 (x64)

ویرایش عکس

سخنرانی حجت الاسلام رفیعی درباره اخلاص امام علی

سخنرانی حجت الاسلام رفیعی درباره اخلاص امام علی

اخلاص امام علی از زبان حجت الاسلام رفیعی

خبرنامه

با عضویت در خبرنامه، زودتر از همه باخبر باش!