مینی پروژه و سورس کد طراحی سایت

در این بخش کدها و مینی پروژه های پرکاربرد برای طراحی قرار داده شده که شما با انتخاب هر کدوم میتونید به جزئیات و نحوه پیاده سازی اونا دسترسی داشته باشید و همچنین سورس کد مورد نظر خودتون رو دانلود کنید و از اون برای کار خودتون استفاده کنید .

Pencil  Loading لودینگ مدادی
CSS #30
Loading یا همان لود صفحه به‌ طور خلاصه به شما این امکان را می‌دهد که عناصر اصلی صفحه سایت شما لود شود و سپس عناصری مانند عکس و... لود شوند. این روش باعث می‌شود که مخاطب، عناصر دیگر صفحه مانند متن و... که حجم زیادی ندارند و سریع‌تر لود می‌شوند را ببیند و زود از صفحه خارج نشود.
کارت باکس انیمیشنی
CSS #29
یک ویژگی پرطرفدار در طراحی سایت استفاده از افکت هاور (Hover) است که تاثیر قابل توجهی بر روی تجربه کاربری وب سایت شما به خصوص هنگام طراحی فروشگاه اینترنتی می گذارد.
انیمیشن قلب تپنده❤️
CSS #28
استفاده از انیمیشن ظاهر سایت را جذاب‌تر کرده و کاستی‌هایی مثل مدت زمان لود شدن صفحه را تحت پوشش قرار می‌دهد. انیمیشن‌ باعث جذب کاربر بیشتر به سایت می‌شود و تجربه کاربری را افزایش می‌دهد و در نتیجه مخاطب وقت بیشتری را در وب‌سایت ما می‌گذراند
Optimus Prime Toggle تغییر نمایش محصول
CSS #27
در بازاریابی، نمایش محصول بخشی از فعالیت های ترویجی یک محصول به حساب می آید که در آن محصولی به مشتریان بالقوه نشان داده می شود. هدف از نمایش محصول، معرفی آن به مشتریان بالقوه و ایجاد انگیزه خرید در آنها است.
هاور متن  Text hover effect
CSS #26
هاور(Hover) نوعی از طراحی است که برای دادن اطلاعات بیشتر به کاربر در طراحی سایت به کار می‌رود. در این سبک از طراحی با رفتن نشانگر موس روی هر یک از المان‌ها، تغییری در رنگ، اندازه، سایز، تصویر و... المان رخ می‌دهد. با اینکار توجه کاربر به آن المان جلب می‌شود.
طراحی ساعت شنی Hourglass
CSS #25
در این آموزش با استفاده از HTML و CSS می خواهیم یک ساعت شنی بدون زبان جاوا اسکریپت طراحی کنیم، دقت کنید که در این آموزش از هیچ فریم ورکی استفاده نشده است
طراحی لودینگ Loading
CSS #23
استفاده از loading در صفحات وبسایت بسیار کار امد میباشد و اکثر طراحان سایت از لودینگ برای طراحی خود اسفاده میکنند امروز قصد دارم با این آموزش یک لودینگ زیبا و شکیل برای شما طراحی کنم و در اختیار شما قرار بدم پس همراه من باشید
باکس معرفی محصول
CSS #22
معرفی محصول (NPI) چیست؟ این شیوه بازاریابی به کسب و کار شما کمک می کند تا یک ایده را به عنوان یک محصول یا خدمات به بازار معرفی کنید. در معرفی می توان به توسعه و نمونه سازی تا تولید و تجاری سازی اشاره کرد. فرآیند معرفی محصول نسبتا پیچیده است و برنامه ریزی و اجرای آن نیازمند بودجه و زمان زیادی است
card Hover خیلی شیک
CSS #21
هاور یک افکت جایگزین شونده در طراحی گرافیکی استی است که با عملکرد موس بر روی المان ها اجرا می شود. به این صورت که زمانی که شما یک المان در سایت خودتان مانند یک تصویر دارید و بعد از این که نشانگر موس مخاطب روی آن قرار می گیرد، المان تغییر می کند، می چرخد، رنگش عوض می شود و… شما از هاور استفاده کرده اید.
طراحی دکمه تراکنش
CSS #20
یه حالت انیمیشنی خیلی خاص و فوق العاده برای صفحاتی که توشون قراره تراکنشی انجام بشه حتما یادش بگیر