سرور مجازی NVMe

روش استفاده از انتقال CSS3

طراحی و توسعه نرم افزار

توسط تیم تولید محتوا آخرین بروزرسانی بهمن ۵, ۱۴۰۲

سرفصلهای مطلب

زمان لازم برای مطالعه: 3 دقیقه

روش استفاده از انتقال CSS3

همه حرکت را دوست دارند. افزودن بعد چهارم (زمان) به طراحی سایت اصلی ترین روشی است که طراحی مبتنی بر صفحه نمایش از آن متمایز می شود print طرح. CSS Transitions یک روش ساده برای متحرک سازی ویژگی های یک عنصر است که به شما امکان می دهد رویدادهای خاصی را در طراحی وب خود، بدون نیاز به فلش یا جاوا اسکریپت غنی کنید.

W3C به درستی انتقال ها را توصیف می کند روی وب سایت آنها به عنوان “CSS Transitions اجازه می دهد تا تغییرات ویژگی در مقادیر CSS به آرامی در یک مدت زمان مشخص رخ دهد”. به عبارت دیگر، انتقال‌های CSS به ما اجازه می‌دهند تا یک ویژگی را به صورت تدریجی تغییر دهیم، احساسی از حرکت ایجاد کنیم و طرح‌ها را با ظرافت و احساسات آغشته کنیم که با تغییر سریع امکان‌پذیر نیست.

پشتیبانی از مرورگر

همه مرورگرهای مدرن (بله حتی IE!) اکنون از انتقال CSS پشتیبانی می کنند. با این حال، مهمتر از همه، اگر انتقال ها در مرورگر مورد استفاده پشتیبانی نمی شوند، انتقال نادیده گرفته می شود و تغییرات ویژگی فورا اعمال می شود. این تنزل دلپذیر سنگ بنای بهترین تمرین است.

به منظور گسترش دامنه پشتیبانی مرورگر، می‌توانیم از پیشوندهای فروشنده استفاده کنیم، این ویژگی را به فایرفاکس 4-15، اپرا 10.5-12 و بیشتر نسخه‌های کروم و سافاری گسترش می‌دهد. کد، از جمله جایگزین های پیشوند فروشنده، به شکل زیر است:

div {
 -o-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -webkit-transition: all 1s ease;
 transition: all 1s ease;
}

ویژگی غیر پیشوندی در پایین پشته اضافه می‌شود تا اطمینان حاصل شود که پیاده‌سازی نهایی بر سایر ویژگی‌ها برتری می‌یابد، زیرا ویژگی از حالت پیش‌نویس به وضعیت نهایی می‌رود.

پارامترهای انتقال

چهار پارامتر برای انتقال CSS وجود دارد:

ویژگی انتقال: خاصیتی که باید توئین شود، یا کلمه کلیدی «همه» برای اعمال به همه ویژگی ها.
مدت زمان انتقال: مدت زمان انتقال؛
تابع زمان گذار: سهولت اعمال می شود، این حرکت به نظر طبیعی تری ایجاد می کند
انتقال-تاخیر: تاخیر در شروع انتقال را مشخص می کند.

علاوه بر این، می‌توانید از ویژگی کوتاه‌نویسی (مانند مثال بالا) استفاده کنید که در آن پارامترها به عنوان ویژگی، مدت زمان، تابع زمان‌بندی، تاخیر مشخص شده‌اند.

خواص قابل انتقال

شما فقط می توانید ویژگی هایی را که می توانند به یک مقدار ریاضی ترجمه شوند، انتقال دهید. به عنوان مثال، می توانید اندازه فونت را تغییر دهید. شما نمی توانید فونت-وجه را انتقال دهید.

لیست کامل خواصی که در حال حاضر قابل انتقال هستند به شرح زیر است:

