منوی آکاردئون Css3 ریسپانسیو در چهار مدل مختلف

در این منو به هیچ عنوان از js ها استفاده نشده است و تماما با html5 و css3 طراحی شده که شما عزیزان میتوانید در ادامه آن را دانلود نمایید …

ویژگی های منوی آکاردئونی :

بدون استفاده از js و فقط استفاده از html5 و css3

کاملا ریسپانسیو و بهینه سازی شده

در ۴ طراح کلی مختلف

بهینه شده برای نمایش در تمامی مرورگرها

استفاده از فونت آیکون

دارای امکان ساخت ساب منو

منوی های آکاردئونی ZoZo Accordion نسخه 4.4

ویژگی های ZoZo :

کاملا ریسپانسیو

دارای بیش از 30 دیزاین و ظاهر مختلف

منوی های کشویی افقی و عمودی

کاملا قابل شخصی سازی

کدنویسی شده با html5 و css3

کدنویسی بهینه شده برای موتور های جستجو

در این پست از اسکریپت دات کام فهرست آماده Mega Accordion به صورت ریسپانسیو در 8 رنگ را برایتان آماده ساخته ام .

این منوی به صورت css3 و جی کوئری طراحی شده که دارای طراحی شیک و ساده میباشد .

ضمنا فایل آموزش کامل این منو در فایل دانلودی موجود میباشد که به راحتی میتوانید از آن استفاده نمایید .

ویژٰگی های Mega Accordion :

دارای 8 استایل رنگی

کاملا ریسپانسیو و دارای Grid بندی

طراحی با css3 و جی کوئری

استفاده از فونت آیکون ها

قابلیت نمایش در تمامی مرورگرها

دارای فایل آموزش و دمو

باز هم یک پست مربوط به اسلایدر های css3 و این بار اسلاید عکس کشویی توسط html5 و css3 از سایت اسکریپت دات کام …

پس از قرار دادن چند اسلایدر css3 در وب سایت اسکریپت دات کام و استقبال کاربران عزیز , بر آن شدم تا در این پست آموزش ساخت اسلایدر عکس به صورت کشویی را قرار دهم .

این اسلایدر کاملا با html5 و css3 ساخته شده و به هیچ عنوان java script و یا … به کار نرفته است . ضمنا این اسلایدر قابلیت درج توضیح مختصر برای هر عکس را دارا می باشد .

چندی پیش در مورد آموزش اضافه نمودن فونت دلخواه به وب سایت در css3 را به شما عزیزان آموزش دادم که میتوانید از اینجا مشاهده نمایید .

اما در این پست از سایت اسکریپت دات کام , قصد دارم آموزش استفاده از Font Icon ها در وب سایت را دارم . شاید برایتان سوال پیش اومده باشه که Font Icon چیست ؟

تصاویری که به صورت وکتوری و در قالب فونت ارائه میشوند را Font Icon میگویند . طبیعتا دارای ویژگی های خاصی از جمله بارگذاری ساده و کم حجم , عدم محدودیت در سایز و … را دارا می باشد .

یکی از معروفترین فونت آیکون های حال حاضر , فونت آیکون Font Awesome میباشد که بنده در این مطلب , به آموزش این فونت آیکون خواهم پرداخت.

نکته مهم این است که تعداد فونت آیکون های زیادی در سراسر اینترنت هر روزه معرفی میشود که با یادگیری Font Awesome , شما میتوانید از آنها هم استفاده نمایید . به این دلیل که بسیار شبیه به هم هستند .

با سلام خدمت بازدیدکنندگان محترم سایت اسکریپت دات کام . چندی پیش مطلبی در مورد انواع واحداندازه گیری در css منتشر کردم که میتوانید با مراجعه به این لینک مشاهده فرمایید .

امروز و در این پست قصد معرفی یک واحد اندازه گیری جدید دیگر در css3 را دارم . واحدی به نام rem که بسیار شبیه به em که در لینک بالا توضیح داده شده می باشد.

اگر میخواهید با این واحد اندازه گیری اشنا شوید , به ادامه مطلب مراجعه کنید …

پیشنهاد : دانلود پکیج کامل 1700 فونت های فارسی غیر وب 

یکی از مشکلاتی که طراحان سایت با آن روبرو بودند , عدم توانایی انتخاب فونت دلخواه در سالیان پیش در محیط وب بود . طراحان فقط میتوانستند از 3 فونت Tahoma , Arial و Mono Type استفاده کنند .

خوشبختانه چند سالی میشه که با روی کار اومدن Css3 این مشکل به طور کلی رفع شده و طراحان وب به راحتی میتوانند از هر فونتی که دوست دارند در دیزاین خود به کار برده و این فونت ها قابل نمایش برای تمامی مرورگر ها و Device ها می باشند .

اما مشکل بعدی برای این کار , تبدیل فونت ها از فرمت TTF به فرمت های SVG , WOFF , EOT ( برای نمایش در تمامی مرورگرها ) میباشد . وقتی فونت TTF به این فرمت ها تبدیل میشود , فونت های کیفیت بالا به فونت هایی با کیفیت پایین و تقریبا غیر خوانا تبدیل میشود .

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

این پکیج برای اولین بار با بالاترین کیفیت فونت و کاملا اصلاح شده , به صورت رایگان از این سایت منتشر میشود .

همانطور که شما توسعه دهنگان وب میدانید , ما در CSS تابحال پراپرتی برای وسط چین کردن تگ به صورت عمودی را نداشته ایم و اکثرا با margin این کار را انجام میدادیم .

البته شاید همین الان به ذهنتون پراپرتی position خطور کرده باشه . کاملا درسته ولی این کار به صورت ترفندی میباشد و ضمنا برای این کار مجبور میشویم که به تگ مورد نظر پراپرتی position بدهیم که خود مشکلاتی را برای مت فراهم میسازد . ( برای مشاهده ترفند با position اینجا رو کلیک کنید )

در css3 پراپرتی اضافه شده به نام flex که کاربردهای فراوان و گوناگونی دارد که در اینجا فقط یکی از آن کارها که طریقه وسط چین کردن عمودی تگ ها میباشد را آموزش خواهم داد .

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