» Transitions در CSS3

مجله آنلاین رضا گرافیک در سـتاد سـاماندهی اینترنتی ایران ثبت گردیده اسـت و تابع قوانین جمـهوری اسـلامی ایران می باشـد [ اطلاعات بیشـتر ]

وب سایت شخصی مدیر رضا گرافیک

Reza Ranjbar Jelodar

Designer & Developer

Industrial Design/Art Uni of Tehran
See my personal site >
فروشگاه رضاگرافیک
کانال تلگرامی سایت رضاگرافیک
حارک گرافیک​ی
شاپ پی اس دی

Transitions در CSS3

نویسنده : رضا آموزش بازدیدها: 790

Transitions در CSS3 | رضاگرافیک

در بیشتر وبسایت هایی که نکات کاربرد پذیری (رابط کاربری،تجارب کاربری) رو رعایت میکنند،عوامل بسیار زیادی وجود داره که باعث میشه هر بازدیدکننده بیشتر در اون سایت باقی بمونه،یکی از اون ابزارهایی که بستری برای این عوامل ایجاد میکنه،CSS گفته میشه که به فایل نهایی قالب یک وبسایت گفته میشه.یکی از قابلیت های CSS3,قابلیتیه به اسم Transition که معادل فارسی خوبی براش پیدا نکردم تا قرار بدم،مفهوم کلیش اینه که وقتی موس روی یکی از اشیاء صفحه میره،اون شیء چه عکس العملی خواهد داشت.خاصیت Transition متاسفانه با مرورگر Internet Explorer همخوانی نداره و تنها بروی نسخه های بالای ورژن چهار Firefox اجرا میشه،این خاصیت پشتیبان مرورگرهای وبکیت یعنی کروم و سافاری و همچنین اوپرا هست.


این خاصیت پرکاربرد CSS3 را میتوانید در هرجا در تگ HTML قرار دهید.برای مثال ما اینجا این خاصیت را در شیء div به کار میبریم که خیلی کاربرد داره:

div
{
width:100px;
height:100px;
background:red;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}

خب،کد بالا یک نمونه ساده از CSS که یک باکس تولید میکنه،اما راجب چهار خط آخر،همه اون خط ها در واقع یک خاصیت هستند که برای بهینه شدن در تمام مرورگرها افزایش پیدا کردند،کدها گویای همه چیز هستند.مفهوم چهار خط بالا به این صورته که وقتی موس روی شیء div رفت،عملیات تغییر ساختار و پیکر درونی ۲ثانیه طول خواهد کشید،در این بین چیزی که تغییر میکند،Width شیء است.اما حالا نوبت کدیست که باعث شود شیء نسبت به حرکت موس عکس العمل نشان دهد.

div:hover
 {
 width:300px;
 }

حالا پس از بردن موس بروی شیء div,شاهد این عملکرد خواهیم بود.

این تنها یک مثال بود،شما میتونید از مقادیر Transition کاهش بدید یا افزایششون بدید،زمان تغییر بدید یا هر چیز دیگه ای.

برای دیدن دمو کلیک کنید
منبع : رضاگرافیک | مجله آنلاین گرافیک

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

اشتراک گذاری :
برچسب ها : ، ، ، ، ، ، ،
بخش نظرات
توجه فرمایید :
نظراتی که با نام لاتین نوشته شده و یا با نام تجاری یا نام سایت هستند تایید و بررسی نخواهند شد، لطفا رعایت فرمایید.
    محمد رسول گفته : سه شنبه ۲۵ مهر ۱۳۹۱

    جالب بودش

    محمودزمانی گفته : سه شنبه ۲۵ مهر ۱۳۹۱

    محمدزدی توکار نظردادن تو همه ی سایتا چه حوصله ای داری 😡

      رضا [ مدیر سایت ] گفته : سه شنبه ۲۵ مهر ۱۳۹۱

      خودش میدونه : دیگه :دی

تبلیغات

سیب بنر
تبلیغات یک
تبلیغات متنی ( اطلاعات بیشتر ) طراحی بنر