campaign-edianeh-98

آموزش 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 آشنا خواهیم شد.

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back
comment دیدگاه کاربران
billy1241377

بسیار عالی بود. 😀

امیر

دستت درد نکنه >>>> ممنون

khazra

ممنون خیلی خوب بود. امکان دانلود pdf فراهم نیست ممکن چک کنید.

لقمان آوند

مشکلی نداره دوست عزیز

fatima61

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

fatima61

اگر بخوایم رنگ متن اهسته تغییر کنه هم از این خصوصیت میشه استفاده کرد ؟ چطوری ؟

سجاد دریس

سلام.
بله، از این خصوصیت استفاده می شه.
در قسمت hover هر تغییری که میخوایید انجام بشه رو بنویسید.
مثلا برای تغییر رنگ متن به قرمز از color: red; استفاده می کنید.
توی قسمت transition هم کد رو به این صورت تغییر میدین.
transition: color 2s;

fatima61

سلام
خیلی ممنون .

هادی

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

هادی

ممنون آقا سجاد بازم ادامه بدین

علی

ممنون خیلی عالی بود!مثل همیشه!
alert();

حسین

با سلام شما در اینجا از :hover استفاده کردین
می خواستم بدونم چیزی مانند این هست که برای دستگاه های لمسی مثل اسمارت فون ها و تبلت ها هم کار کنه

سجاد دریس

سلام.
متوجه نشدم منظورتون از “چیزی مانند این هست که برای دستگاه های لمسی مثل اسمارت فون ها و تبلت ها هم کار کنه” چیه؟!!
مگه توی دستگاه های لمسی، نمیشه روی المنتی hover کرد؟

حسین

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

سجاد دریس

میتونید از active به جای hover استفاده کنید.
active = زمانی که بر روی المنت کلیک بشه

amirchermahini

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

بعنوان مثال یه ادرس میدم اگه امکان داره و مقدوره یه نگاهی بهش بکنین و اگه راه حلی در این مورد میدونین منو راهنمایی کنین
برای امتحان هم بعد از باز کردن سایت عرض مرورگر رو کم و زیاد کنید تا متوجه سوالم باشید
ادرس : http://www.mywindows.ir/
با تقدیر وتشکر وارزوی توفیق
منتظر راهنمایی های پر بار شما هستم

سجاد دریس

سلام.
همچین سایتهایی که میگید، عرض divهای اصلی (header-content-sidebar-footer) رو با % مقدار دهی میکنند و نه با px یا …
یعنی اینکه عرض divها درصدی از عرض پنجره مرورگر باشه، در این حالت، وقتی عرض پنجره مرورگر تغییر میکنه، عرض divها نیز تغییر میکنه و ثابت نیست.

حسن

با عرض سلام وخسته نباشید اگه میشه قسمت 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 وارد نیستم، اگه لطف کنین بیشتر توضیح بدین ممنون میشم.

ارسال نظرات

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