آموزش طراحی فرم لاگین با HTML و CSS

آموزش طراحی فرم لاگین با HTML و CSS

جلسه 1
اسلایدر کارت وبلاگ متحرک با HTML و CSS

اسلایدر کارت وبلاگ متحرک با HTML و CSS

جلسه 2
آموزش ساخت ساعت دیجیتال در جاوا اسکریپت

آموزش ساخت ساعت دیجیتال در جاوا اسکریپت

جلسه 3
نمایش و پنهان کردن رمز عبور در جاوا اسکریپت

نمایش و پنهان کردن رمز عبور در جاوا اسکریپت

جلسه 4
ساخت منوی بازشو در HTML CSS و جاوا اسکریپت

ساخت منوی بازشو در HTML CSS و جاوا اسکریپت

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

مینی وب اپلیکیشن پسورد ساز با جاوا اسکریپت

جلسه 6
ساخت دکمه سوئیچ یا Toggle Button در جاوا اسکریپت

ساخت دکمه سوئیچ یا Toggle Button در جاوا اسکریپت

جلسه 7
ساخت باکس جستجو یا سرچ بار در جاوا اسکریپت

ساخت باکس جستجو یا سرچ بار در جاوا اسکریپت

جلسه 8
ساخت انیمیشن کلیک روی دکمه در جاوا اسکریپت

ساخت انیمیشن کلیک روی دکمه در جاوا اسکریپت

جلسه 9
پروفایل کارت با تغییر رنگ تم در جاوا اسکریپت

پروفایل کارت با تغییر رنگ تم در جاوا اسکریپت

جلسه 10
آموزش ساخت لندینگ پیج با HTML و CSS و جاوا اسکریپت

آموزش ساخت لندینگ پیج با HTML و CSS و جاوا اسکریپت

جلسه 11
افکت هاور دکمه با استفاده از HTML و CSS (دکمه انیمیشنی)

افکت هاور دکمه با استفاده از HTML و CSS (دکمه انیمیشنی)

جلسه 12
آموزش ویدیویی ساخت اکولایزر حرفه ای با HTML & CSS

آموزش ویدیویی ساخت اکولایزر حرفه ای با HTML & CSS

جلسه 13

شما در حال مشاهده
جلسه 14 هستید

ساخت امواج SVG | افزودن CSS Waves به سایت (آموزش ویدیویی)

ساخت امواج SVG | افزودن CSS Waves به سایت (آموزش ویدیویی)

جلسه 14
آموزش ساخت هاور 3 بعدی برای دکمه ها با HTML و CSS

آموزش ساخت هاور 3 بعدی برای دکمه ها با HTML و CSS

جلسه 15
آموزش ویدیویی ساخت UI کارت پروفایل کاربری با HTML & CSS

آموزش ویدیویی ساخت UI کارت پروفایل کاربری با HTML & CSS

جلسه 16
ویدیوی آموزش ساخت ۴ افکت هاور آیکون تنها با HTML & CSS

ویدیوی آموزش ساخت ۴ افکت هاور آیکون تنها با HTML & CSS

جلسه 17
آموزش ساخت فرم ورود به سایت با افکت های زیبا با HTML و CSS

آموزش ساخت فرم ورود به سایت با افکت های زیبا با HTML و CSS

جلسه 18
آموزش ساخت انیمیشن حرکت موس با جاوا اسکریپت

آموزش ساخت انیمیشن حرکت موس با جاوا اسکریپت

جلسه 19
آموزش ساخت هاور آیکون انیمیشنی با html و css (ساخت تولتیپ)

آموزش ساخت هاور آیکون انیمیشنی با html و css (ساخت تولتیپ)

جلسه 20
ساخت باکس اطلاعات تماس در HTML و CSS (با هاور زیبا)

ساخت باکس اطلاعات تماس در HTML و CSS (با هاور زیبا)

جلسه 21
آموزش ساخت فرم ثبت نام با html و css (فرم ثبت‌نام در سایت)

آموزش ساخت فرم ثبت نام با html و css (فرم ثبت‌نام در سایت)

جلسه 22
آموزش طراحی هاور تصویر با HTML و CSS 🤩طراحی های خلاقانه

آموزش طراحی هاور تصویر با HTML و CSS 🤩طراحی های خلاقانه

جلسه 23
طراحی یک صفحه ساده وبسایت با HTML و CSS ✅برای مبتدیان

طراحی یک صفحه ساده وبسایت با HTML و CSS ✅برای مبتدیان

جلسه 24
طراحی صفحه تماس با ما ریسپانسیو با استفاده از HTML و CSS

طراحی صفحه تماس با ما ریسپانسیو با استفاده از HTML و CSS

جلسه 25
آموزش طراحی فرم لوگین با HTML و CSS 🤩 طراحی های خلاقانه فرانت اند

آموزش طراحی فرم لوگین با HTML و CSS 🤩 طراحی های خلاقانه فرانت اند

جلسه 26
آموزش ساخت باکس قیمت گذاری با HTML و CSS

آموزش ساخت باکس قیمت گذاری با HTML و CSS

جلسه 27

مدرس دوره

نبی عبدی

زمان ویدیو

05:49 دقیقه

برو به دیگر جلسات

مینی پروژه HTML و CSS

برای دانلود ویدیو

وارد شوید

ساخت امواج SVG | افزودن CSS Waves به سایت (آموزش ویدیویی)

آخرین بروزرسانی در تاریخ : 14 شهریور 1402

ساخت امواج SVG: سلام به همه شما همراهان گرامی آکادمی وبکیما در این آموزش طراحی سایت می خواهیم به شما ساخت انواع امواج SVG یا همان CSS Waves را آموزش دهیم. اضافه کردن SVG waves اگر به صورت اصولی و استاندارد اضافه شود باعث زیبایی سایت شما می شود. اگر می خواهید امواج SVG را به سایت خود اضافه کنید این آموزش را تا انتها مطالعه بفرمایید.

آموزش ساخت موج های SVG | CSS Waves

به احتمال بسیار زیاد سایت هایی را مشاهده کرده اید که در قسمت هایی از سایت تصاویری به صورت موج استفاده شده است . برای مثال تصویر زیر را مشاهده کنید:

آموزش ساخت موج های SVG | CSS Waves
مدل های مختلفی از موج های SVG

چندین راه مختلف برای اضافه کردن این شکل ها به سایت وجود دارد. برای مثال شما می توانید از تصاویر با پسوند png برای ساخت این موج ها استفاده کنید. روش این کار هم به این صورت است که ابتدا در نرم افزار فتوشاپ تصویر مورد نیاز خود را ساخته سپس طبق آموزش ویدیویی زیر آن را به پروژه خود اضافه کنید.

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

آموزش ساخت امواج SVG با نرم افزار ایلوستریتور ( illustrator )

یکی دیگه از راه هایی که می توانید موج های زیبایی را به سایت تان اضافه کنید این است که ابتدا در نرم افزار ایلوستریتور – illustrator یک شکل که مناسب سایت تان باشد را بسازید سپس آن را به سایت خود اضافه کنید. در ویدیوی زیر ابتدا یک Wave شکل در نرم افزار ایلوستریتور ساختیم سپس آن را به پروژه طراحی سایت خود اضافه کردیم.

معرفی سایت getwaves برای ساخت ساده موج های SVG

حالا اگه حوصله کار کردن با نرم افزار های فتوشاپ و illustrator ندارید، پس بزارید یک ابزار خیلی باحال بهتون معرفی کنم که با استفاده از اون می تونید امواج SVG بسیار حرفه ای و زیبایی را در سایزها و رنگ ها و شکل های مختلف بسازید و فایل SVG آن را به صورت کاملا رایگان دانلود کنید و در پروژه های طراحی سایت خود استفاده کنید.

ابزاری که این همه ازش تعریف کردیم توسط شرکت zcreativelabs طراحی و توسعه داده شده است و نام آن getwaves است . برای دسترسی به ابزار getwaves روی دکمه زیر کلیک کنید.

پس از ورود به سایت getwaves مشاهده می کنید که با استفاده از ابزارهای قرار داده شده می توانید انواع مختلفی از امواج SVG را ساخته و در سایت خود استفاده کنید.

سایت getwaves برای ساخت امواج SVG
سایت getwaves برای ساخت امواج SVG

نمونه ای از یک موج SVG ساخته شده توسط ابزار getwaves

در زیر تصویری از یک نمونه موج SVG ساخته شده توسط ابزار getwaves را مشاهده می کنید که خیلی راحت به یک پروژه افزوده شده است:

یک نمونه موج SVG
یک نمونه موج SVG

افزودن انیمیشن به امواج SVG

حالا که یاد گرفتید چگونه امواج SVG را به طراحی سایت خود اضافه کنید می خوام بهتون یاد بدم که چگونه به این موج های SVG انیمیشن های زیبایی را اضافه کنید تا یک سایت زیبا و چشم نواز بتونید برای خودتون طراحی کنید.

نگران نباشید نیازی نیست که اسکریپت های سنگینی را برای افزودن انیمشن به امواج SVG به سایت خود اضافه کنید، راه بسیار ساده و کم حجمی برای افزودن انیمشن به موج های SVG وجود دارد آن هم استفاده از دستور transforms و keyframe animations در CSS است.به کد زیر توجه کنید:

