آموزش طراحی وب

آموزش افکت کاربردی Front To Back با CSS3

تو این مقاله افکت کاربردی Front To Back رو بهتون آموزش میدم که برای استفاده توی قالب هاتون بسیار شیکه.

CSS3

آموزش ایجاد افکت کاربردی Front To Back با CSS3

سلام به همراهان همیشگی مدرسه مجازی ایرانیان و ماهنامه طراحی وب

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

به عنوان مثال برای بخش نمونه پروژه ها ؛ در حالت عادی تصویر پروژه نمایش داده میشه ، در حالت hover باکس پروژه پشت به رو میشه و توضیحات پروژه نمایش داده میشه .

میتونید قبل از شروع آموزش ، دموی پروژه رو ببینید.

 

خوب بریم سراغ آموزش 🙂

یه توضیح کلی :

ما یه کادر اصلی به نام face در نظر میگیریم و روی کادرو front و پشت کادرو back نام گذاری می کنیم. برای اینکه تمامی اجزا کنترل شده کنار هم قرار بگیرن یه باکس به نام card تعریف می کنیم و همه ی عناصر رو درون این باکس قرار میدیم . حالا میریم سراغ تعریف عناصر و استایل ها .

Html باکس اصلی رو ایجاد می کنیم :

و استایل زیر رو بهش میدیم :

 

با این کادر میتونیم اجزای داخل اون رو به راحتی مدیریت کنیم . حالا خاصیت هایی که در css این کادر اعمال کردیم رو توضیح میدم :

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

Position که بهش مقدار relative رو دادیم تا عناصری که مقدار absolute رو دارن داخل همین باکس قرار بگیرن و موقعیتشون نسبت به فضای داخل این باکس تعیین بشه نه کل صفحه ی مرورگر .

Transform-style تعیین میکنه که انیمیشنی که قراره اتفاق بوفته بصورت ۳D باشه .

Transition هم که همیشه تو این مواقع باید حضور داشته باشه وگرنه انیمیشن صورت نمیگیره .

 

خوب حالا بریم سراغ عنصر بعدی ؛ به ترتیب face , front و back رو تعریف می کنیم .

ابتدا کد html برای front رو اضافه می کنیم :

ما به این عنصر دو کلاس اختصاص دادیم یکی face و دیگری front که در ادامه این کلاس هارو براتون توضیح میدم .

اول استایل کلاس face رو مشخص می کنیم :

face کادر اصلی ماست که هم قراره روشو (front) بینیم و هم پشتشو (back). در ادامه هم برای front و هم برای backاستایل اضافه می کنیم . خاصیت های بالارو برای face تعریف کردیم ، تمامی خاصیت ها واضحه ؛ backface-visibility هم دو مقدار hidden و visible داره که با hidden پشت عنصر مخفی میشه و با visible پشت عنصر نمایان میشه . قابل ذکره که این خاصیت در صورتی به شما جواب میده که شما باکستون و چرخونده باشید یعنی از transform استفاده کرده باشید ، در حالت عادی اصلا کار نمیکنه .

یکم با دقت جمله ی زیر رو بخونید :

اگه یادتون باشه روی کادر رو front و پشت کادر رو back نام گذاری کردیم . حالا میریم سراغ face ، در اصل خاصیت backface-visibility رو به این دلیل به این کادر دادیم که زمانی که موس روی کادر یعنی face قرار میگیره و کادر ما پشت به رو میشه یعنی front به پشت و back به روی کادر منتقل میشه ، front ما دیگه نمایان نشه و فقط back نمایان بشه اینطوری دیگه front رو نمیبینید و back رو میبینید . (امیدوارم مطلب رو خوب رسونده باشم)

در رابطه با خاصیت backface-visibility هم میتونید این مقاله کامل رو مطالعه بفرمایید.

حالا استایل front رو تعریف می کنیم :

z-index رو برابر با ۱۰ قرار میدیم چون در آخر با این z-index قراره front رو به زیر back انتقال بدیم .

حالا میریم سراغ back :

 

استایل زیر هم به back اختصاص میدیم :

 

این قسمت چون پشت کادر ماست با خاصیت transform چرخوندیمش تا زمانی که قراره افکت اجرا بشه این حالت پشت به رو شدن به درستی اتفاق بیوفته .

میتونید در رابطه با transform این مقاله رو مطالعه بفرمایید .

 

خوب تا اینجا کل پروژه ی ما به شکل زیر تعریف شد :

 

حالا وقتشه که این افکت زیبارو روی این کادر پیاده کنیم . برای این کار باید روی hover عنصر card کار کنیم ، چون تمامی اجزای ما توی این باکس قرار دارن . حالا استایل زیر رو اضافه می کنیم :

 

اینجا گفتیم زمانی که موس روی کادر اومد ، کادر ما ۱۸۰ درجه بچرخه ، در این صورت back که ۱۸۰ درجه چرخیده بود نمایان میشه ، چون با چرخوندن ۱۸۰ درجه ی کادر ، دوباره back چرخیده میشه و به حالت اولش برمیگرده درسته ؟ حالا باید بگیم زمانی که back نمایان میشه front پشت back قرار بگیره و به عبارتی front پشت به رو بشه ، برای همین استایل زیر رو اضافه می کنیم :

 

با z-index که برابر با صفر کردیم front به زیر back میره و دیگه نمایان نمیشه . به همین راحتی 🙂

میتونید در رابطه با z-index هم این مقاله رو مطالعه بفرمایید.

 

دوستان فراموش نکنید که این پشت به رو شدن با این افکت زیبا رو مدیون transform-style و transition هستیم 🙂

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

موفق و پاینده باشید .

منتشر شده در سومین نسخه ی ماهنامه طراحی وب

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

۱ دیدگاه

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین