آموزش استفاده از Effect ها در Tailwind-css

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

در فریمورک تیلویند ، کلاس های مختلفی برای Effect و Transition وجود دارد که با استفاده از آنها میتوان جذابیت های بیشتری به پروژه اصافه کرد. ما در این مقاله ، قصد معرفی مهم ترین ها و پر کاربرد ترین های آن ها را داریم.

Transition

برای استفاده از ترنزیشن برای یک المان ، از کلاس Transition بهره میبریم. این کلاس ، آرگومان هایی دارد که تعیین میکند برای چه منظور میخواهیم از Transition استفاده کنیم. برای مثال اگر بخواهیم روی Opacity یک المان ، Transition اعمال کنیم از کلاس زیر استفاده خواهیم کرد :

 .transition-opacity    

شما همچنین میتوانید مقدار زمان Transition و سرعت آن را با کلاس های duration و timing کنترل نمایید:

 .transition-opacity-250 .duration-250 .timing-ease-in-out    

برای مثال این دستور ، یک Transiton برای Opacity المان در بازه ی زمانی 250 میلی ثانیه تعریف میکند و نحوه ی سرعت این Transition ، ease-in-out میباشد که در صورت آشنایی با Css ، با نحوه ی انجام این Timing آشنا هستید.

Transform

شما میتوانید برای المان مد نظرتون ، Transform تعریف کنید که شامل موارد مختلفی از جمله scale ، Rotate ، Translate و غیره میباشد:

 .transform .scale-50 .rotate-45    

این کد ، اندازه ی المان شما را به 50% کاهش داده و یک چرخش 45 درجه ای روی آن اعمال میکند.

دوره ی آموزش Tailwind وارنا

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

Shadow

سایه دادن به المان ، یکی از پرکاربرد ترین و محبوب ترین افکت ها میباشد که در Css با نام box-shadow با آن آشنایی دارید. در تیلویند برای سایه دادن از کلاس shadow استفاده کنیم که مقادیر پیش فرضی نیز برای آن موجود است. برای مثال:

 .shadow-md  

Gradient

استفاده از بک گراند های گرادینت ، زیبایی خاصی به سایت ها اضافه میکند که در تیلویند شما میتوانید با استفاده از کلاس Gradient به روش زیر از آن بهره مند شوید:

 .bg-gradient-to-r-pink-purple  

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

شما میتوانید برای نمونه های بیشتر و تسلط کامل بر روی کلاس های Effect به سایت Tailwind-css مراجعه کرده و کلاس های آن را مورد بررسی قرار دهید.

آموزش و استخدام در وارنا

آیا میدانستید که شما میتوانید این Tailwind جذاب و دوست داشتنی رو از صفر تا صد با دوره ی آموزشی که گروه برنامه نویسی وارنا تدارک دیده ، یاد بگیری ؟ خبر خوب همینجا به پایان نمیرسه. شما میتوانید پس از پایان دوره و کسب نمره ی قابل قبول ، با شرکت وارنا همکاری کنی و پروژه ی طراحی قالب UI دریافت کنی. همین حالا در دوره ی آموزش Tailwind-css و sass وارنا ثبت نام کن . فرصت رو از دست نده !