All Articles Web
برخی از تفریح ​​با CSS3 گذار
Toby Pitman on Mon, July 25th 0 comments
If you are curious about how to create visual nice and responsive roll over effects with transitions in CSS3 then stop here. Toby Pitman, shows you how to implement some very neat CSS3 tricks.

به نظر می رسد که فروشندگان مرورگر واقعا هل جدید CSS3 ویژگی از طریق در سرعت بسیار سریع با وجود CSS2.1 تنها شده

اگرچه CSS3 سال ها دوری از که به پایان رسید اکثر مرورگرهای پیشرفته شده اند که اجرای آن برای مدتی. در این نوک سریع بیمار به شما نشان دهد که رول شسته و رفته ، بیش از اثر کمی با استفاده از CSS3 گذار.


مرحله 1

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


سلام تگ لینک در داخل تگ دهانه برخی قرار داده صرفا برای سازگاری. من می دانم که به شدت نه معنایی اما اگر شما می خواهید این کار در IE6 (حرکت مشت!) این است که چگونه شما نیاز آن را علامت گذاری به عنوان به عنوان IE6 (حرکت مشت!) متوجه خواهد شد : شناور بر روی هر چیزی به غیر از لینک برچسب ها برای IE7 شما نیاز به مطمئن شوید که به اعلام DOCTYPE : شناور به کار بر روی عناصر غیر لینک. احساساتی ، من می دانم!

سلام اعمال برخی از ظاهر طراحی ساده را به نوار پیمایش افقی.


این نتیجه این است :


سلام اعمال نمایش : درون خطی ؛ به لیست برچسب ها برای جلوگیری از برخی از مسائل طرح در IE6 (حرکت مشت!).


مرحله 2

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


این نتیجه این است :


من می دانم که این کمی عجیب و غریب به نظر می رسد اما با من خرس. تصویر موقعیت با استفاده از پس زمینه حکومت تند نویسی.

سابقه و هدف : .


مرحله 3

حالا من می تواند سبک تگ دهانه.


این نتیجه است.


شما توجه داشته باشید که تصویر پس زمینه تگ لینک در حال حاضر با رنگ پس زمینه از برچسب دهانه است که در بالای آن نشسته پنهان. برچسب دهانه نیز 20px کوچکتر در ارتفاع نسبت به تگ لینک است. این مهم است!


مرحله 4

شناور نوع دید حاکمیت به تگ لینک من : در حال حاضر بیمار اعمال می شود. این باعث خواهد شد تصویر پس زمینه تگ لینک را به حرکت رو به پایین 10px ، اساسا آن را آشکار وقتی شما ماوس بیش از لینک.


این نتیجه است.


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


مرحله 5

در حال حاضر بیمار CSS3 حکومت انتقالی من به تگ لینک اضافه کنید.


اینجا چگونه کار می کند.

انتقال :

همه (درخواست به تمام خواص این عنصر CSS)

.3 S (زمان برای گذار)

خطی (منحنی زمان انتقال)


در حال حاضر هر گونه تغییر در خواص از تگ لینک (بر روی شناور) انتقال هموار به مقدار جدید آن. یعنی موقعیت پس زمینه و رنگ متن.

شما نیز متوجه است که کاملا پیشوندها فروشنده چند گذار CSS وجود دارد. هر مرورگر در حال حاضر پیاده سازی این اثر به طرق مختلف بنابراین ما باید برای هدف قرار دادن به بسیاری از ما می توانیم.


- moz - = موزیلا فایرفاکس

- webkit - = سافاری ، کروم

- O - = اپرا


به محض این که نهایی آن تبدیل خواهد شد به سادگی گذار است.


مرحله 6

در نهایت بیمار برخی از سریع گرد گوشه اضافه کنید.


این نتیجه این است :


سازگاری

  • This should work well in Firefox, Safari and Chrome. 
  • Opera does support CSS3 Transitions but not yet on background-position. 
  • Hopefully we’ll see this in Internet Explorer in about the year 3038. But don’t bet on it!!


نتیجه

این مفهوم را می توان به بارهای اثرات بیش از حد به رول اعمال شده است. دانلود زیر شما چند نمونه از جمله این اثر زمانی که شما بیش از یک آلبوم رول شما نشان می دهد سی دی فرمت ، وینیل با انتقال خوبی است.


دانلود ویژه CSS3 نمونه.

در مورد بازی و برخی از پاپ



Comments (0)

You must be logged in to comment.

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: