در خواست کد های Css3

[joom 11]

سلام

3 تا سوال داشتم در مورد سی اس اس 3

تو برخی از وب سایت ها دیده شده وقتی موس میره روی یه عکس عکس به طور کامل میچرخه (360درجه)نمونه اس سافت آرچیو

گوشه سمت راست

http://www.softarchive1.ir/

سوال دیگری هم داشتم تو بعضی از وب سایت ها این رو دیدم که وقتی موس میره روی عکس ،اون عکس عرضش به صورت نرم قشنگ بیشتر میشه

نمونه اش رو میشه سایت جومیران گفت(برخی موارد هم برای طول این اتفاق ها میفته در صورت امکان دستور برا هر دو حالت(طول و عرض) رو بدید)

http://www.joomiran.org/

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

این از چه دستوری استفاده کرده؟

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

http://takwd.ir/

منوی سمت راست رو نگاه کنید وقتی موس میره روش نوشته ها به صورت نرم میرند سمت راست خواهشن این کد ها رو برای بنده قرار بدید خیلی بهشون نیاز دارم

تشکر

منتظر پاسختون هستم

ویرایش شده در آبان 91 توسط joom

[AHK95 10]

1-چرخش تصاویر :

img{
background:none;
-moz-transition: all 0.8s linear;
-webkit-transition: all 0.8s linear;
-o-transition: all 0.8s linear;
-ms-transition: all 0.8s linear;
transition: all 0.8s linear;
}

img:hover{
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);

2-سرچ

