عکس چرخشی

[masiha68]

سلام
کسی می دونه این عکس (عکسی که توی سایت http://www.wordpress98.com/ هست و با قرار گرفتن ماوس می چرخه) چه جوری درست شده

[hamid_shrk]

منظورتون دقیقا کدم عکس هست که وقتی ماوس میره روش میچرخه؟
من همچین چیزی ندیدم!

[Saber Mogaddas]

سلام
از دستور زیر استفاده کرده ولی تو ie ساپورت نمیشه فقط تو ff میچرخه.. از دستورات Css3 هست..

-moz-transition-duration

این سایت پیش فرض آرم رو به صورت زیر قرار داده ..

-moz-transition-duration: 1s;
-moz-transition-property: -moz-transform;




و hover آرم رو به صورت زیر تنظیم کرده..

arm:hover { -moz-transform: scale(1) rotate(360deg) translate(0px, 0px) skew(0deg, 0deg);


}


موفق باشی..

[masiha68]

میشه یه مثال بزنید
فرض کنید من یه عکس گذاشتم توی هدر و می خوام حالا با ماوس موو حرکت کنه
چیکار باید بکنم

[hamid_shrk]

میشه یه مثال بزنید
فرض کنید من یه عکس گذاشتم توی هدر و می خوام حالا با ماوس موو حرکت کنه
چیکار باید بکنم
با اجازه از آقا صابر :
شما به عکستون یک کلاس بدید و تو css اینو بنویسید :

.arm
{
-moz-transition-duration: 1s;
-moz-transition-property: -moz-transform;


}
.arm:hover
{
-moz-transform: scale(1) rotate(360deg) translate(0px, 0px) skew(0deg, 0deg);
{

[masiha68]

ممنون از لطفتون
فقط مشکل اینجاست که چرا توی گوگل کروم کار نمی کنه
نمی شه یه کاری کرد توی همه ی مرور گرا کار کنه !

[hamid_shrk]

مشکل css3 اینه که تو تمام مرور گرها کار نمیکنه و باید منتظر بود تا مرور گرها خودشون رو تطبیق بدن.
البته کروم css3 رو میشناسه اما انگار اون دستور خاص رو نمیشناسه ، فایر فاکس من هم نسخه آخر نیست و این دستور رو نادیده میگیره.

[cyrusthegreat]

دوست عزیز

شما با قرار دادن -moz در اول دستور دارید می گید فقط فایرفاکس اینرو انجام بده. خوب معلومه کروم انجامش نمی ده. برای کروم و سافاری باید بجای -moz از عبارت -webkit و برای اپرا باید از عبارت -o استفاده کنید. یعنی برای هرکدوم یه دستور.

[masiha68]

ممنون از همگی
فقط کاش می شد توی اکسپلورر هم درستش کرد

[hamid_shrk]

از فایل PIE.htc استفاده کن شاید تو Ie درست بشه چون این فایل css3 رو واسه ie تطبیق میکنه :
84667
این فایل رو به یکی از پوشه هاتون اضافه کنید و در ادامه همون کلاس css این خط رو بنویسید :
behavior:آدرس فایل PIE.htc

[cyrusthegreat]

hamid_shrk عزیز

این فایل pie.htc فقط برای مقادیر زیر از CSS3 کاربرد داره. نه این مقدار transform.

border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image


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

[cyrusthegreat]

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

[masiha68]

ممنون
ولی کار نکرد
من فایل رو روی روت اصلی کار گذاشتم و ادرس رو بهش دادم ولی بازم نشد
کد اینجوری شده behavior: /PIE.htc درسته !؟
البته با توضیحی که دوستان دادن زیاد هم واجب نیست که استفاده بشه چون به هر حال قالب باید سبک باشه تا سریعتر لود بشه
ممنون از همگی

[cyrusthegreat]

دوست عزیز

دو پست قبل تر رو که من دادم بخونید.

[hamid_shrk]

hamid_shrk عزیز

این فایل pie.htc فقط برای مقادیر زیر از CSS3 کاربرد داره. نه این مقدار transform.


border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image



پس با این نمی شه مشکل رو حل کرد. همچنین، این فایل بدلیل حجم زیاد و پردازش زیادی که به مرورگر تحمیل می کنه، استفاده اش اصلا توصیه نمی شه.
درست میفرمایید من هم شک داشتم ،
اما بنظرتون این حجم زیادی که میگید بدتره یا اینکه کلا از css3 استفاده نکنیم و بجاش از عکس استفاده کنیم ؟یا اینکه از css3 استفاده کنیم و ie رو نادیده بگیریم ؟

[cyrusthegreat]

خدمت شما عرض کنم که، استفاده از CSS خالی برای ie بسیار بهتر هستش. حتی استفاده از PNG Fix هم به نظر من توجیه نداره. اینترنت اکسپلورر نسخه های 8 به پایین اینجوری نوشته شدن. خب پس بهتره با همون ها کار کنیم و سعی نکنیم با افزودن پردازش بیشتر، اونهارو مجبور کنیم که کاری که اصلا در حیطه شون نیست انجام بدن. فقط استفاده از filter های خود ie به نظر من کاملا استاندارد و مناسب هست.

[hamid_shrk]

دوست عزیز این حرفی که میگید رو قبول دارم اما قبول دارید در عمل جواب نمیده؟
مثلا شما تو یک وب سایت برای سایه دار کردن و دور گرد کردن از css3 استفاده میکنید (چون استفاده از عکس هم کیفیت رو میاره پایین هم سرعت لود رو) ، حالا سایت ما تو ie اصلا زیبا نمایش داده نمیشه (بیشتر کاربرها هم متاسفانه از ie استفاده میکنن) ، ما نمیتونیم این قضیه رو به حال خودش ول کنیم . تمام طراح های حرفه ای که من باهاشون کار کردم و خیلی هم قبولشون دارم این قضیه رو با PIE.htc حل میکنن.

[cyrusthegreat]

دوست عزیز

طراح اگر طراح باشه، همه کاری رو می تونه انجام بده. شما کد PIE.htc رو نگاه کردید؟؟؟ برای تمامی مواردی که گفتم اون بالا کد نوشته. این یعنی اون فایل اعمال شدن باید کامل بارگزاری باشه. یه وبسایت که 10 مگ نیست که بخواییم از pie هم استفاده کنیم براش. حجم وبسایت هرچقدر کمتر بهتر. PIe.htc برای کسایی هست که براشون بهینه بودن کار مهم نیست و نمی خوان خودشون رو درگیر سازگاری طراحی با ie بکنن. چون باید حقه هاش رو بلد باشی. اونها هم چون بلد نیستن می رن سراغ آسان ترین راه. این حرفه ای بودن نیست. بلکه نشونه مبتدی بودنه. مثلا همین مثالی که شما زدید. یعنی سایه دار کردن. طراح اگر بلد باشه، خیلی راحت با filter ها می تونه سایه ایجاد کنه. خیلی راحت.

در مورد بیشتر کاربر ها هم نمی دونم آمار جدید رو دیدید یا نه؟ IE حدود 30 درصد سهم بازار را در اختیار دار. گذشت اون روزی که 90 درصد بود. الان جمع مرورگر های بروز حدود 67 درصد بازار رو در اختیار دارن. یعنی سایت شما در 67 درصد بازدید هاش درست نمایش داده می شه. از اون 30 درصد هم فقط 10 درصد ie6 هست. من خودم برای سازگاری قالب با ie6 هزینه دریافت می کنم. فقط برای ie8 و ie9 بصورت پیشفرض تضمین درستی نمایش می دم.

بهترین راه حل هم اول استفاده از filterها و بعد از اون هم استفاده از عکس هست. فقط برای ie. نه دیگر مرورگر ها.

[hamid_shrk]

این سایت رو نگاه کنید :
http://www.irkaspersky.com (http://www.irkaspersky.com/)
با سایت اصلی یعنی :
http://www.kaspersky.com (http://www.kaspersky.com/)
مقایسه کنید.
گفته بودن باید مثل هم باشن.
شما میتونید با روش های مختلف سرعت لود رو باهم مقایسه کنید،متوجه میشید که سرعت لود خیلی بهتر از سایت اصلی شرکت کسپرسکی هست.
نظر شما محترمه اما اون کسانی رو که گفتم حرفه ای هستن واقعا حرفه ای هستن و نگفتم که شما کوچیکشون کنید..
در مورد پایین اومدن سرعت هنگام استفاده از pie.htc ممنون میشم اگه منبع خاصی سراغ دارین بگین تا بیشتر مطالعه کنم.ظاهرا فقط با چند تا از plugin های جی کوئری تداخل ایجاد میکنه و سرعت اجرای اونارو پایین میاره.

[cyrusthegreat]

دوست عزیز

من کسی رو کوچیک نکردم. ولی به نظر من استفاده از راه حل هایی آماده مثل pie.htc نشونه مبتدی بودنه. حالا اگر برای شما نشانه ی حرفه ای بودن هست، اون بحث دیگری داره.

در مورد سرعت لود هم، نمی شه گفت فقط طراحی. ممکنه اون سایت فارسی توی دیتاسنتر های ایرانی باشن و برای ما که ایرانیم خیلی سریعتر از سایت اصلی باشن و برعکس برای یک خارجی کندتر باشن. تازه نوع برنامه نویسی سرور ساید هم خیلی مهم هست. نوع web server ای که بکار رفته. بطور کلی نمی شه اینجوری نظر داد. استایل اون نسخه خارجی، حدود 200 کیلوبایته ولی استایل نسخه ایرانی حدود 90 کیلوبایت. آیا با این تفاوت فاحش، یعنی حدود دو برابر بیشتر، شما می گید کدومشون بهترن؟ نسخه فارسی؟ اگر اینجوری هست که... هیچی ولش کنید.

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

[hamid_shrk]

من کسی رو کوچیک نکردم. ولی به نظر من استفاده از راه حل هایی آماده مثل pie.htc نشونه مبتدی بودنه. حالا اگر برای شما نشانه ی حرفه ای بودن هست، اون بحث دیگری داره.

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


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

این سایت رو من خودم نوشتم و خوب تو کد نویسیش هم خیلی دقت کردم و چون یکجورایی CMS نوشتم واسه همین تعداد کانکت هاش به سرور بسیار بالاست.
سرور هم توی کانادا هست.
راجع به سرعت لود از روی طراحی هم میشه نظر داد چرا نمیشه:
خیلی سایتها هستن که سرعت سایت رو با تک تک المنتها نشون میدن که هر عکس یا هر فایل css یا جاوا اسکریپت چقدر از لود صفحه رو گرفته (یکم سرچ کنید)


استایل اون نسخه خارجی، حدود 200 کیلوبایته ولی استایل نسخه ایرانی حدود 90 کیلوبایت. آیا با این تفاوت فاحش، یعنی حدود دو برابر بیشتر، شما می گید کدومشون بهترن؟ نسخه فارسی؟ اگر اینجوری هست که... هیچی ولش کنید.

؟؟؟


منبع اینکه می گم سرعت رو میاره پایین خودم هست. چون کل کد pie.htc رو تجزیه تحلیل کردم. شما راجع به عملکردش یکم بخونید، که چجوری کار می کنه. منم ضرورتی نمی بینم توضیح بدم.

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


بهتر می بینم بحث رو ادامه ندم. چون متاسفانه تا بحال چندین بار در همین وبسایت به من توهین هایی شده، بخاطر نظراتی که کاملا درست بودن، که دیگه دوست ندارم شاهدش باشم.

با نظرتون موافقم ، هرکسی یه سبکی داره و نباید به کار هم توهین کنیم.
بحث جالبی بود و من کلی درس گرفتم ، ازتون هم ممنونم که بحث رو تا اینجا ادامه دادین ، کاش یک تاپیک جدید ایجاد میکردیم تا مدیر پست هارو حذف نکنه ، به هر حال ممنونم ازتون.

[cyrusthegreat]

دوست عزیز

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

در مورد سند گفته هام. من سعی می کنم یکم بنویسم راجع بهش و براتون پیغام خصوصیش می کنم.

بنده هم بلطبع چیزهایی یاد گرفتم. ممنونم از بحث مناسبتون.

[hamid_shrk]

آخه مشکل اینجاس که نمیشه اینارو با هم مقایسه کرد ، مرورگر Ie مشکل داره یعنی کلا استاندارد نیست ،عیب رو باید مایکروسافت برطرف کنه که کاری نمیکنه ،طبق گفته خود شما میگم این حرف رو :
الان استفاده کننده های ie خیلی کمتر شدن ، درست؟ حالا آیا درسته که ما بیایم css3 رو بخاطر این عده محدود بذاریم کنار؟
خوب بجاش با یک شرط if میایم میگیم اونایی که از ie استفاده میکنن واسشون css رو استفاده کن که توش از pie.htc استفاده شده .
به هر حال هرکسی یک راه رو انتخاب میکنه برای پیاده سازی.

[cyrusthegreat]

مرورگر ie استاندارد هست، ولی با توجه به استاندارد های زمان خودش. ie6 مال 10 ساله پیش هست. ie 7 مال 6 سال پیش و ie8 مال 4 سال پیش. یعنی اینها زمانی اومدن که چیزی به اسم CSS3 بصورت عملی مطرح نشده بود و فقط روشون داشت کار می شد. پس باید هم از اینها پشتیبانی نکنه. ولی می بینیم ie9 پشتیبانی می کنه. چون مال حال هست. اینکه می گید عیب رو باید مایکروسافت درست کنه. آیا بنیاد موزیلا، میاد مثلا نسخه 1 فایرفاکس رو درست کنه و بروزش کنه، بخاطر تغییر تکنولوژی ها؟؟ یا اینکه مشکل از اون کاربر هست که آخرین نسخه هارو استفاده نمی کنه؟ تقصیر مایکروسافت نیست، اون که داره بروز می کنه و با نام نسخه های جدید می ده بیرون. فقط تنها تفاوتش این هست که دیگر مرورگر ها با سرعت بیشتری بروز می شن. ولی مایکروسافت تقریبا با هر نسخه از ویندوز یه نسخه از مرورگرش رو می ده بیرون. اینم سیاست کلی مایکروسافت هست. همیشه همینجوری بوده.

خیر. نباید استفاده از CSS3 رو بزاریم کنار. بلکه باید استفاده کنیم. ولی خب بجای راهکار استفاده از Pie برای اون مرورگر های باید دو راهکار filter و استفاده از عکس رو جایگزین کنیم. البته این نظر بنده هست. نظر شما کاملا محترمه.

[Saber Mogaddas]

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

[hamid_shrk]

ie9 هنوز هم تمام ویژگی های css3 رو ساپورت نمیکنه :
http://www.impressivewebs.com/css3-support-ie9/
اینم یک روش دیگه برای تطابق ie و css3
http://fetchak.com/ie-css3/
موافقم که هرکسی یک راه رو انتخاب میکنه و هدف استاندارد بودن صفحات هست و نه چیز دیگه.

[masiha68]

ببخشید حمید جان
مشکل من اینه نمی دونم چه جوری این فایلی رو که توی سایت داده یا به قولی همونی که خودتون اپلود کردین رو توی وبم فراخوانی کنم
می شه یه کمی راهنمایی کنید

[cyrusthegreat]

دوست عزیز

firefox opera chrome safari هم هنوز تمام CSS3 رو ساپورت نمی کنن. همین -moz که می زارید اول دستور، یعنی اصلا دستور CSS3 نیست، بلکه یه دستوری هست که برای فایرفاکس تعریف شده و شبیه به دستور CSS3 هست و فعلا در مرحله تست هست، و در آینده که کامل ساپورت شد و طبق استاندارد های CSS3 شد دیگه نیازی به پیشوند نیست.

[cyrusthegreat]

masiha68 عزیز

نگاه کنید. ما فرض کنیم شما می خوایید border-radius استفاده کنید. اول باید یه کد اینجوری بزنید برای کلیه مرورگر ها بجز ie.


element-selector{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}


بعدش باید آخر این یه عبارت اینجوری اضافه کنید:


element-selector{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
behavior: url(path/to/PIE.htc);
}



به همین راحتی. به همین خوشمزگی

[m.toosi]

سلام دوستان من بحث شمارو پیگیری کردم خیلی برام جالب بود و خیلی جاها حرف های هر دو نفر منطقی بود
ولی فکر کنم استفاده کردن از این فایل بوسیله IF فکر خوبی باشه
ویک نکته دیگه
من یک سایتی جدیدا پیدا کردم که میشه براحتی سایت مورد نظر را داخلش تست کرد
حتما تستش کنید جالبه
http://tools.pingdom.com/fpt/

تفاوت های این دو سایت رو میشه براحتی دید
www.irkaspersky.com
www.kaspersky.com

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

در کل من نظری نمیدم
خود دوستان نظر بدهند و با احترام به همه دوستان