آموزش CSS (فصل یازدهم – جلسه دوم) : آشنایی با جلوه های ویژه ی CSS3

- visibility ۴٢ mode_comment

خاصیت transition

در این جلسه راجع به افکت ها و انیمیشن ها در css3 صحبت خواهیم کرد که با استفاده از css3 و البته بدون استفاده از جاوااسکریپت ، فلش یا جی کوئری ،چگونه بتوانیم افکتها و انیمشینهای حرکتی جالب را بر روی عناصر صفحه وبمان اعمال کنیم. قاعده کلی یک افکت در css3 به این صورت است که ابتدا باید تعیین کنیم افکت قرار است چه تغییراتی ایجاد کند، و دوم اینکه در چه مدت زمانی ان تغییرات باید انجام شود. (مدت زمان اجرای افکت). قاعده کلی به شکل زیر است

property : خصوصیتی که افکت بر آن اعمال میشود. duration : مدت زمان اجرای افکت.

info نکته :

دقت کنید که اگر مدت زمان تعیین نشود، هیچ اتفاقی نخواهد افتاد زیرا مدت زمان پیشفرض 0 ثانیه است. در ضمن باید از واحد های زیر برای تعیین مدت زمان استفاده کرد.

مثال : کد html

کد css

در مثال بالا تعیین کرده ایم که در صورتی که نشانگر موس بر روی تگ div قرار گرفت عرض آن در مدت 2ثانیه به 400px تغییر کند. به یاد داشته باشید اگر بیش از یک property دارید که میخوایید افکت بر آن ها اعمال شود باید افکت ها را با استفاده از , از هم جدا کنید : مثال

البته زمانی از , برای جدا کردن property ها استفاده میشود که زمان اجرای آن ها متفاوت باشد ( مانند مثال بالا) و اگرهمه ی مقادیر آن propertyها شبیه به هم باشد به جا اوردن نام property از مقدار all استفاده می شود. : مثال

افکت های پیشرفته تر

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

timing-function : افکت های از پیش تعیین شده توسط css3 برای تقسیم زمان، که یکی از مقادیر زیر را می پذیرد :

delay : مدت زمان تاخیر در اجرای افکت.

به مثال زیر دقت کنید :

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

بسیار خب. در این جلسه با طریقه ایجاد یک افکت آشنا شدیم. در جلسه بعد طریقه ایجاد انیمیشن در css3 آشنا خواهیم شد.

comment دیدگاه کاربران
kiansoft2000

عالی بود

yoosef

سجاد جان واقعا خسته نباشید
از همه بچه های این سایت تشکر میکنم واسه خاطر زحمت هایی که میکشید

ممنون ، بندهه هم از شما و کاربران عزیزی که پیگیر مطالب سایت هستید تشکر می کنم .

صفحه هر چند ثانیه یه بار می پره بالا یا پایین. آدم دیونه می شه برا خوندن مطلب

چنین مشکلی وجود نداره دوست عزیز . مطمئنید ؟

1234567890

با سلام

3 ردیف با 4 عکس دارم ، وقتی که صفحه نمایش browser را کوچیک میکنم در هر ردیف 2 عکس قرار میگیرد . میخواستم بدونم اینو با media درست میکنن ؟ اگه آره ، چطوری میتونم تشخیص بدم که به width , height چه مقداری میتونم بدم ؟

با تشکر از آموزش ها و ایتکه وقتی برای پاسخگویی به ما قرار میدهید .

سید رضا

سلام. خسته نباشید.
لقمان جان ممکنه آموزش طراحی responsive design رو هم قرار بدین؟
ضمنا یه ایمیل از خودت بیزحمت بده چند تا سوال کوتاه ازت دارم میخوام تو میل ازت بپرسم.

لقمان آوند

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

بسیار ممنون

Mohammad Mirzaei

این اموزش واقعا به دردم خورد ممنون

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2