input{
width:200px;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
input:focus{
width:250px;
}

3-اینم سوال آخر

li
{
width:200px;
height:20px;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
li:hover
{
text-indent:20px;
}

ویرایش شده در آبان 91 توسط AHK95

[joom 11]

ممنون لطف کردید میشه کمی روی کد ها توضیح بدید؟

[AHK95 10]

همه این کارهایی که مد نظر شما هست با یه دستور css3 سر و کار داره که فکر کنم با دیدن کد ها متوجه میشید.

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

[joom 11]

در مورد کد زیر

img{
background:none;
-moz-transition: all 0.8s linear;
-webkit-transition: all 0.8s linear;
-o-transition: all 0.8s linear;
-ms-transition: all 0.8s linear;
transition: all 0.8s linear;
}

img:hover{
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);

شما در حالت عادی که عکس هیچ رویدادی(Hover،visited) از کد زیر استفاده کردید برای چی؟

img{
background:none;
-moz-transition: all 0.8s linear;
-webkit-transition: all 0.8s linear;
-o-transition: all 0.8s linear;
-ms-transition: all 0.8s linear;
transition: all 0.8s linear;
}

ممنون

[AHK95 10]

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

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

امیدوارم تونسه باشم منظور رو برسونم.

[joom 11]

ممنون

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

کد اولی رو که توی img قرار دادیم به خاطر این هست که وقتی موس روی عکس میره وقتی که کامل چرخید موس رو که از عکس برداریم عکس دوباره به حالت اول بر میگرده

امیدوارم تونسته باشم که چی کفتم:yeah:

[AHK95 10]

همینه :دی

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

موفق باشید

[joom 11]

با تشکر از دوست خوبم AHK95 که در مورد اول و سوم بنده رو کمک کردند اما مورد دوم بدون جواب مونده که از دوستان خواهش دارم بنده رو راهنمایی کنند

سوال دیگری هم داشتم تو بعضی از وب سایت ها این رو دیدم که وقتی موس میره روی عکس ،اون عکس عرضش به صورت نرم قشنگ بیشتر میشه

نمونه اش رو میشه سایت جومیران گفت(برخی موارد هم برای طول این اتفاق ها میفته در صورت امکان دستور برا هر دو حالت(طول و عرض) رو بدید)

http://www.joomiran.org/

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

این از چه دستوری استفاده کرده؟

[mmfallah 67]

با تشكر از دوست خوبمان آقاي ahk95 خيلي عالي بود

فقط يك سوال

چطور كدها را به بخشي خاصي از سايت اختصاص بديم

مثلا وقتي كد مربوط به عكس را قرار ميديم كل عكس هاي سايت حالت چرخشي مي گيره؟

براي منو هم همينطور تمام منوها همين حالت را پيدا مي كنه!

آيا روشي براي اختصاص دادن كد به بخش خاصي از سايت وجود دارد؟

مثلا كد مربوط به منو فقط روي يك منو كه خودمون مي خوايم اعمال بشه؟

ویرایش شده در آبان 91 توسط mmfallah
تكميل

[saber 208]

با تشكر از دوست خوبمان آقاي ahk95 خيلي عالي بود

فقط يك سوال

چطور كدها را به بخشي خاصي از سايت اختصاص بديم

مثلا وقتي كد مربوط به عكس را قرار ميديم كل عكس هاي سايت حالت چرخشي مي گيره؟

براي منو هم همينطور تمام منوها همين حالت را پيدا مي كنه!

آيا روشي براي اختصاص دادن كد به بخش خاصي از سايت وجود دارد؟

مثلا كد مربوط به منو فقط روي يك منو كه خودمون مي خوايم اعمال بشه؟

برای اینکه به بخش خاصی اختصاص بدید باید کد اون بخش رو بدست بیارین با افزونه webdeveloper فایرفاکس میتونید کد بخش خاصی از قالب رو بدست بیارین

آدرس سایتتون رو هم بذارید چک بشه...

[mmfallah 67]

اين آدرس سايت هست

http://www.dpdelta.ir

مثلا ميخوام روي منوي سمت راست اعمال بشه

وقتي مي زارم رو كل منو ها اعمال ميشه ترتيب منو ها هم بهم مي خوره؟

[saber 208]

اين آدرس سايت هست

http://www.dpdelta.ir

مثلا ميخوام روي منوي سمت راست اعمال بشه

وقتي مي زارم رو كل منو ها اعمال ميشه ترتيب منو ها هم بهم مي خوره؟

سایتتون برای من اصلا بالا نمیاد میزنم اصلا باز نمیشه...

[mmfallah 67]

مشكل از هاست بود رفع شد لطفا الان چك كنيد.

مي خوام فقط روي يكي از منو ها اعمال كنم.

[AHK95 10]

با تشکر از دوست خوبم AHK95 که در مورد اول و سوم بنده رو کمک کردند اما مورد دوم بدون جواب مونده که از دوستان خواهش دارم بنده رو راهنمایی کنند

سوال دیگری هم داشتم تو بعضی از وب سایت ها این رو دیدم که وقتی موس میره روی عکس ،اون عکس عرضش به صورت نرم قشنگ بیشتر میشه

نمونه اش رو میشه سایت جومیران گفت(برخی موارد هم برای طول این اتفاق ها میفته در صورت امکان دستور برا هر دو حالت(طول و عرض) رو بدید)

http://www.joomiran.org/

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

این از چه دستوری استفاده کرده؟

خب اینم که واضحه از همون روش استفاده شده فقط در حالت انتخاب (focus) عرض input بیشتر شده اون حالت نرمی هم که داره برمیگرده به خاصیت transition حالا شما چیشو متوجه نشدی؟

[AHK95 10]

برای اختصاص دادن به قسمتی از سایت باید کلاس مربوط به اون قسمت رو پیدا کنید و کد ها رو استفاده کنید مثلا شما که میخواید فقط روی منو سمت راست اعمال بشه به این صورت عمل کنید

1-فایل template.css باز کنید.

2-moduletable رو پیدا کنید.

3-کد های زیر را اضافه کنید

moduletable li
{
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}

moduletable li a
{
text-indent:20px;
}

[joom 11]

واقعیت متوجه منظورتون نشدم!!!!

کدی که باید برای اون کار انجام بدم(سرچ سایت www.joomiran.org)(هم طولی و هم عرضی)چی هست؟

ممنون

[saber 208]

اینجا سر بزنید مثالهای خوبی داره برای اون نوع جستجو هم نمونه کد داره...

http://www.css3.info/preview/css3-transitions/