چگونه منو ذوزنقه طراحی کنیم [بایگانی]

View Full Version : چگونه منو ذوزنقه طراحی کنیم

bitcob589

سه شنبه 19 آذر 1392, 10:29 صبح

با سلام
چگونه منو ذوزنقه با استفاده از css طراحی کنیم شبیه عکس زیر
113739

Javidhb

سه شنبه 19 آذر 1392, 10:57 صبح

div { width: 150px;
height: 100px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
background: red;
border-radius: 10px;}

دمــو (http://jsfiddle.net/uV5Xg/)

bitcob589

سه شنبه 19 آذر 1392, 11:21 صبح

در مرورگر اینترنت اکسپلور کد css بالا به جای نمایش ذوزنقه مستطیل نمایش داده می شود اما درون مرورگر کروم به صورت همان ذوزنقه نمایش داده می شود چگونه درون تمام مرورگرها به صورت ذوزنقه نمایش دهیم

p30online

سه شنبه 19 آذر 1392, 11:49 صبح

اینترنت اکسپلور ر پشتیبانی نمی کند !

bitcob589

سه شنبه 19 آذر 1392, 12:28 عصر

اینترنت اکسپلور ر پشتیبانی نمی کند !

آیا راهی وجود دارد که درون تمام مرورگرها منو ذوزنقه نمایش دهیم

Javidhb

سه شنبه 19 آذر 1392, 13:08 عصر

transform: skew(-20deg);

رو اضافه کنید.

دمـــو (http://jsfiddle.net/uV5Xg/1/)

bitcob589

سه شنبه 19 آذر 1392, 15:13 عصر

transform: skew(-20deg);

رو اضافه کنید.

دمـــو (http://jsfiddle.net/uV5Xg/1/)

توضیحات پست قبل انجام شد ولی هنوز در مرورگر اینترنت اکسپلور کد css بالا به جای نمایش ذوزنقه مستطیل نمایش داده می شود

Javidhb

سه شنبه 19 آذر 1392, 15:29 عصر

با ie 10 که مشکلی نداشت..

اگه منظورتون ie8 به قبله که اونا از css3 پشتیبانی نمیکنن و باید از عکس png با پشت زمینه نامرئی (transparent) استفاده کنید.

Omid Jackson

سه شنبه 19 آذر 1392, 15:33 عصر

ببینین جواب میگیرین
http://css3pie.com/

bitcob589

سه شنبه 19 آذر 1392, 15:48 عصر

با ie 10 که مشکلی نداشت..

اگه منظورتون ie8 به قبله که اونا از css3 پشتیبانی نمیکنن و باید از عکس png با پشت زمینه نامرئی (transparent) استفاده کنید.

آیا راهی دیگری وجود ندارد که نیاز به عکس نباشد

ببینین جواب میگیرین
http://css3pie.com/

امتحان کردم ولی نتیجه ای نداشت

Omid Jackson

سه شنبه 19 آذر 1392, 15:52 عصر

آیا راهی دیگری وجود ندارد که نیاز به عکس نباشد

امتحان کردم ولی نتیجه ای نداشت
http://stackoverflow.com/questions/6824358/what-is-the-ie-filter-if-any-for-css3-skew

bitcob589

سه شنبه 19 آذر 1392, 16:53 عصر

http://stackoverflow.com/questions/6824358/what-is-the-ie-filter-if-any-for-css3-skew
امتحان کردم نتیجه ای نداشت:گریه:

Omid Jackson

سه شنبه 19 آذر 1392, 16:55 عصر

امتحان کردم نتیجه ای نداشت:گریه:
شاید اشتباه انجام میدین که اینجوری میشه

bitcob589

سه شنبه 19 آذر 1392, 17:07 عصر

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

نمونه صحیح را بگذارید شاید اشتباه می کنم

Omid Jackson

سه شنبه 19 آذر 1392, 17:26 عصر

-ms-transform: skew(-20deg);
این برای IE9
من IE8 ندارم بدونم تو اونا درست عمل میکنن یا نه :|

bitcob589

سه شنبه 19 آذر 1392, 17:34 عصر

-ms-transform: skew(-20deg);
این برای IE9
من IE8 ندارم بدونم تو اونا درست عمل میکنن یا نه :|
در IE8 عمل نمی کند

بهزاد علی محمدزاده

سه شنبه 19 آذر 1392, 17:57 عصر

از کتابخانه modernizr (http://modernizr.com/) استفاده کن ببین حل میشه یا نه . این و به ابتدای header لینک کن . و بعد تگ html رو تغییر بده :

<script src="js/modernizr-1.0.min.js"></script>

<html class="no-js">

بهزاد علی محمدزاده

سه شنبه 19 آذر 1392, 17:59 عصر

شما http://css3pie.com/ رو هم امتحان کردی و نشد ؟ یعنی داری درست کار و انجام میدی؟ کد رو بذارید لطفا .

bitcob589

سه شنبه 19 آذر 1392, 18:14 عصر

شما http://css3pie.com/ رو هم امتحان کردی و نشد ؟ یعنی داری درست کار و انجام میدی؟ کد رو بذارید لطفا .

در سایت http://css3pie.com/ امتحان کردم نتوانستم ذوزنقه کنم اما لبه ها را گرد کردم در ie مستطیل نمایش می دهد اما در مرور گر کروم به درستی نمایش می دهد اما کدهای که در پست های قبلی گذاشته شد همگی در مرور گر کروم به درستی ذوزنقه نمایش می دهد اما در اینترنت اکسپلور 8 هیچ کدام به صورت ذوزنقه نمایش نمی دهد

بهزاد علی محمدزاده

سه شنبه 19 آذر 1392, 18:19 عصر

ببیند css3pie من باهاش کار نکردم اما یه فایل js داره که دانلود می کنی و به صفحه اضافه . اونوقت باید بشه که کدهای دوستمون رو اجرا بگیری در ie . آیا این کار رو انجام دادید ؟

bitcob589

سه شنبه 19 آذر 1392, 18:28 عصر

ببیند css3pie من باهاش کار نکردم اما یه فایل js داره که دانلود می کنی و به صفحه اضافه . اونوقت باید بشه که کدهای دوستمون رو اجرا بگیری در ie . آیا این کار رو انجام دادید ؟

این فایل js چگونه باید استفاده کرد اگر امکان دارد نمونه ای بگذارید

Javidhb

سه شنبه 19 آذر 1392, 19:08 عصر

امیدوارم مشکلتون حل بشه..

اما احتیاجی به حساسیت به خرج دادن برای ie های قدیمی نداشته باشید... کسی که مرورگرش مال 5 سال پیشه، نباید انتظار داشته باشه که صفحات وب رو مثل بقیه ببینه!

همونطور که آقا بهزاد گفتن، برای استفاده از تکنولوژیهای جدید css3 و html5 توی مرورگرهای قدیمی بهتره از modernizr (http://modernizr.com/)استفاده کنید.

توی قسمت دانلود جلوی transform (زیر css ) تیک بزنید و دانلود کنید و... .