سرور مجازی NVMe

8 انتقال ساده CSS3 که کاربران شما را شگفت زده می کند

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

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

8 انتقال ساده CSS3 که کاربران شما را شگفت زده می کند

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

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

8 انتقال ساده CSS3 که کاربران شما را شگفت زده می کند

CSS3 امکانات بی‌شماری را برای طراحان UX معرفی کرده است و بهترین چیز در مورد آنها این است که جالب‌ترین قسمت‌ها واقعاً ساده هستند.

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

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

همه این اثرات (نوار یک) با ویژگی انتقال کنترل می شوند. بنابراین ما می‌توانیم این افکت‌ها را ببینیم که کار می‌کنند، یک div را در یک HTML راه‌اندازی می‌کنیم page:

<!DOCTYPE html>
<html>
<head>
 <style type="text/css">
 </style>
</head>
<body>
 <div></div>
</body>
</html>

پس از انجام این کار، عرض و ارتفاع آن (بنابراین دارای ابعاد)، رنگ پس زمینه آن (تا بتوانیم آن را ببینیم) و ویژگی انتقال آن را تنظیم کنید.

<style type="text/css">
body > div
{
 width:483px;
 height:298px;
 background:#676470;
 transition:all 0.3s ease;
}
</style>

ویژگی انتقال دارای سه مقدار است: ویژگی های انتقال (در مورد ما همه آنها) سرعت انتقال (در مورد ما 0.3 ثانیه) و یک مقدار سوم که به شما امکان می دهد روش محاسبه شتاب و کاهش سرعت را تغییر دهید، اما ما با خالی گذاشتن این قسمت به پیش‌فرض پایبند می‌مانیم.

اکنون تنها کاری که باید انجام دهیم این است که ویژگی ها را تغییر دهیم، و آنها برای ما متحرک می شوند…

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

1. محو شدن

محو شدن چیزها یک درخواست نسبتاً رایج از سوی مشتریان است. این یک راه عالی برای تأکید بر عملکرد یا جلب توجه به یک فراخوان است.

پیشنهاد می‌کنیم بخوانید: بایگانی VPS

Fade in افکت ها در دو مرحله کدگذاری می شوند: اول، شما حالت اولیه را تنظیم می کنید. در مرحله بعد، برای مثال، تغییر را تنظیم می کنید روی شناور:

.fade
{
 opacity:0.5;
}
.fade:hover
{
 opacity:1;
}

(مطمئن شوید که کلاس div خود را روی “fade” تنظیم کرده اید تا این کار را ببینید.)

2. تغییر رنگ

متحرک سازی تغییر رنگ قبلاً به طرز باورنکردنی پیچیده بود، با انواع ریاضیات در محاسبه مقادیر جداگانه RGB و سپس ترکیب مجدد آنها. اکنون، کلاس div را روی “color” تنظیم می کنیم و رنگ مورد نظر خود را در CSS خود مشخص می کنیم:

.color:hover
{
 background:#53a7ea;
}

3. رشد و کوچک شدن

برای رشد یک عنصر، باید از عرض و ارتفاع آن یا از بالشتک آن استفاده کنید. اما اکنون می توانیم از CSS3 استفاده کنیم تبدیل برای بزرگنمایی.

کلاس div خود را روی “grow” تنظیم کنید و سپس این کد را به بلوک سبک خود اضافه کنید:

.grow:hover
{
 -webkit-transform: scale(1.3);
 -ms-transform: scale(1.3);
 transform: scale(1.3);
}

کوچک کردن یک عنصر به سادگی رشد آن است. برای بزرگ کردن یک عنصر مقداری بزرگتر از 1 و برای کوچک کردن آن مقدار کمتر از 1 را مشخص می کنیم:

.shrink:hover
{
 -webkit-transform: scale(0.8);
 -ms-transform: scale(0.8);
 transform: scale(0.8);
}

4. چرخش عناصر

تبدیل های CSS کاربردهای مختلفی دارند و یکی از بهترین آنها تبدیل چرخش یک عنصر است. به div خود کلاس “rotate” بدهید و موارد زیر را به CSS خود اضافه کنید:

.rotate:hover
{
 -webkit-transform: rotateZ(-30deg);
 -ms-transform: rotateZ(-30deg);
 transform: rotateZ(-30deg);
}

5. مربع به دایره

یک جلوه واقعاً محبوب در حال حاضر تبدیل یک عنصر مربع به یک عنصر گرد است و بالعکس. با CSS، دستیابی به یک افکت ساده است، ما فقط آن را انتقال می دهیم شعاع مرزی ویژگی.

به div خود کلاس “circle” بدهید و این CSS را به استایل های خود اضافه کنید:

.circle:hover
{
 border-radius:50%;
}

6. سایه سه بعدی

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

پیشنهاد می‌کنیم بخوانید: وقتی در تست عملکرد وب سایت رد می شوید چه کاری باید انجام دهید

این افکت با افزودن یک سایه جعبه و سپس حرکت دادن عنصر به دست می آید روی محور x با استفاده از تبدیل و ترجمه کردن خواص به طوری که به نظر می رسد از صفحه نمایش رشد می کند.

به div خود کلاس “threed” بدهید و سپس کد زیر را به CSS خود اضافه کنید:

.threed:hover
{
 box-shadow:
 1px 1px #53a7ea,
 2px 2px #53a7ea,
 3px 3px #53a7ea;
 -webkit-transform: translateX(-3px);
 transform: translateX(-3px);
}

7. تاب

همه عناصر از انتقال ویژگی. همچنین می توانیم با استفاده از انیمیشن های بسیار پیچیده بسازیم @keyframes، انیمیشن و انیمیشن-تکرار

در این مورد، ابتدا یک انیمیشن CSS را در سبک های شما تعریف می کنیم. متوجه خواهید شد که به دلیل مشکلات پیاده سازی، باید از آن استفاده کنیم @-webkit-keyframes همچنین @keyframes (بله، اینترنت اکسپلورر واقعاً بهتر از کروم است، حداقل از این نظر).

@-webkit-keyframes swing
{
 15%
 {
 -webkit-transform: translateX(5px);
 transform: translateX(5px);
 }
 30%
 {
 -webkit-transform: translateX(-5px);
 transform: translateX(-5px);
 } 
 50%
 {
 -webkit-transform: translateX(3px);
 transform: translateX(3px);
 }
 65%
 {
 -webkit-transform: translateX(-3px);
 transform: translateX(-3px);
 }
 80%
 {
 -webkit-transform: translateX(2px);
 transform: translateX(2px);
 }
 100%
 {
 -webkit-transform: translateX(0);
 transform: translateX(0);
 }
}
@keyframes swing
{
 15%
 {
 -webkit-transform: translateX(5px);
 transform: translateX(5px);
 }
 30%
 {
 -webkit-transform: translateX(-5px);
 transform: translateX(-5px);
 }
 50%
 {
 -webkit-transform: translateX(3px);
 transform: translateX(3px);
 }
 65%
 {
 -webkit-transform: translateX(-3px);
 transform: translateX(-3px);
 }
 80%
 {
 -webkit-transform: translateX(2px);
 transform: translateX(2px);
 }
 100%
 {
 -webkit-transform: translateX(0);
 transform: translateX(0);
 }
}

این انیمیشن به سادگی عنصر را به چپ و راست حرکت می دهد، اکنون تنها کاری که باید انجام دهیم این است که آن را اعمال کنیم:

.swing:hover
{
 -webkit-animation: swing 1s ease;
 animation: swing 1s ease;
 -webkit-animation-iteration-count: 1;
 animation-iteration-count: 1;
}

8. درج حاشیه

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

به div خود کلاس “border” بدهید و CSS زیر را به استایل های خود اضافه کنید:

.border:hover
{
 box-shadow: inset 0 0 0 25px #53a7ea;
}

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

(برچسب‌ها برای ترجمه t) توسعه وب

منتشر شده در 1403-01-17 12:35:03

منبع نوشتار

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