چطوری میتونم یک وب سایت فروشگاهی بسازم با html,css,js ؟ آموزش تصویری رایگان + متنی رایگان
چطوری میتونید وب سایت فروشگاهی بسازید ؟ من قول میدم بهتون این کارو براتون خیلی راحت آموزش بدم اگه باور ندارد چند دقیقه وقتتو بذارید ببینید چه راز هایی بهتون خواهم گفت ؟
این آموزش یک آموزش فول استک و کامل برای ساخت یک وب سایت با html می باشد که مشکل بسیار از برنامه نویسان می باشد چرا که یک برنامه نویس باید ساختار وب سایت را درک کند و بتواند در زمان مناسب ریکشن نشان دهد موافقین ؟ اگه...
رایگان
مجموعه 30 انیمیشن css و svg کاربردی و جذاب
آموزش cssتمامی انیمیشن های معرفی شده با css و svg و در برخی موارد همراه javascript نیز معرفی شده اند انیمیشن ها قابل دانلود هستند برای دانلود میتوانید از روی کد های آنلاین codepen دانلود را انجام بدید
Border توسط شان مک کافری
هنگامی که روی دستورالعمل "HOVER" می روید ، فقط با CSS ساخته می شود و یک حاشیه به راحتی متن ایجاد می شود.
Elastic SVG Sidebar by Nikolay Talanov
نوار کناری وقتی می خواهید آن را از کنار خود...
رایگان
10 قطعه کد متریال رایگان به صورت اپن سورس
آموزش cssکد جدول رسپانسیو
در اینجا قطعه طراحی مواد با پیچ و تاب منحصر به فرد است. این جدول پاسخگو ایجاد شده توسط سرگئی کوپلاتکی در واقع میزبان لینک های دیگر به قطعه طراحی مواد است. خیلی باحال!
این به طور طبیعی با استفاده از تکنیک های طراحی مواد ایجاد می شود، بنابراین جدول باید کاملا به طرح شما متوسل شود. اما سخت ترین بخشی از طراحی موبایل، ساخت جداول است که روی صفحه نمایش...
رایگان
آموزش طراحی صفحه فرود دو تیکه
آموزش cssصفحه اصلی شما یک عنصر مهم در طرح وب سایت شماست . این اولین فرصت واقعی است که شما باید کسب و کارتان را معرفی کنید یا محصولی که به فروش می رسانید، طراحی آن کلید است. صفحه فرود با یک هدف متمرکز طراحی شده به عنوان یک تماس به عمل (CTA) طراحی شده است. استفاده از رنگ ها و تصاویر برای تکمیل خواست های به عمل و تجربه کاربر ضروری است.
CodePen برای این آموزش ببینید
در این...
رایگان
دانلود سورس js , css نمایش گالری تصاویر به صورت سه بعدی
آموزش cssایده این منبع این است: اگر من یک گالری محصولات داشته باشم، من بهترین تصویر را برای هر یک از آنها انتخاب می کنم. اما اگر یک تصویر کافی نیست چه؟ مشتری بر روی محصول کلیک می کند، او به صفحه محصول تکیه می کند، و در بیشتر موارد، یک نمایش اسلاید در آنجا پیدا می کند. با این حال، اگر آنها قبل از رفتن به صفحه محصول، تصاویر بیشتری از یک محصول مشابه را ببینند، احتمال بیشتری وجود دارد که آنها...
رایگان
سورس jquery افزودن به سبد خرید سریع
آموزش cssاستفاده از صفحه نمایش بزرگتر نباید محدود به استفاده از تصاویر / عناصر بزرگتر باشد. ما می توانیم این پیکسل های اضافی را با افزایش تجربه کاربر با ویژگی های اضافی کار کنیم.
UX استاندارد برای یک گالری محصول: کلیک کاربر بر روی یک محصول که او دوست دارد، و سپس به صفحه محصول تک حرکت می کند. از این جا، او قصد دارد برخی از گزینه ها را انتخاب کند و در نهایت محصول را به سبد خرید اضافه کند. هیچ...
رایگان
دانلود پروژه css , java جهت نمایش نمونه کار ها با انیمیشن بسیار جذاب
آموزش cssما با ایده حرکت بلوک های محتوا به عنوان راهی برای انتقال از صفحه اصلی / گالری به صفحه پروژه، بازی کرده ایم. تمام پانل ها در امتداد محور Y حرکت می کنند (محور x در دستگاه های کوچکتر)، و حرکت به وسیله ی این که کاربر میخواهد بیشتر درباره یک پروژه یاد بگیرد یا میخواهد به ناوبری دسترسی پیدا کند، حرکت می کند.
تصاویر: unsplash.com
ایجاد ساختار
ساختار HTML از دو لیست های نامرتب تشکیل...
رایگان
دانلود سورس js , css جستجو پیشرفته با انیمیشن زیبا
آموزش cssبدست آوردن تجربه جستجو به راستی کار ساده ای نیست. نقطه شروع همیشه فرم جستجو است که در اکثر موارد تنها شامل یک فیلد ورودی و یک دکمه ارسال است. صفحه نتایج جستجو برای طراحی بسیار مشکل است، مخصوصا اگر شما دارای دسته های مختلف محتوا باشید.
برای وب سایت های بزرگ و فروشگاه های آنلاین، چه مهم است، اما سعی کنید پیش بینی حرکت کاربر. ما باید توجه داشته باشیم که اغلب کاربران ما در مورد کجا...
رایگان
دانلود سورس انیمیشن js , css جهت صفحه بندی خدمات شما بدون رفرش
آموزش cssما اخیرا با یک انیمیشن طراحی شده با CSS تجربه کردیم که جایگزین تازه کردن صفحه وب می شود در حالی که محتوای با استفاده از ajax به روز شده است. انفجار امروز بر اساس یک ایده است، اما با یک اجرای متفاوت: در این زمان یک اثر شناور ساده تبدیل به یک نوار بارگذاری، که در نهایت با محتوای جدید گسترش می یابد!
آیکون های کتابخانه هسته ای ما .
ایجاد ساختار
ساختار HTML از یک...
رایگان
باکس ثبت نام حرفه ای با انیمیشن زیبا css,jquery
آموزش cssدر بیشتر موارد، کاربران خود را به یک صفحه ثبت نام هدایت می کنید. با این حال، اگر فرآیند پرداخت شما کاملا ساده باشد، یک روش جایگزین برای جابجایی جدول قیمت گذاری است، و در همان صفحه، فرم پرداخت را نشان می دهد. این همان چیزی است که ما با قطعه امروز تلاش کردیم.
صحبت کردن به اندازه کافی، بیایید به کد بچرخانیم؛)
منابع:
Velocity.js توسط جولیان شاپیرو.
آیکون از Nucleo .
ایجاد...
رایگان
دانلود منو ساید بار زیبا با css , jquery همراه با دمو
آموزش cssنوشتن رسپانسیو منو برای سایت های مگا، کار ساده ای نیست. اگر شما در حال کار بر روی یک پنل مدیریت هستید، احتمالا شما باید یک منوی عمودی را طراحی و توسعه دهید، با مقدار زیادی زیر مجموعه ها. به همین دلیل تصمیم گرفتیم قطعه امروز را به اشتراک بگذاریم! ناوبری نوار ابزار ما می تواند زندگی شما را ساده تر با ارائه یک قالب شروع ساده برای پروژه بعدی خود؛)
آیکون: کتابخانه هسته...
رایگان
سورس کامل به همراه پیشنمایش تایم لاین jqruey , css
آموزش cssخط زمانی عمودی ما تا کنون یکی از محبوب ترین منابع در ملت وب است. بسیاری از شما از ما خواسته اید تا یک جدول زمانی افقی را نیز اضافه کنید. که تقدیم شما میگردد.
ساخت یک جدول زمانی افقی کمی دشوار بود، زیرا شما نمی توانید به عمودی (بصری) رفتار پیمایش تکیه کنید. ما تصمیم گرفتیم جداول زمانی و حوادث را جدا کنیم، اولین کسی که مانند یک نوار لغزنده کار می کند، در حالی که دومین اشغال...
رایگان
آموزش کامل و سورس سبد خرید css , jquery با پیشنمایش و دانلود
آموزش cssما در مورد فرآیند "اضافه به سبد خرید" به الگوهای مختلفی استفاده می کنیم. ایده اصلی این الگو، اطلاع دادن به کاربر است که یک مورد به سبد اضافه شده است و او را با یک پیوند برای ادامه به پرداخت، ارائه می دهد.
ما با این ایده مخفی کردن سبد خرید به طور پیش فرض آزمایش کرده ایم و آن را زمانی که کاربر بر روی دکمه «افزودن به سبد خرید» کلیک می کند نشان می دهد. به این ترتیب کاربر می...
رایگان
سورس پنهان سازی منو در هنگام حرکت اسکرول با جی کوئری
آموزش cssدر حال حاضر، به طور خاص در دستگاه های تلفن همراه، جهش های خودکار پنهان شده اند. پشت همین ایده این الگوی UX ساده و در عین حال کارآمد است: ما می خواهیم ناوبری آسان برای رسیدن به تمام زمان، بنابراین ما آن را در بالا قرار می گیرند. با این حال، هنگامی که کاربر به سمت پایین حرکت می کند، ما آن را به طور خودکار پنهان می کنیم تا مکان بیشتری برای محتوا ایجاد شود. اگر کاربر حرکت کند، رفتار خود...
رایگان
سورس js نمایش 360 درجه و سه بعدی تصاویر محصولات فروشگاهتان
آموزش cssدر طراحی تجارت الکترونیک یکی از اهداف اصلی این است که فاصله بین محصول و کاربر را پر کنید. این به ویژه برای کالاهای با قیمت بالا مرتبط است. از این رو، اهمیت ادغام ابزارهای تعاملی، برای دادن کاربر به یک راه برای "تقریبا تجربه" محصول.
منابع امروز یک منبع ساده و تعاملی است که می تواند برای نشان دادن یک تور مجازی از محصول استفاده شود. ایده قطعه این است که از یک حرکت تصویر...
رایگان
دانلود سورس استایل CSS برای منو کشویی با انیمیشن
آموزش cssساختار
از دو عنصر اصلی تشکیل شده است nav.main-navبرای موارد ناوبری بالا و div.morph-dropdown-wrapperبسته بندی عناصر کرکره.
برای هر آیتم لیست در nav.main-navعنصر، a li.dropdownدر داخل ایجاد می شود .morph-dropdown-wrapper.
Open Nav
About
Pricing
Contact
اضافی div.bg-layerدر داخل ساخته شده است div.morph-dropdown-wrapperو برای ایجاد پس زمینه morphing dropdown استفاده می شود.
افزودن سبک
در...
رایگان
دانلود منبع CSS نقشه سایت یا Breadcrumbs
آموزش css
ایجاد ساختار
ساختار HTML بسیار ساده است: یک لیست مرتب از اقلام، پیچیده را به یک <nav>عنصر.
<nav>
<ol class="cd-breadcrumb">
<li><a href="#0">Home</a></li>
<li><a href="#0">Gallery</a></li>
<li><a href="#0">Web</a></li>
<li class="current"><em>Project</em></li>
</ol>
</nav>
افزودن سبک و دستورالعمل
ما 2 کلاس اصلی...
رایگان
دانلود رایگان کد گالری تصویر بسیار جذاب با html,jquery,css
آموزش cssایجاد ساختار
HTML در 2 اصلی ساختار <div> با کلاس ( .cd-slider-wrapperو .cd-item-info) - اولی مربوط به گالری عکس و دوم اطلاعات محصول (عنوان، دکمه عمل ..) - پیچیده در داخل یک section.cd-single-item. محتوای باقی مانده در یک .cd-contentبخش جداگانه وارد شده است .
<section class="cd-single-item">
<div class="cd-slider-wrapper">
<ul class="cd-slider">
<li class="selected"><img src="img/img-1.jpg"...
رایگان
دانلود رایگان اسلایدر رسپانسیو ساخته شده با jquery
آموزش cssاسلایدر جی کوئری اساسی پلاگین جی کوئری سبک و سریع برای ایجاد لغزنده تصویر پاسخگو با حداقل ویژگی ها و تم های تمیز است.
امکانات:
طرح رسپانسیو
سبک و آسان برای استفاده
به طور خودکار نوشتن شرح تصاویر با استفاده از ویژگی های عنوان
فشرده سازی و لغزش انیمیشن
پیمایش پیمایش و عددی
خودکار بازی و شروع تصادفی پشتیبانی می شود
مرورگر صلیب
چگونه از آن استفاده کنید:
1. شامل آخرین...
رایگان
25+ کتابخانه انیمیشن CSS رایگان
آموزش cssامروز ما در حال رفتن به در بالای نگاه CSS انیمیشن کتابخانه برای کمک به شما انیمیشن های بسیار زیبا ایجاد کنید. انیمیشن ها زندگی را به وب، جنبش معنی دار شدت مطمئن UX را به سطح بعدی. شما احتمالا شنیده اصطلاح "انتقال" قبل، درست است؟ انتقال CSS چیزی را به محل در تغییر وضعیت هنگامی که شما معلق در هوا و یا چیزی است. در حال حاضر ما می توانید انیمیشن های CSS به تحریک و تشجیع هر...
رایگان
دانلود فرم جستجوی CSS3/jQuery بهمراه PSD
آموزش cssفرم جستجو بخش بسیار مهمی از یک وب سایت بوده و به کاربران اجازه می دهد ب محتوای مورد نظر را با سرعت زیاد پیدا کنند. یک فرم جستجو پیشرفته با طراحی خوب باعث می شود یک وب سایت حرفه ای و مدرن باشد.
امروز برای شما کاربرای عزیز یک فرم جستجو آماده کرده ایم که میتوانید به رایگان دانلود و استفاده...
رایگان
دانلود فرم ورود فلت رایگان HTML
آموزش cssبا سلام و درود خدمت کاربرای عزیز ملت وب
در این ساعت خدمت شما عزیزان فرم ورود بصورت فلت را آماده کرده ایم که شما میتوانید در طراحی های خود بصورت رایگان استفاده کنید.
چنانچه در پیشنمایش مشاهده میکنید فرم ورود با کلیک روی "کلیک کن" تبدیل به فرم ثبت نام خواهد شد.
امیدوارم مورد استفاده شما قرار گرفته...
رایگان
سورس مودال باکس modal box
آموزش cssسلام خدمت دوستان امروز با آموزش ساخت مودال باکس خدمت شما هستیم که بسیار مناسب برای ایده گیری و تسریع در طراحی وب سایت خواهد بود modal box فوق از 7 دموی متفاوت می باشد که میتوان به ساید بار کردن منو ها با مودال و دگمه های اشتراک گذاری متون با کاراکتر بیشتر با استفاده فول اسکرین و کلی امکانات دیگر...
در زیر نمایی از تصاویر دمو رو خدمتتون ارسال میکنیم :
مودال ورود و عضویت:
مودال...
رایگان
15 کد تب بندی شده با css و jquery
با 15 نمونه سورس تب بندی شده در خدمت دوستان هستیم که امیدواریم خوشتان آمده باشد
فایل های این مجموعه کاملا کم حجم بوده و از انیمشن های جالب و زیبا جهت باز کردن تب بندی ها استفاده گردیده که طرح را بسیار زیبا کرده است
جهت نمایش آیکون ها از svg استفاده گردیده که سرعت کار را بالا ببرد
از تگ های سکشن جهت باز شروع و اتمام تب ها استفاده شده است
آموزش تنظیمات تب بندی ها :
ما از آیکون...
رایگان
آموزش ساخت منو با css
آموزش cssسلام با آموزش ساخت منو انیمشن یا به اصطلاح متحرک در خدمت کاربران ملت وب می باشیم .
این منو کاملا با css نوشته شده است و بسیار سبک می باشد دارای طراحی فلت و زیبا می باشد .
کاملا مناسب جهت استفاده در قالب هایتان امیدوارم خوشتان آمده باشد.
کد های html
اکثر منو ها بر اساس لیست یا تگ های <UI> و <li> نوشته می شوند که این کد نیز نمونه ای از آن ها می باشد که ul به عنوان پدر...
رایگان
خصوصیت align-items در CSS
آموزش cssدر این مقاله قصد دارم نحوه ی جای گیری صحیح متن رو داخل یک تگ توضیح بدم .
فرض کنید یک تگ Div داریم که میخوایم متن Hello word رو در مرکز این تگ قرار بدیم :
برای انجام اینکار خیلی ها استفاده از خصوصیات text-align و vertical-align رو به ما پیشنهاد می دهند که خب این دو خصوصیت همیشه و به طور کامل به داد ما نمیرسه و پاسخ گوی نیاز ما نیستن اما یک راه خیلی ساده و سریع برای انجام اینکار استفاده از سه خصوصت Display و...
رایگان
کاربردهای انتخابگر target در CSS
آموزش csstarget: یکی از انتخابگرهای نوع شبه کلاس (pseudo-class) میباشد که به ما اجازه میدهد استایل مورد نظر خود را به عنصر هدف بدهیم. با استفاده از انتخابگر target میتوانیم CSS قسمتی را که روی آن کلیک شده است، تغییر دهیم.
Target موارد استفادهی بسیاری دارد. برای مثال فرض کنید جاوااسکریپت به هر دلیلی در مرورگر کاربر اجرا نشود. در اینصورت میتوانید از ترفندهای target برای...
رایگان