@keyframes animateWave {
  ۰% {
    transform: scale(1,0);
  }
  ۱۰۰% {
    transform: scale(1,1);
  }
}
.wave-container > svg {
  display: block;
  transform-origin: bottom;
  animation: animateWave 1000ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

با استفاده از قطعه کد بالا می تونیم موج SVG ساخته شده را به شکل زیر انیمیشن دار کنیم:

افزودن انیمیشن به امواج SVG

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

ساخت حباب SVG حرفه ای (SVG blobs) با ابزار Blobmaker

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

ساخت حباب SVG حرفه ای (SVG blobs) با ابزار Blobmaker
حباب های SVG یا (SVG blobs)

خب برای ساخت حباب های SVG یا همون SVG blobs می تونید از ابزار Blobmaker که یکی دیگه از ابزارهای شرکت zcreativelabs است استفاده کنید برای دسترسی به ابزار Blobmaker از دکمه زیر استفاده کنید:

بعد از مراجعه به ابزار Blobmaker مشاهده می کنید که مثل ابزار قبلی دارای چندتا دکمه برای ساخت و کنترل SVG blobs دلخواه است. با استفاده از کنترل های قرار داده شده در این ابزار می توانید رنگ حباب SVG خودتون رو تغییر بدید یا اینکه تعداد ضلع های حباب SVG رو کم و زیاد کنید.

بذارید به صورت تصویری بهتون توضیح بدم . همان طور که در تصویر زیر مشاهده می کنید با استفاده از ابزار complexity می تونید تعداد ضلع های حباب رو تنظیم کنید:

 تنظیم تعداد ضلع حباب SVG حرفه ای (SVG blobs)
تنظیم تعداد ضلع حباب SVG حرفه ای (SVG blobs)

همچنین با استفاده از ابزار contrast می تونید تنظیم کنید که حباب SVG شما بیشتر به یک دایره شبیه باشه یا به یک چند ضلعی، در واقع پیچیدگی شکل رو می تونید تنظیم کنید:

تنظیم Contrast  حباب SVG حرفه ای (SVG blobs)
تنظیم Contrast حباب SVG

باحال ترین بخش ابزار Blobmaker  اینه که شما می تونید خیلی راحت و با استفاده از یک دکمه که در کنار بخش دانلود است ، حباب های SVG رندوم بسازید و اونقدر این دکمه رو بزنید تا یک حباب SVG مطابق سلیقه تون پیدا کنید.

تنظیم Contrast  حباب SVG حرفه ای (SVG blobs)
ساخت رندوم حباب SVG

بعد از پیدا کردن حباب SVG رویاهاتون ! خیلی راحت فایل SVG اونو دانلود کنید و مطابق ویدیوهای آموزشی بالا توی پروژه های طراحی سایت خودتون استفاده کنید.

نکته مهماگه حوصله خوندن مقاله رو ندارید می تونید با مشاهده ویدیوی آموزشی زیر با دو ابزار getwaves و Blobmaker به صورت کامل آشنا بشید و یاد بگیرید چگونه امواج SVG و حباب SVG مطابق سلیقه خودتون بسازید.

جمع بندی

در انتها امیدوارم که با استفاده از این آموزش بتونید امواج SVG و حباب های SVG زیبایی رو برای سایت خودتون بسازید، اگر به سری مقالات آموزش طراحی سایت علاقمندید مقاله های ۲۵+ منبع برای دانلود رایگان وکتورهای گرافیکی جذاب و با کیفیت بالا و ریسپانسیو در css | طراحی واکنشگرا در css و تکنیک های تجربه کاربری را حتما مطالعه کنید.

راستی شما هم اگر ابزاری رو برای ساخت این مدل اشکال می شناسید در بخش دیدگاه ها مطرح کنید تا دیگر کاربران هم بتونند استفاده کنند. ممنون از همراهی تون 😉

4.7/5 - (16 امتیاز)

نظرات در “ساخت امواج SVG | افزودن CSS Waves به سایت (آموزش ویدیویی)

  1. حقیقی میگوید:

    سلام استاد خسته نباشید
    ممنونم بابت آموزش های خوبتون
    افزودن انیمیشن به امواج SVG رو متوجه نشدم . من کد رو در قسمت کدهای سفارشی css وارد می کنم ولی حالت انیمیشن نمیگیره میشه لطفا راهنمایی کنید.!
    سپاسگذارم

    • پشتیبانی میگوید:

      باسلام، توجه کنید که شما باید کد css را با توجه به سایت خودتان کاستومایز کنید بعد در بخش کدهای سفارشی قرار دهید.

  2. z میگوید:

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

  3. yegane میگوید:

    مچکر از اموزش و سایت بسیار خوبتان
    میشه لطفا یه اموزش هم درباره متحرک سازی عناصر در صفحه بگذارید به گونه ای که در ابتدا پنهان باشد و با هر حرکت اسکرول به سمت پایین نمایش داده بشه

    • نبی عبدی میگوید:

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

    • نبی عبدی میگوید:

      خوشحالیم که آموزش ساخت امواج SVG مورد پسند شما قرار گرفته است. نظرات شما باعث دلگرمی ما برای تهیه آموزش های بیشتر می شود.

دیدگاهتان را بنویسید

آموزش‌های ویدیویی جدید فقط در یوتیوب منتشر می‌شود!

بزن بریــم!