

در بیشتر موارد، کاربران خود را به یک صفحه ثبت نام هدایت می کنید. با این حال، اگر فرآیند پرداخت شما کاملا ساده باشد، یک روش جایگزین برای جابجایی جدول قیمت گذاری است، و در همان صفحه، فرم پرداخت را نشان می دهد. این همان چیزی است که ما با قطعه امروز تلاش کردیم.
صحبت کردن به اندازه کافی، بیایید به کد بچرخانیم؛)
منابع:
- Velocity.js توسط جولیان شاپیرو.
- آیکون از Nucleo .
ایجاد ساختار
ساختار HTML است: توسط 2 عنصر اصلی تشکیل شده ul.cd-pricing
است که جدول قیمت گذاری، و div.cd-form
، که پنجره فرم های معین.
هر برنامه شامل هدر با عنوان و قیمت طرح، div.cd-pricing-features
با یک لیست از ویژگی ها و یک پاورقی با یک دکمه تماس به عمل است.
ساختار فرم کاملا ساده است. فقط یک یادداشت: یک div.cd-plan-info
عنصر خالی وجود دارد که با استفاده از jQuery با اطلاعات برنامه انتخاب شده توسط کاربر (اساسا با کلون div.cd-pricing-header
و .cd-pricing-features
) پر می شود.
<ul class="cd-pricing">
<li>
<header class="cd-pricing-header">
<h2>Basic</h2>
<div class="cd-price">
<span>$9.99</span>
<span>month</span>
</div>
</header> <!-- .cd-pricing-header -->
<div class="cd-pricing-features">
<ul>
<li class="available"><em>Feature 1</em></li>
<li><em>Feature 2</em></li>
<li><em>Feature 3</em></li>
<li><em>Feature 4</em></li>
</ul>
</div> <!-- .cd-pricing-features -->
<footer class="cd-pricing-footer">
<a href="#0">Select</a>
</footer> <!-- .cd-pricing-footer -->
</li>
<li>
<!-- ... -->
</li>
<li>
<!-- ... -->
</li>
</ul> <!-- .cd-pricing -->
<div class="cd-form">
<div class="cd-plan-info">
<!-- content will be loaded using jQuery - according to the selected plan -->
</div>
<div class="cd-more-info">
<h3>Need help?</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<form action="">
<fieldset>
<legend>Account Info</legend>
<div class="half-width">
<label for="userName">Name</label>
<input type="text" id="userName" name="userName">
</div>
<div class="half-width">
<label for="userEmail">Email</label>
<input type="email" id="userEmail" name="userEmail">
</div>
<div class="half-width">
<label for="userPassword">Password</label>
<input type="password" id="userPassword" name="userPassword">
</div>
<div class="half-width">
<label for="userPasswordRepeat">Repeat Password</label>
<input type="password" id="userPasswordRepeat" name="userPasswordRepeat">
</div>
</fieldset>
<fieldset>
<!-- ... -->
</fieldset>
<fieldset>
<!-- ... -->
</fieldset>
</form>
<a href="#0" class="cd-close"></a>
</div> <!-- .cd-form -->
<div class="cd-overlay"></div> <!-- shadow layer -->
افزودن سبک
CSS برای این منبع بسیار ساده است. فقط برخی نکات: هنگامی که فرم قابل مشاهده .empty-box
است، کلاس به مورد اضافه .cd-pricing > li
می شود. از آنجا که کل آیتم لیست را کلون می کنیم (و آن را داخل فرم قرار می دهیم)، اصلی اصلی هنوز هم وجود دارد. در این مورد، ما از .empty-box
کلاس استفاده کردیم تا آیتم اصلی لیست را پنهان کنیم.
.cd-pricing > li {
position: relative;
margin: 0 auto 2.5em;
background-color: #ffffff;
border-radius: .3em .3em .25em .25em;
box-shadow: 0 2px 8px rgba(2, 4, 5, 0.5);
}
.cd-pricing > li.empty-box {
box-shadow: none;
}
.cd-pricing > li.empty-box::after {
/* placeholder visible when .cd-form is open - in this case same color of the background */
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #0f222b;
}
ما از .empty-box
کلاس نیز استفاده می کنیم تا دکمه عمل در پایین صفحه را هدف قرار دهد، به طوری که هنگامی که کاربر فرم را بسته می کند (از مقیاس (0) به مقیاس (1)) متحرک می شود.
.cd-pricing-footer a {
transition: transform 0.3s;
}
.empty-box .cd-pricing-footer a {
/* scale down to 0 the action button when sign up form is visible */
transform: scale(0);
}
این div.cd-form
است که در position: fixed;
آن است و آن را به اندازه به طور پیش فرض نیست. هنگامی که کاربر شیپور خاموشی / کلیک بر روی دکمه انتخاب، ما را به شکل قابل مشاهده است (از visibility: hidden;
به visibility: visible;
)، آن را به همان اندازه از اقلام لیست قیمت گذاری اختصاص دهید، و تحریک و تشجیع آن با ساخت آن بزرگتر است. این توهم باعث می شود که این آیتم قیمت گذاری است که در حال افزایش است، در حالیکه آن div.cd-form
، همان اندازه دارد و دارای عناصر مشابه است (کلونها - که سپس برای ایجاد فضای فرم ثبت نام حرکت می کنند).
/* --------------------------------
Form
-------------------------------- */
.cd-form {
position: fixed;
z-index: 2;
background-color: #ffffff;
border-radius: .25em;
visibility: hidden;
transition: visibility 0s 0.8s;
/* Force Hardware Acceleration in WebKit */
transform: translateZ(0);
backface-visibility: hidden;
}
.cd-form.is-visible {
/* form is visible */
visibility: visible;
transition: visibility 0s 0s;
}
یکی از آخرین جزئیات ذکر شده است: زمانی که فرم ظاهر می شود، پس زمینه سبز عنوان برنامه باعث می شود که پس زمینه لیست ویژگی ها (فقط دسکتاپ) شود. این در واقع عنصر دیگری است ( .cd-form .cd-pricing-features::before
) که ارتفاع آن متحرک است (با استفاده از تبدیل مقیاس).
.cd-form .cd-pricing-features::before {
/* this is the layer which covers the .cd-pricing-features when the form is open - visible only on desktop */
content: '';
position: absolute;
/* fix a bug while animating - 1px white space visible */
top: -5px;
left: 0;
height: calc(100% + 5px);
width: 100%;
background-color: #95ac5f;
will-change: transform;
transform: scaleY(0);
transform-origin: center top;
transition: transform 0.6s 0.2s;
}
مدیریت رویدادها
animateForm()
تابع تعریف شده است به تحریک و تشجیع شکل معین: هنگامی که یک کاربر یک برنامه را انتخاب کند، تابع موقعیت و بعد از انتخاب قیمت گذاری مورد جدول ارزیابی و اختصاص آنها به .cd-form
طوری که آن را به طور کامل پوشش می دهد مورد قیمت گذاری (که با استفاده از پنهان .empty-box
کلاس)
سپس انیمیشن شروع می شود: ما .cd-form
عرض و ارتفاع را به مقادیر نهایی خود تحریک می کنیم و آن را ترجمه می کنیم تا در منظره ی مرکزی قرار گیرد.
//form is the .cd-form element
form.velocity(
{
'width': tableWidth+'px', //pricing table item width
'height': tableHeight+'px', //pricing table item height
'top': formTopValue, //final top value of the form
'left': formLeftValue, //final top value of the form
'translateX': formTranslateX+'px', //difference between formLeftValue and pricing table item left value
'translateY': formTranslateY+'px', //difference between formTopValue and pricing table item top value
'opacity': 1,
}, 0, function(){
//table is the pricing table item
table.addClass('empty-box');
form.velocity(
{
'width': formFinalWidth+'px', //form final width
'height': formFinalHeight+'px', //form final height
'translateX': 0,
'translateY': 0,
},
//animation duration
animationDuration,
//spring easing
[ 220, 20 ]).addClass('is-visible');
});
وقتی کاربر Modal را بسته می کند، fieldsets fields پنهان می شوند (تغییر شفافیت آنها به 0) و سپس انیمیشن معکوس انجام می شود (تاخیر برای انیمیشن با استفاده از delay
متغیر تعریف شده است).
محصولات مشابه فروشی
-
بنر لایه باز فست فود و ساندویچی با فرمت psd زیبا و خاص
بنربیشک حتمای این طرح را در هیچ کجا نخواهید دید! زیباترین بنر لایه باز فست فود یک تراکت خاص و متفاوت به فست فود و ساندویچی خود هدیه دهید... بنر لایه باز فست فود کاملا لایه باز بوده و این طرح مناسب برای ساندویچی و فست فود شما میباشد که از دید خوبی برخوردار است ، این طرح فوق کاملاً لایه باز با فرمت psd و از کدهای رنگی cmyk که مخصوص چاپ هست استفاده شده.این طرح با طراحی شیک و مدرن و در اندازه {400*200} سانتی متر و رزولوشن ۳۰۰ DPII با کیفیت عالی می باشد. از این طرح میتوانید برای تراکت لایه باز فست فود و ساندویچی میتوانید با کمی تغییرات به کارت ویزیت هم تبدیل کنید. ابعاد :14.8 در 21 سانتیمتر و قابل ویرایش به اندازه های دلخواه خود میباشد فرمت فایل : psd رزولوشن: 300 مد رنگ: CMYK حجم: 40 مگابایت برای کاهش حجم فایل و سهولت در دانلود مقایس فایل بنر ۱۰ برابر کوچک تر ( بدون...28000 -
موکاپ لوگوی جذاب و زیبا
موکاپموکاپ جدید و جذاب لوگو روی دیوار که به صورت متن لایه باز نیر می توانید استفاده کنید و نیز به جهت جذاب ساختن و نمایش طراحی شما به صورت سه بعدی می باشد که ارائه طراحی های شما را آسان تر و حرفه ای تر و قابل فهم تر برای مخاطب می کند. این موکاپ به صورت کاملا لایه باز و با مد رنگ RGB و با کیفیت طراحی شده است که به راحتی و با چند کلیک می تواند طرح خود را جایگذاری نمایید. اکثر موکاپ های حرفه ای در مارکت های خارجی با هزینه های بسیار بالا فروخته می شود، اما ملت وب با هزینه بسیار ناچیز و جهت حمایت از طراحان و کانون های تبلیعاتی و همچنین فعالین این حوزه، این موکاپ را ارائه نموده است. *این فایل دارای پشتیبانی کاملا رایگان می باشد. درون فایل مورد نظر مجموعه ای از فونت های به روز شده برای طراحی قرار دارد. (فارسی/لاتین) همچنین شما می توانید با کلیک روی کلمه ایــنـــــــجــــــــا پکیج...25000 24500 -
طرح لایه باز فاکتور زیبا psd اندازه A4
فاکتورفایل لایه باز فاکتور با طراحی مرتب در سایز 21 در 29.7 معادل A4 ، فایل به صورت psd و لایه باز است و کاملا قابل ادیت است و در همه جای طرح امکان ویرایش وجود دارد . فرمت فایل : psd رزولوشن : 300 مد رنگ : RGB حجم : 21 مگابایت راهکار استفاده از فایل : کافیست فایل را از حالت فشرده خارج کرده ، روی آن راست کلیک کنید و آن را با نرم افزار فتوشاپ باز کنید و ادیت خود روی فایل انجام دهید . *استفاده از این فاکتور برای تمامی مشاغل ممکن است* فاکتور چیست و چه کاربردی دارد ؟ فاکتور برگهی تجاری است که فروشنده مطابق خریدی که انجام گرفته برای خریدار صادر میکند. در هر فاکتور مواردی همچون مشخصات فروشنده، مشخصات خریدار، تاریخ خرید، نوع کالا، قیمت برای هر واحد کالای خریداری شده، قیمت کل و….. درج میشود. ویزگی دانلود این طرح فاکتور : این فایل کاملا...22000 31000 -
بنر لایه باز پیش دبستانی با فرمت psd طرحی زیبا
بنربنر پیش دبستانی لایه باز | دانلود بنر پیش دبستانی | طرح لایه باز پیش دبستانی | بنر دبستان لایه باز بنر پیش دبستانی لایه باز طرح بنر پیش دبستانی کاملا لایه باز بوده و این طرح مناسب برای پیش دبستانی و کلاس های تقویتی میباشد که باتوجه به مدرن بودن طرح از دید خوبی برخوردار میباشد، در روند طراحی این محصول سعی کردیم تمامی استانداردهای لازم را رعایت کنیم تا بعد از چاپ شما از سایر رقبا متمایز دیده شوید. علاوه بر کیفیت بالای محصول و طرحی متفاوت تر از رقبا برای راحتی کار شما فونت هایی که در این طرح استفاده شده قرار داده ایم تا به راحتی بنر را ویرایش کنید. به جرات می توان این بنر لایه باز پیش دبستانی را بهترین طرح برای افزایش فروش انتخاب کرد. با سابقه چندین ساله در حوزه چاپ این طرح منحصر به فرد مناسب برای چاپ بوده و از پنتون رنگ برای انتخاب کد رنگی CMYK استفاده شده تا چاپ با...28000 36000 -
بنر لایه باز ساندویچی و فست فود با فرمت psd زیبا و جذاب
بنربیشک حتمای این طرح را در هیچ کجا نخواهید دید! زیباترین بنر ساندویجی و فست فود یک تراکت خاص و متفاوت به ساندویچی و فست فود خود هدیه دهید... بنر لایه باز ساندویچی و فست فود کاملا لایه باز بوده و این طرح مناسب برای ساندویچی و فست فود میباشد که از دید خوبی برخوردار است ، این طرح فوق کاملاً لایه باز با فرمت psd و از کدهای رنگی cmyk که مخصوص چاپ هست استفاده شده.این طرح با طراحی شیک و مدرن و در اندازه {400*200} سانتی متر و رزولوشن ۳۰۰ DPII با کیفیت عالی می باشد. از این طرح میتوانید برای تراکت ساندویچی و فست فود و حتی میتوانید با کمی تغییرات به کارت ویزیت هم تبدیل کنید. ابعاد :300 در 110 سانتیمتر و قابل ویرایش به اندازه های دلخواه خود میباشد فرمت فایل : psd رزولوشن: 300 مد رنگ: CMYK حجم: 32 مگابایت برای کاهش حجم فایل و سهولت در دانلود مقایس فایل بنر ۱۰ برابر کوچک تر ( بدون...28000 -
موکاپ نمایش لوگو سه بعدی زیبا
موکاپموکاپ حرفه ای نمایش لوگو سه بعدی با طرح زیبا روی دیوار به جهت جذاب ساختن و نمایش طراحی شما به صورت سه بعدی می باشد که ارائه طراحی های شما را آسان تر و حرفه ای تر و قابل فهم تر برای مخاطب می کند. این موکاپ به صورت کاملا لایه باز و با مد رنگ RGB و با کیفیت طراحی شده است که به راحتی و با چند کلیک می تواند طرح خود را جایگذاری نمایید. اکثر موکاپ های حرفه ای در مارکت های خارجی با هزینه های بسیار بالا فروخته می شود، اما ملت وب با هزینه بسیار ناچیز و جهت حمایت از طراحان و کانون های تبلیعاتی و همچنین فعالین این حوزه، این موکاپ را ارائه نموده است. *این فایل دارای پشتیبانی کاملا رایگان می باشد. درون فایل مورد نظر مجموعه ای از فونت های به روز شده برای طراحی قرار دارد. (فارسی/لاتین) همچنین شما می توانید با کلیک روی کلمه ایــنـــــــجــــــــا پکیج سربرگ اداری (1+10) را با تخفیف 50...25000 26000 -
طرح لایه باز تراکت غذاخوری با طرحی شیک و زیبا با فرمت psd
بنرطرح تراکت غذاخوری کاملا لایه باز بوده و این طرح مناسب برای رستوران و غذاخوری میباشد که از دید خوبی برخوردار است ، این طرح فوق کاملاً لایه باز با فرمت psd و از کدهای رنگی cmyk که مخصوص چاپ هست استفاده شده.این طرح با طراحی شیک و مدرن و در اندازه {120*300} سانتی متر و رزولوشن ۳۰۰ DPII با کیفیت عالی می باشد. از این طرح میتوانید برای بنر و حتی میتوانید با کمی تغییرات به کارت ویزیت هم تبدیل کنید. ابعاد :14.8 در 21 سانتیمتر و قابل ویرایش به اندازه های دلخواه خود میباشد فرمت فایل : psd رزولوشن: 300 مد رنگ: CMYK حجم: 49 مگابایت آموزش استفاده از طرح لایه باز تراکت غذاخوری psd: طرح لایه باز موجود در سایت با فرمت PSD بوده و برای استفاده از این طرح لایه باز ، بعد از خارج کردن از حالت زیپ، روی طرح لایه باز راست کلیک کرده و با نرم افزار فتوشاپ باز نمایید. تراکت چیست و چه کاربردی...28000 -
بنر لایه باز دبستان و پیش دبستانی طرحی کاربردی و زیبا
بنربیشک حتمای این طرح را در هیچ کجا نخواهید دید! زیباترین بنر دبستان و پیش دبستانی یک تراکت خاص و متفاوت را به مدارس و پیش دبستانی خود هدیه دهید... بنر لایه باز دبستان و پیش دبستانی کاملا لایه باز بوده و این طرح مناسب برای مدارس و پیش دبستانی میباشد که از دید خوبی برخوردار است ، این طرح فوق کاملاً لایه باز با فرمت psd و از کدهای رنگی cmyk که مخصوص چاپ هست استفاده شده.این طرح با طراحی شیک و مدرن و در اندازه {400*200} سانتی متر و رزولوشن ۳۰۰ DPII با کیفیت عالی می باشد. از این طرح میتوانید برای تراکت مدارس و پیش دبستانی و حتی میتوانید با کمی تغییرات به کارت ویزیت هم تبدیل کنید. ابعاد :300 در 400 سانتیمتر و قابل ویرایش به اندازه های دلخواه خود میباشد فرمت فایل : psd رزولوشن: 300 مد رنگ: CMYK حجم: 5 مگابایت برای کاهش حجم فایل و سهولت در دانلود مقایس فایل بنر ۱۰ برابر...28000 -
کارت ویزیت مشاور املاک ساده و زیبا
کارت ویزیتکارت ویزیت املاک آرمان کاملا لایه باز بوده و این طرح مناسب برای مشاورین املاک میباشد که از دید خوبی برخوردار است ، این طرح فوق کاملاً لایه باز با فرمت psd و از کدهای رنگی cmyk که مخصوص چاپ هست استفاده شده.این طرح با طراحی شیک و مدرن و در اندازه {400*200} سانتی متر و رزولوشن ۳۰۰ DPII با کیفیت عالی می باشد.
ابعاد :300 در 100 سانتیمتر و قابل ویرایش به اندازه های دلخواه خود میباشد
فرمت فایل : psd
رزولوشن: 300
مد رنگ: CMYK
حجم: 4.87مگابایت
25000 29000 -
تراکت لایه باز آموزشگاه علمی با فرمت psd طرحی زیبا
بنرتراکت آموزشگاه علمی لایه باز | دانلود تراکت آموزشگاه علمی | طرح لایه باز آموزشگاه علمی | تراکت آموزشگاه علمی تراکت آموزشگاه علمی لایه باز طرح تراکت آموزشگاه علمی کاملا لایه باز بوده و این طرح مناسب برای آموزشگاه علمی و کلاس های تقویتی میباشد که باتوجه به مدرن بودن طرح از دید خوبی برخوردار میباشد، در روند طراحی این محصول سعی کردیم تمامی استانداردهای لازم را رعایت کنیم تا بعد از چاپ شما از سایر رقبا متمایز دیده شوید. علاوه بر کیفیت بالای محصول و طرحی متفاوت تر از رقبا برای راحتی کار شما فونت هایی که در این طرح استفاده شده قرار داده ایم تا به راحتی تراکت را ویرایش کنید. به جرات می توان این تراکت لایه باز آموزشگاه علمی را بهترین طرح برای افزایش فروش انتخاب کرد. با سابقه چندین ساله در حوزه چاپ این طرح منحصر به فرد مناسب برای چاپ بوده و از پنتون رنگ برای انتخاب...25000 28000 -
تراکت لایه باز سوپر مارکت با فرمت psd زیبا و جذاب
بنربیشک حتمای این طرح را در هیچ کجا نخواهید دید! زیباترین تراکت برای سوپر مارکت یک تراکت خاص و متفاوت به سوپر مارکت خود هدیه دهید... تراکت لایه باز سوپر مارکتکاملا لایه باز بوده و این طرح مناسب برای فروشگاه و سوپرمارکت میباشد که از دید خوبی برخوردار است ، این طرح فوق کاملاً لایه باز با فرمت psd و از کدهای رنگی cmyk که مخصوص چاپ هست استفاده شده.این طرح با طراحی شیک و مدرن و در اندازه {400*200} سانتی متر و رزولوشن ۳۰۰ DPII با کیفیت عالی می باشد. از این طرح میتوانید برای تراکت سوپر مارکت و حتی میتوانید با کمی تغییرات به کارت ویزیت هم تبدیل کنید. ابعاد :14.8 در 21 سانتیمتر و قابل ویرایش به اندازه های دلخواه خود میباشد فرمت فایل : psd رزولوشن: 300 مد رنگ: CMYK حجم: 66 مگابایت برای کاهش حجم فایل و سهولت در دانلود مقایس فایل بنر ۱۰ برابر کوچک تر ( بدون افت کیفیت ) شده است ، جهت...28000 -
تراکت لایه باز آموزشگاه علمی با فرمت psd طرحی زیبا
بنرتراکت آموزشگاه علمی لایه باز | دانلود تراکت آموزشگاه علمی | طرح لایه باز آموزشگاه علمی | تراکت آموزشگاه علمی تراکت آموزشگاه علمی لایه باز طرح تراکت آموزشگاه علمی کاملا لایه باز بوده و این طرح مناسب برای آموزشگاه علمی و کلاس های تقویتی میباشد که باتوجه به مدرن بودن طرح از دید خوبی برخوردار میباشد، در روند طراحی این محصول سعی کردیم تمامی استانداردهای لازم را رعایت کنیم تا بعد از چاپ شما از سایر رقبا متمایز دیده شوید. علاوه بر کیفیت بالای محصول و طرحی متفاوت تر از رقبا برای راحتی کار شما فونت هایی که در این طرح استفاده شده قرار داده ایم تا به راحتی تراکت را ویرایش کنید. به جرات می توان این تراکت لایه باز آموزشگاه علمی را بهترین طرح برای افزایش فروش انتخاب کرد. با سابقه چندین ساله در حوزه چاپ این طرح منحصر به فرد مناسب برای چاپ بوده و از پنتون رنگ برای انتخاب...25000 28000 -
تراکت لایه باز آموزشگاه علمی با فرمت psd طرحی زیبا
بنرتراکت آموزشگاه علمی لایه باز | دانلود تراکت آموزشگاه علمی | طرح لایه باز آموزشگاه علمی | تراکت آموزشگاه علمی تراکت آموزشگاه علمی لایه باز طرح تراکت آموزشگاه علمی کاملا لایه باز بوده و این طرح مناسب برای آموزشگاه علمی و کلاس های تقویتی میباشد که باتوجه به مدرن بودن طرح از دید خوبی برخوردار میباشد، در روند طراحی این محصول سعی کردیم تمامی استانداردهای لازم را رعایت کنیم تا بعد از چاپ شما از سایر رقبا متمایز دیده شوید. علاوه بر کیفیت بالای محصول و طرحی متفاوت تر از رقبا برای راحتی کار شما فونت هایی که در این طرح استفاده شده قرار داده ایم تا به راحتی تراکت را ویرایش کنید. به جرات می توان این تراکت لایه باز آموزشگاه علمی را بهترین طرح برای افزایش فروش انتخاب کرد. با سابقه چندین ساله در حوزه چاپ این طرح منحصر به فرد مناسب برای چاپ بوده و از پنتون رنگ برای انتخاب...25000 28000 -
پکیج اعلامیه ترحیم با فرمت PSD برای آگهی فوت با 16 طرح متفاوت و زیبا
آگهی ترحیمپکیج اعلامیه ترحیم با فرمت PSD برای آگهی فوت با 16 طرح متفاوت و زیبا این پکیج کاملا خاص و منحصر بفرد است و در هیچ سایت دیگری وجود ندارد + هدایا و اشانتیون بینظیر که بصورت رایگان در این پک قرار داده شده | (40 طرح تایپوگرافی و 2700 فونت فارسی بی نظیر) پکیج اعلامیه ترحیم با فرمت PSD برای آگهی فوت آماده کردیم که تمامی طرح های داخل این پکیج با استفاده از نرم افزار فتوشاپ کاملا لایه باز طراحی شده است این یعنی شما می توانید تک تک بخش های آگهی ترحیم را با استفاده از نرم افزار فتوشاپ ویرایش کنید حتی میتوانید افزودنی هایی که داخل این پکیج قرار داده ایم در طرح های خود استفاده کنید و اعلامیه ترحیم های شیک و جذابی را طراحی و چاپ کنید. در این پکیج اعلامیه ترحیم با هدایاهای منحصربه فردی بهره...78000 146000 -
دانلود کارت ویزیت کلینیک دندانپزشکی سه بعدی زیبا با لایه باز
کارت ویزیتدانلود طرح لایه باز کارت ویزیت دندانپزشکی سه بعدی و زیبا عزیزان نازنین میتونن با دانلود و ویرایش این طرح اگر تمایل داشتن از عکس و متن مورد نظر خودشون استفاده کنن و طرح اختصاصی خودشون رو داشته باشن کارت ویزیت لایه باز کلینیک دندانپزشکی چیست؟ طرح لایه باز به طرحی گفته میشه که شما عزیزان میتونید با دانلود اون .. طرح رو در فتوشاپ یا برنامه های اینچنینی ویرایش کنید و عکس و متن مورد علاقه خودتون رو در طرح استفاده کنید و طرح خودتون رو داشته باشید نمونه کارت ویزیت کلینیک دندانپزشکی رو مشاهده میفرمایید مشخصات کارت ویزیت دندانپزشکی با لایه باز این طرح دارای رزولوشن 300 و مد رنگی cmyk و قابل تغییر سایز میباشد امیدوارم ازین طرح زیبا و شیک لذت برده...25000 -
دانلود طرح لایه باز کارت ویزیت مشاور املاک سه بعدی بسیار زیبا
کارت ویزیتدانلود طرح لایه باز کارت ویزیت مشاور املاک خوشرنگ و بسیار شیک دوستان خوب میتونن با دانلود و ویرایش این طرح اگر تمایل داشتن از عکس و متن مورد نظر خودشون استفاده کنن و طرح اختصاصی خودشون رو داشته باشن کارت ویزیت لایه باز مشاور املاک چیست؟ طرح لایه باز به طرحی گفته میشه که شما عزیزان میتونید با دانلود اون .. طرح رو در فتوشاپ یا برنامه های اینچنینی ویرایش کنید و عکس و متن مورد علاقه خودتون رو در طرح استفاده کنید و طرح خودتون رو داشته باشید نمونه ای از طرح کارت ویزیت مشاور املاک رو مشاهده میفرمایید مشخصات کارت ویزیت مشاور املاک لایه باز این طرح دارای رزولوشن 300 و مد رنگی cmyk و قابل تغییر سایز میباشد امیدوارم ازین طرح زیبا و شیک لذت برده...25000 -
بنر لایه باز سوپر پروتئینی کاملا لایه باز طرحی زیبا و با دید عالی
بنربنر لایه باز سوپر پروتئینی کاملا لایه باز بوده و این طرح مناسب برای مرغ فروشی ها و سوپر پروتئینی ها میباشد که از دید خوبی برخوردار است ، این طرح فوق کاملاً لایه باز با فرمت psd و از کدهای رنگی cmyk که مخصوص چاپ هست استفاده شده.این طرح با طراحی شیک و مدرن و در اندازه {400*200} سانتی متر و رزولوشن ۳۰۰ DPII با کیفیت عالی می باشد. از این طرح میتوانید برای تراکت ساندویچی و فست فود و حتی میتوانید با کمی تغییرات به کارت ویزیت هم تبدیل کنید. ابعاد :300 در 100 سانتیمتر و قابل ویرایش به اندازه های دلخواه خود میباشد فرمت فایل : psd رزولوشن: 300 مد رنگ: CMYK حجم: 13 مگابایت برای کاهش حجم فایل و سهولت در دانلود مقایس فایل بنر ۱۰ برابر کوچک تر ( بدون افت کیفیت ) شده است ، جهت آماده سازی فایل برای چاپ، سایز فایل psd را 3۰۰*1۰۰ و روزلیشن ۷۲ dpi تنظیم کنید. آموزش استفاده از طرح لایه باز...28000
آخرین های مشابه مشاهده بیشتر
-
باکس ثبت نام حرفه ای با انیمیشن زیبا css,jquery
آموزش cssدر بیشتر موارد، کاربران خود را به یک صفحه ثبت نام هدایت می کنید. با این حال، اگر فرآیند پرداخت شما کاملا ساده باشد، یک روش جایگزین برای جابجایی جدول قیمت گذاری است، و در همان صفحه، فرم پرداخت را نشان می دهد. این همان چیزی است که ما با قطعه امروز تلاش کردیم. صحبت کردن به اندازه کافی، بیایید به کد بچرخانیم؛) منابع: Velocity.js توسط جولیان شاپیرو. آیکون از Nucleo . ایجاد...رایگان -
دانلود منو ساید بار زیبا با css , jquery همراه با دمو
آموزش cssنوشتن رسپانسیو منو برای سایت های مگا، کار ساده ای نیست. اگر شما در حال کار بر روی یک پنل مدیریت هستید، احتمالا شما باید یک منوی عمودی را طراحی و توسعه دهید، با مقدار زیادی زیر مجموعه ها. به همین دلیل تصمیم گرفتیم قطعه امروز را به اشتراک بگذاریم! ناوبری نوار ابزار ما می تواند زندگی شما را ساده تر با ارائه یک قالب شروع ساده برای پروژه بعدی خود؛) آیکون: کتابخانه هسته...رایگان -
دانلود سورس js , css جستجو پیشرفته با انیمیشن زیبا
آموزش cssبدست آوردن تجربه جستجو به راستی کار ساده ای نیست. نقطه شروع همیشه فرم جستجو است که در اکثر موارد تنها شامل یک فیلد ورودی و یک دکمه ارسال است. صفحه نتایج جستجو برای طراحی بسیار مشکل است، مخصوصا اگر شما دارای دسته های مختلف محتوا باشید. برای وب سایت های بزرگ و فروشگاه های آنلاین، چه مهم است، اما سعی کنید پیش بینی حرکت کاربر. ما باید توجه داشته باشیم که اغلب کاربران ما در مورد کجا...رایگان -
دانلود انیمیشن لندینگ زیبا برای وب سایت ها
پیش بارگیرها اغلب برای بارگیری وب سایت ها / برنامه های کاربردی آهسته استفاده می شوند تا کاربر را مطلع کنند که وب سایت هنوز بارگذاری شده یا سقوط نکرده است. پیش بارگیرها برای وب سایت ها و برنامه های کاربردی با منابع بسیار مفید هستند. در بسیاری از موارد، بارگذاری انیمیشن ها به عنوان اولین عنصرUX استفاده می شود. آن را به کاربر تایید می کند که برنامه یا وب سایت سقوط نمی...رایگان -
سورس مودال باکس modal box
آموزش cssسلام خدمت دوستان امروز با آموزش ساخت مودال باکس خدمت شما هستیم که بسیار مناسب برای ایده گیری و تسریع در طراحی وب سایت خواهد بود modal box فوق از 7 دموی متفاوت می باشد که میتوان به ساید بار کردن منو ها با مودال و دگمه های اشتراک گذاری متون با کاراکتر بیشتر با استفاده فول اسکرین و کلی امکانات دیگر... در زیر نمایی از تصاویر دمو رو خدمتتون ارسال میکنیم : مودال ورود و عضویت: مودال...رایگان -
طرح باکس های اینفوگرافیکی به صورت وکتور
وکتوردانلود وکتور توسط طراحان ملت که منبع طراح های رایگان گرافیکی می باشد را تقدیم کاربران عزیز خود میکند، همچنین می توانید از خدمات قالب وردپرس ملت وب نیز بهرمند گردید. چگونه میتوانم این طرح را ویرایش کنم ؟ این طرح قابل تبدیل به فایل پی اس دی لایه باز می باشد که میتوانید از طریق آموزش تبدیل eps به psd این کار را به راحتی انجام...رایگان -
15 کد تب بندی شده با css و jquery
با 15 نمونه سورس تب بندی شده در خدمت دوستان هستیم که امیدواریم خوشتان آمده باشد فایل های این مجموعه کاملا کم حجم بوده و از انیمشن های جالب و زیبا جهت باز کردن تب بندی ها استفاده گردیده که طرح را بسیار زیبا کرده است جهت نمایش آیکون ها از svg استفاده گردیده که سرعت کار را بالا ببرد از تگ های سکشن جهت باز شروع و اتمام تب ها استفاده شده است آموزش تنظیمات تب بندی ها : ما از آیکون...رایگان -
25+ کتابخانه انیمیشن CSS رایگان
آموزش cssامروز ما در حال رفتن به در بالای نگاه CSS انیمیشن کتابخانه برای کمک به شما انیمیشن های بسیار زیبا ایجاد کنید. انیمیشن ها زندگی را به وب، جنبش معنی دار شدت مطمئن UX را به سطح بعدی. شما احتمالا شنیده اصطلاح "انتقال" قبل، درست است؟ انتقال CSS چیزی را به محل در تغییر وضعیت هنگامی که شما معلق در هوا و یا چیزی است. در حال حاضر ما می توانید انیمیشن های CSS به تحریک و تشجیع هر...رایگان -
مجموعه 30 انیمیشن css و svg کاربردی و جذاب
آموزش cssتمامی انیمیشن های معرفی شده با css و svg و در برخی موارد همراه javascript نیز معرفی شده اند انیمیشن ها قابل دانلود هستند برای دانلود میتوانید از روی کد های آنلاین codepen دانلود را انجام بدید Border توسط شان مک کافری هنگامی که روی دستورالعمل "HOVER" می روید ، فقط با CSS ساخته می شود و یک حاشیه به راحتی متن ایجاد می شود. Elastic SVG Sidebar by Nikolay Talanov نوار کناری وقتی می خواهید آن را از کنار خود...رایگان -
دانلود فرم جستجوی CSS3/jQuery بهمراه PSD
آموزش cssفرم جستجو بخش بسیار مهمی از یک وب سایت بوده و به کاربران اجازه می دهد ب محتوای مورد نظر را با سرعت زیاد پیدا کنند. یک فرم جستجو پیشرفته با طراحی خوب باعث می شود یک وب سایت حرفه ای و مدرن باشد. امروز برای شما کاربرای عزیز یک فرم جستجو آماده کرده ایم که میتوانید به رایگان دانلود و استفاده...رایگان -
سورس jquery افزودن به سبد خرید سریع
آموزش cssاستفاده از صفحه نمایش بزرگتر نباید محدود به استفاده از تصاویر / عناصر بزرگتر باشد. ما می توانیم این پیکسل های اضافی را با افزایش تجربه کاربر با ویژگی های اضافی کار کنیم. UX استاندارد برای یک گالری محصول: کلیک کاربر بر روی یک محصول که او دوست دارد، و سپس به صفحه محصول تک حرکت می کند. از این جا، او قصد دارد برخی از گزینه ها را انتخاب کند و در نهایت محصول را به سبد خرید اضافه کند. هیچ...رایگان -
دانلود سورس استایل 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 استفاده می شود. افزودن سبک در...رایگان -
دانلود رایگان اسلایدر رسپانسیو ساخته شده با jquery
آموزش cssاسلایدر جی کوئری اساسی پلاگین جی کوئری سبک و سریع برای ایجاد لغزنده تصویر پاسخگو با حداقل ویژگی ها و تم های تمیز است. امکانات: طرح رسپانسیو سبک و آسان برای استفاده به طور خودکار نوشتن شرح تصاویر با استفاده از ویژگی های عنوان فشرده سازی و لغزش انیمیشن پیمایش پیمایش و عددی خودکار بازی و شروع تصادفی پشتیبانی می شود مرورگر صلیب چگونه از آن استفاده کنید: 1. شامل آخرین...رایگان -
ساخت فایل های انیمیشن GIF و تبدیل و بهینه سازی آنها
در این نوشته قصد داریم در مورد فایل هایی با پسوند GIF صحبت کنیم . فرمت GIF فرمتیست که هم بافت های گرافیکی ثابت رو پشتیبانی میکنه هم بافت های گرافیکی متحرک که در حقیقت کوتاه شده اسم Graphics Interchange Format هست . بر خلاف اون چیزی که بین متخصصان کامپیوتری و طراحان رواج پیدا کرده تلفظ صحیح این فرمت جیف هست . دیکشنری آکسفورد هر دو تلفظ گیف و جیف رو برای این فرمت صحیح میدونه در حالی که...رایگان -
دانلود پخش ویدیو رایگان جی کوئری و اچ تی ام ال jQuery Videre رسپانسیو
آموزش javascriptVidere یک پلاگین جی کوئری است که به شما اجازه می دهد یک پخش کننده ویدئویی HTML5، رسپانسیو، همراه با پشتیبانی از دکمه های پخش و قطع و .. با کیفیت می باشد. چگونه از آن استفاده کنید: 1. استایل ضروری و مورد نیاز videre.css را برای پخش کننده ویدیوی HTML5 در داخل تگ هد سایتتان جایگزاری فرمایید. <link rel="stylesheet" href="videre.css"> 2. تکه کد اچ تی ام زیر را در جایی که قرار است ویدئو پخش...رایگان -
آموزش کامل و سورس سبد خرید css , jquery با پیشنمایش و دانلود
آموزش cssما در مورد فرآیند "اضافه به سبد خرید" به الگوهای مختلفی استفاده می کنیم. ایده اصلی این الگو، اطلاع دادن به کاربر است که یک مورد به سبد اضافه شده است و او را با یک پیوند برای ادامه به پرداخت، ارائه می دهد. ما با این ایده مخفی کردن سبد خرید به طور پیش فرض آزمایش کرده ایم و آن را زمانی که کاربر بر روی دکمه «افزودن به سبد خرید» کلیک می کند نشان می دهد. به این ترتیب کاربر می...رایگان -
دانلود سورس انیمیشن js , css جهت صفحه بندی خدمات شما بدون رفرش
آموزش cssما اخیرا با یک انیمیشن طراحی شده با CSS تجربه کردیم که جایگزین تازه کردن صفحه وب می شود در حالی که محتوای با استفاده از ajax به روز شده است. انفجار امروز بر اساس یک ایده است، اما با یک اجرای متفاوت: در این زمان یک اثر شناور ساده تبدیل به یک نوار بارگذاری، که در نهایت با محتوای جدید گسترش می یابد! آیکون های کتابخانه هسته ای ما . ایجاد ساختار ساختار HTML از یک...رایگان -
دانلود پروژه css , java جهت نمایش نمونه کار ها با انیمیشن بسیار جذاب
آموزش cssما با ایده حرکت بلوک های محتوا به عنوان راهی برای انتقال از صفحه اصلی / گالری به صفحه پروژه، بازی کرده ایم. تمام پانل ها در امتداد محور Y حرکت می کنند (محور x در دستگاه های کوچکتر)، و حرکت به وسیله ی این که کاربر میخواهد بیشتر درباره یک پروژه یاد بگیرد یا میخواهد به ناوبری دسترسی پیدا کند، حرکت می کند. تصاویر: unsplash.com ایجاد ساختار ساختار HTML از دو لیست های نامرتب تشکیل...رایگان -
دانلود رایگان کد گالری تصویر بسیار جذاب با 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"...رایگان -
آموزش رایگان طراحی باکس نوشته ها (وبلاگ) با المنتور (طراحی قالب با المنتور وردپرس - قسمت یازدهم)
افزونه های مورد نیاز: المنتور المنتور پرو پست ها و روش نمایش آنها، در سایت های وبلاگی همیشه یکی از مهمترین بخش های آنهاست. زیرا تمام محتوای آنها از طریق ظاهر صفحه اول آنها نمایش داده می شوند. پس باید طراحی آنها جذاب و زیبا باشند. برای طراحی باکس نوشته ها، دو نکته قابل توجه است. یکی از آنها طراحی قالب ظاهری یکسان باکس نوشته ها (یعنی در تمام صفحات وبلاگ و دسته بندی ها به چه صورت نمایش...رایگان -
بنر حرفه ای ایستاده رایگان
وکتوردانلود وکتور توسط طراحان ملت که منبع طراح های رایگان گرافیکی می باشد را تقدیم کاربران عزیز خود میکند، همچنین می توانید از خدمات قالب وردپرس ملت وب نیز بهرمند گردید. چگونه میتوانم این طرح را ویرایش کنم ؟ این طرح قابل تبدیل به فایل پی اس دی لایه باز می باشد که میتوانید از طریق آموزش تبدیل eps به psd این کار را به راحتی انجام...رایگان
هشتگ ها :
این محصول بدون نظر می باشد شما میتوانید اولین نظر را ثبت کنید