آموزش 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 دیدگاه کاربران
حسن

با عرض سلام وخسته نباشید اگه میشه قسمت css را تکمیل کنید آموزشش را و همانطور که قبلا گفته بودید آموزش ساخت قالب از صفر رو شروع کنید خیلی ممنون ! من از خیلی وقت منتظرم

سجاد دریس

سلام.
آموزش ها رو دارم قرار میدم.
طراحی قالب هم چشم موقش که برسه اونم میذارم.

رها امیر چرمهینی

سلام اقای دریس
و تشکر ازبابت جواب
اما بالاخره و بعد از یک ماه سرچ جوابم رو پیدا کردم اونکه باید عرض با درصد تعریف بشه که مسلمه
اما به این طراحی ها میگن responsive که با المنتهای media در اندازه های عرض مختلف تعریف میشه حالا خواهشم اینه اگه برای شما مقدوره واطلاعی دارین در این زمینه یه اموزش مختصر بنویسید
که در دو عرض متفاوت چگونگی نوشتن و تعریف media در css رو توضیح بده ؟

با تشکر وارزوی توفیق

سجاد دریس

سلام.
طراحی responsive فرق میکنه با طراحی با مقدار %،
وقتی از مقدار درصد استفاده میکنیم، با تغییر اندازه مرورگر حتی 1px بازم کل اندازه های بقیه المنتا تغییر میکنه.
اما در responsive تعیین میکنیم که مثلا اگه اندازه مرورگر 1024*768 بود یا کوچیکتر(برای تبلت ها و موبایل ها) اندازه به مقدار مشخصی تغییر کنه. که با استفاده از media قابل انجامه.
البته الان بیشتر responsive رو با % انجام میدن، یعنی هم از media استفاده میکنن هم اندازها با % تعریف میشه، تا همیشه، وقتی اندازه مرورگر تغییر کنه، قالب به درستی نمایش داده بشه.
منتظر ادامه آموزش css باشید. روش media رو براتون کامل توضیح خواهم داد.

رهاامیر چرمهینی

با سلام اگه امکان داره یدونه بنر اسلاید شو هم که هم بصورت خودکار اسلاید بشه و هم دکمه next & previous داشته باشه با html و css بصورت کامل بنوسید
با تشکر وارزوی توفیق

سجاد دریس

سلام.
برای آموزش طراحی قالب در نظر گرفتم. همچین چیزی رو

عرفان

قربونت برم سجاد جون
خوب بود من اینا رو از w3schools یاد گرفتم خوشحال شدم که مثال های خوبی گذاشتی
تنها چیزی من مشکل دارم همین animation هست نمیتونم بسازم
ولی اینا رو بلدم
ممکنه توی 7learn همکارت بشم چون به جی کوئری
مسلطم و خیلی چیز ها از طراحی وب میدونم میخوام آموزش بزارم همه ببینن ولی قبلش میخوام php یاد بگیرم

لقمان آوند

فرم درخواست همکاری رو پر کنید دوست عزیز …

سجاد دریس

سلام.
ممنون.
در جلسه بعدی animation آموزش داده میشه. برای همکاری هم این فرم رو پر کن

عرفان

ممنون الان فعلا در حال یادگیری زبان پی اچ پی هستم بعد از اون حتما …

سجاد دریس

باشه منتظرتیم.

عرفان

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

سجاد دریس

سلام.
اینم آموزش ایجاد انیمشین.

چندتا مثال هم گذاشتم اخر پست حتما به دردت میخورن

arshin

سلام
مرسی از آموزش ها عالی بود .
یه سوال، بهتر واسه انیمشن از css استفاده کنیم یا jquery؟ جواب هرکدوم بود مزیتش نسبت به اون یکی چیه ؟ خودم فکر می کنمcss.

وحید صالحی

css توی ایجاد انیمیشن محدودیت داره و برای ایجاد انیمیشن های ساده خوبه در حالی که در جی کوئری بواسته پلاگین هایی که داره دست طراح رو برای ایجاد خلاقیت خیلی باز میزاره البته ویژگی انیمیشن در css3 ارئه شد و هنوز جای رشد داره ولی در کل css و جی کوئری رابطه بسیار خوب و نزدیکی دارن که ترکیب این 2 باهم فوق العاده میشه…

arshin

مرسی

hamed_z2001

یه سوال کلی که تو مثالهاتون بهش برخوردم اینه که مثلا تو همین مثال چرا تو فایل css برای سلکتور div که کلاس box تعریف شده به صورت :
div .boxتعریف شده؟؟ چرا به صورت box. خالی تعریف نشده؟؟؟ا ا جلسات قبلی به این مشکل برخوردم … اگه میشه منو راهنمایی کنید .
با تشکر

سجاد دریس

سلام
استایلی که با کلاس .box بتعریف میشه به همه ی تگ هایی که دارای کلاس box باشند اعمال میشه
اما div.box فقط بر روی تگ های div دارای کلاس box اعمال میشه.

hamed_z2001

سلام .برای من کد transition کار نمی کنه ……
لطفا این کد ساده ای که قرار میدم رو نگاه کنید و اشکالمو لطفا بگید …
html:

و کد css:


الان میخوام وقتی که موس روی جدول رفت تغییر عرض بده ولی اینکار انجام نمیشه!! 🙁 نوشتن من مشکل داره؟؟؟ میشه بگید کجاش؟؟

سجاد دریس

بفرمایید اینم از کدهای صحیح :

hamed_z2001

دستت درد نکنه … نوشتنامون که با هم فرق نداشت …موندم چرا ج نمیداد ….

elahe

با سلام، ضمن تشکر از وبسایت خوبتون،
من میخوام با کلیک روی دکمه next تصویرم عوض بشه و چند ثانیه طول بکشه، اما هر ترانزیشنی که دادم نشد، ممنون میشم اگه راهنمایی بفرمایید.

کیوان علی محمدی

بهتره از افکت های جی کوئری استفاده کنید.

elahe

متاسفانه با جی کوئری زیاد کار نکردم، اگه لطف کنین راهنمایی کنین ممنون میشم.

elahe

من زیاد به jquery وارد نیستم، اگه لطف کنین بیشتر توضیح بدین ممنون میشم.

ارسال نظرات

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

1 2