پس زمینه-موقعیت، رنگ حاشیه-پایین، حاشیه-پایین-عرض، حاشیه-چپ-رنگ، حاشیه-چپ-عرض، حاشیه-راست-رنگ، حاشیه-راست-عرض، فاصله مرزی، رنگ حاشیه-بالا، حاشیه-بالا-عرض، پایین، کلیپ، رنگ، اندازه قلم، وزن قلم، ارتفاع، چپ، فاصله حروف، حاشیه-پایین، حاشیه-چپ، حاشیه-راست، حاشیه-بالا، حداکثر ارتفاع، حداکثر عرض، حداقل ارتفاع، حداقل عرض، کدورت، رنگ رئوس مطالب، عرض طرح کلی، بالشتک-پایین، بالشتک-چپ، بالشتک-راست، بالشتک-بالا، راست، تورفتگی متن، سایه متن، بالا، عمودی- تراز، عرض، فاصله بین کلمات، z-index.

استفاده از انتقال

اعلان‌های انتقال به حالت عادی عنصر پیوست می‌شوند. بنابراین فقط یک بار برای چندین حالت مانند کلاس های :focus، :active و pseudo اعلام شده است.

با استفاده از کد زیر می توانیم یک منوی اصلی و یک پاراگراف متن را تنظیم کنیم. این استایل به گونه‌ای است که آیتم‌های منو هنگام چرخاندن رنگ و رنگ پس‌زمینه خود را تغییر می‌دهند و به این ترتیب که پیوند درون خطی رنگ زیر خط خود را از سفید به سبز تغییر می‌دهد.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>CSS transition demo</title>

 <style type="text/css">

 /*

 STATIC PROPERTIES

 */
 body {background:#fff; }
 ul { padding:0; margin:20px; }
 li { display:inline; padding:5px 0; }
 .nav a { padding:5px; }
 p { padding:0; margin:21px; }
 a { text-decoration:none; }


 /*

 PROPERTIES TO TWEEN

 */

 .nav a
 {
 color:#bee0bf;
 background:#1a9e5c;
 }

 .nav a:hover
 {
 color:#fff;
 background:#38b476;
 }

 p a
 {
 color:#3fa32d;
 border-bottom:1px solid #fff;
 }

 p a:hover
 {
 color:#bee0bf;
 border-bottom:1px solid #3fa32d;
 }


 </style>
</head>
<body>

<ul class="nav">
 <li><a href="#">Business</a></li>
 <li><a href="#">Code</a></li>
 <li><a href="#">Design</a></li>
 <li><a href="#">Inspiration</a></li>
 <li><a href="#">Miscellaneous</a></li>
 <li><a href="#">Mobile</a></li>
 <li><a href="#">News</a></li>
 <li><a href="#">Resources</a></li>
 <li><a href="#">Usability</a></li>
</ul>

<p>Integer posuere erat a ante <a href="#">inline link</a> venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo.</p>

</body>
</html>

در اینجا به نظر می رسد:

ما می‌خواهیم آن ویژگی‌ها را بین یکدیگر قرار دهیم تا به راحتی اجرا شوند. ما می‌خواهیم هم رنگ و هم رنگ پس‌زمینه عناصر nav را توئین کنیم، اما برای متن درون خطی، فقط می‌خواهیم زیرخط را توئین کنیم. ما این کار را با اضافه کردن موارد زیر به تعریف سبک خود انجام می دهیم:

/*

 CSS TRANSITIONS 
 */

 .nav a
 {
 -o-transition: all 500ms;
 -moz-transition: all 500ms;
 -webkit-transition: all 500ms;
 transition: all 500ms;
 }

 p a
 {
 -o-transition: border-bottom 250ms;
 -moz-transition: border-bottom 250ms;
 -webkit-transition: border-bottom 250ms;
 transition: border-bottom 250ms;
 }

و این هم نتیجه:

آیا از CSS3 Transitions استفاده می کنید؟ چه افکت هایی توانسته اید ایجاد کنید؟ در نظرات به ما اطلاع دهید.

تصویر/تصویر کوچک ویژه، تصویر متحرک از طریق Shutterstock.

(برچسب‌ها برای ترجمه)posuere

منتشر شده در 1403-01-25 04:29:02

منبع نوشتار

امتیاز شما به این مطلب