آموزش طراحی صفحه 404 با CSS Animations

  • مدرس : حسین هزاره
  • سطح آموزش : متوسط
  • مدت : ۴۵ دقیقه
  • تعداد دانشجو : ۱۴۳۵
شما در گام هجدهم از ۲۴ گام مسیر طراحی رابط کاربری هستید

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

آموزش طراحی صفحه 404 با CSS Animations کاملا رایگان!

به دوره آموزشی ساخت صفحه 404 خوش آمدید ، به بهانه ساخت صفحه 404 می خوایم با ترفندهای CSS یا CSS Tricks آشنا بشیم. ما صفحه ای فانتزی با HTML،CSS و کمی jQuery  پیاده خواهیم کرد. دمو زیر رو ببینید 🙂

مشاهده دمو آنلاین

خطا و صفحه 404 چیست؟

یکی از صفحات پرکاربرد در سایت ها که باید همشه در طراحی سایت مد نظر قرار بدید، صفحات 404 هستند. زمانیکه کاربر به یک لینک شکسته و یا صفحه ای از سایت شما مراجعه کنه که اون صفحه وجود خارجی نداشته باشه، با خطای 404 در سمت سایت مواجه میشه. ما برای نگه داشتن کاربر باید صفحه 404 رو جذاب کنیم تا از سایت خارج نشه و گمان نکنه که سایت داون شده!

اگر از سیستم مدیریت محتوای وردپرس استفاده می کنین کافی هست تا در پوشه تم تون یک فایل با نام 404.php ایجاد کنین و محتوا و طرح صفحه 404 تون رو در اون قرار بدید. پس هر اچ تی ام الی رو میتونید به راحتی تبدیل به صفحه 404 برای وردپرس کنین.اگر با وردپرس آشنایی ندارید می تونید مسیر وردپرس رو در ویلرن دنبال کنید.

همونطور که در دمو دیدید، المان هایی وجود دارند که به صورت متحرک هستند، ما تماما با CSS و jQuery پیاده خواهیم کرد و هیچ کدام غیر از تصویر پشت زمینه تصویر نیستند و حتی در کنار اون یه موزیک مخوف و ترسناک هم اضافه خواهیم کرد تا حالت فانتزی و ترسناک داشته باشه 😀

راستی پیشنیاز این دوره فقط این هست که باید HTML و CSS رو مسلط باشید، همین 🙂 اگر تسلط ندارید هیچ عیبی نداره حتما دوره آموزش HTML و  CSS ویلرن رو مشاهده کنید و بعد بیاید این دوره ترسناک رو ببینید (شوخی کردم، ترس نداره بیا ببین چه خبره 😀 )

امیدواریم که مثل همیشه مارو همراهی کنید، بهتره همین الان دست به کار بشید و این دوره کوتاه، راحت و البته شدیــــدا جذاب رو مشاهده کنید. 😀

موفق باشید 🙂

دورس طراحی صفحه 404 با CSS Animations

  • 1- معرفی دوره ساخت صفحه 404

    1 دقیقه
  • با ما همراه باشید تا بیشتر در مورد ساخت و پیاده سازی صفحه 404 اطلاع پیدا کنید .

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

    در صورت نیاز به دانلود این ویدئو، اینجا کلیک کنید

  • 2- پیاده سازی HTML صفحه 404

    6 دقیقه
  • در این جلسه کدهای HTML رو می نویسیم تا بتونیم استایل هایی که نیاز داریم رو برای پروژمون پیاده سازی کنیم.

    حتما با ما همراه باشید.

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

    در صورت نیاز به دانلود این ویدئو، اینجا کلیک کنید

  • 3-پیاده سازی استایل ها

    23 دقیقه
  • قسمت اول :

    در این قسمت ما background یا تصویر پشت زمینه رو پیاده خواهیم کرد و بعد از اون استایل های دو عدد 4 رو میزنیم، در نهایت ظاهر پروژه به صورت زیر میشه.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

     

    قسمت دوم :

    حالا نوبت می رسه به آقای روح 😀 باید با CSS ، روح که همون عدد 0 بین دو عدد 4 هست رو پیاده کنیم 🙂 و بعد از اون هم با خاصیت animation در CSS اون رو متحرک کنیم و در نهایت کارمون مثل تصویر زیر در میاد.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

     

    قسمت سوم :

    در این بخش دهان روح عزیزمون رو پیاده می کنیم و در کنارش هم دندونای خوشکلش رو، بعد از این ها یه خون کنار لبش ایجاد می کنیم:D مثل تصویر زیر

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

     

  • 4- تکمیل استایل دهی و ایجاد متن و دکمه زیر 404

    11 دقیقه
  • میخوایم از دهان آقای روح خون بریزه بیرون، بازم با خاصیت animation در CSS این کار رو انجام می دیم.

    بعد از اون متنی برای توضیحات بیشتر زیر 404 خواهیم نوشت و دکمه ای میذاریم که بتونه برگرده به صفحه اصلی وبسایت ما 🙂

    و در آخر صفحه 404 ما تکمیل میشه و چیزی مثل این تصویر داریم.

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

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

  • 5- افزودن موزیک و دودهای متحرک به پشت زمینه صفحه

    3 دقیقه
  • خوش اومدین به آخرین جلسه این آموزش

    همونطور که گفتیم می خوایم با جی کوئری دود های متحرکی  ایجاد کنیم و در آخر هم موزیک مخوفی رو به این صفحه اضافه می کنیم تا کارمون بسیار جذاب بشه 🙂

    با ما همراه باشید.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

نظرات آموزش طراحی صفحه 404 با CSS Animations

  • برای مشاهده نظرات و سوالات، بر روی دکمه مربوطه کلیک کنید
  • ارتباط سریع و موثر با مدرس دوره
  • امکان ارسال فایل های پروژه
  • پاسخگویی متنی، صوتی و تصویری به سوالات شما