ساختار
از دو عنصر اصلی تشکیل شده است nav.main-nav
برای موارد ناوبری بالا و div.morph-dropdown-wrapper
بسته بندی عناصر کرکره.
برای هر آیتم لیست در nav.main-nav
عنصر، a li.dropdown
در داخل ایجاد می شود .morph-dropdown-wrapper
.
اضافی div.bg-layer
در داخل ساخته شده است div.morph-dropdown-wrapper
و برای ایجاد پس زمینه morphing dropdown استفاده می شود.
افزودن سبک
در دستگاه های کوچک، به div.morph-dropdown-wrapper
طور پیش فرض پنهان است. هنگامی که یک کاربر روی آیکون منو کلیک کند، .nav-open
کلاس .cd-morph-dropdown
به نمایش داده می شود که ناوبری است.
.cd-morph-dropdown {
position: relative;
}
.cd-morph-dropdown .morph-dropdown-wrapper {
display: none;
position: absolute;
top: 60px;
left: 0;
width: 100%;
}
.cd-morph-dropdown.nav-open .morph-dropdown-wrapper {
display: block;
}
در دستگاه های بزرگتر (دید عرض بیشتر از 1000px)، در .dropdown-list
و li.dropdown
عناصر پیش فرض پنهان هستند.
@media only screen and (min-width: 1000px) {
.cd-morph-dropdown .dropdown-list {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}
.cd-morph-dropdown .dropdown {
position: absolute;
left: 0;
top: 0;
opacity: 0;
visibility: hidden;
width: 100%;
transition: opacity .3s, visibility .3s;
}
}
هنگامی که کاربر بر روی یکی از عناصر درون آن قرار می گیرد nav.main-nav
، .is-dropdown-visible
کلاس به آن اضافه می شود .cd-morph-dropdown
و .dropdown-list
دید به تغییر قابل مشاهده است. در این مرحله، بسته بندی کشویی قابل مشاهده است، اما محتوای آن هنوز هم پنهان است. برای نشان دادن محتوا که توسط کاربر انتخاب شده است، .active
کلاس به li.dropdown
عنصر انتخاب شده اضافه می شود (یکی با شناسه ای برابر با محتوای داده ای از آیتم ناوبری که کاربر روی آن حرکت می کند).
@media only screen and (min-width: 1000px) {
.cd-morph-dropdown .dropdown.active {
opacity: 1;
visibility: visible;
}
}
از آنجا که li.dropdown
عناصر یک موقعیت مطلق دارند، در واقع در داخل پدر و مادر خود ( div.dropdown-list
) فضایی نمی گیرند ، به این معنی که div.dropdown-list
عرض و ارتفاع با توجه به محتوای قابل مشاهده تغییر نمی کنند. از آنجایی که ویژگی سرریز آن به پنهان (به طوری که هیچ محتوایی در خارج از بسته بندی کشویی قابل مشاهده است) تنظیم شده است، ما از جاوا اسکریپت برای تغییر ارتفاع و عرض خود استفاده می کنیم تا اطمینان حاصل کنیم که محدوده بازشو انتخاب شده همیشه قابل مشاهده است.
برای ایجاد پس زمینه کشویی، از ما استفاده می کنیم div.bg-layer
. این موقعیت مطلق، عرض و ارتفاع برابر با 1 پیکسل و کدورت صفر است. هنگامی که .is-dropdown-visible
کلاس به آن اضافه می شود .cd-morph-dropdown
، کدورت آن به یک تغییر می کند و با استفاده از JavaScrip (به وسیله جاوا اسکریپت) به اندازه محتوا قابل مشاهده می شود.
@media only screen and (min-width: 1000px) {
.cd-morph-dropdown .bg-layer {
/* morph dropdown background */
position: absolute;
top: 0;
left: 0;
height: 1px;
width: 1px;
background: #FFFFFF;
opacity: 0;
transition: opacity .3s;
transform-origin: top left;
}
.cd-morph-dropdown.is-dropdown-visible .bg-layer {
opacity: 1;
transition: transform .3s, opacity .3s;
}
}
هنگامی که کاربر از یک آیتم ناوبری به یک آیتم دیگر حرکت می کند، مقادیر scaleX و scaleY div.bg-layer
تغییر می کند (با استفاده از جاوا اسکریپت) برای ایجاد اثر مورف.
مدیریت رویدادها
برای پیاده سازی این ناوبری، ما یک morphDropdown
شی ایجاد کردیم و از bindEvents
روش برای پیوستن رویداد پردازنده به عناصر مناسب استفاده کردیم.
function morphDropdown( element ) {
this.element = element;
this.mainNavigation = this.element.find('.main-nav');
this.mainNavigationItems = this.mainNavigation.find('.has-dropdown');
this.dropdownList = this.element.find('.dropdown-list');
//...
this.bindEvents();
}
این bindEvents
روش برای تشخیص رویدادهای mouseenter / mouseleave در عناصر .has-dropdown
و .dropdown
عناصر استفاده می شود.
morphDropdown.prototype.bindEvents = function() {
var self = this;
this.mainNavigationItems.mouseenter(function(event){
//hover over one of the nav items -> show dropdown
self.showDropdown($(this));
}).mouseleave(function(){
//if not hovering over a nav item or a dropdown -> hide dropdown
if( self.mainNavigation.find('.has-dropdown:hover').length == 0 && self.element.find('.dropdown-list:hover').length == 0 ) self.hideDropdown();
});
//...
};
showDropdown
روش طول می کشد مراقبت از تغییر ارتفاع، عرض و translateX ارزش های .dropdown-list
و به مقیاس بالا / پایین .bg-layer
عنصر.
morphDropdown.prototype.showDropdown = function(item) {
var selectedDropdown = this.dropdownList.find('#'+item.data('content')),
selectedDropdownHeight = selectedDropdown.innerHeight(),
selectedDropdownWidth = selectedDropdown.children('.content').innerWidth(),
selectedDropdownLeft = item.offset().left + item.innerWidth()/2 - selectedDropdownWidth/2;
//update dropdown and dropdown background position and size
this.updateDropdown(selectedDropdown, parseInt(selectedDropdownHeight), selectedDropdownWidth, parseInt(selectedDropdownLeft));
//add the .active class to the selected .dropdown and .is-dropdown-visible to the .cd-morph-dropdown
//...
};
morphDropdown.prototype.updateDropdown = function(dropdownItem, height, width, left) {
this.dropdownList.css({
'-moz-transform': 'translateX(' + left + 'px)',
'-webkit-transform': 'translateX(' + left + 'px)',
'-ms-transform': 'translateX(' + left + 'px)',
'-o-transform': 'translateX(' + left + 'px)',
'transform': 'translateX(' + left + 'px)',
'width': width+'px',
'height': height+'px'
});
this.dropdownBg.css({
'-moz-transform': 'scaleX(' + width + ') scaleY(' + height + ')',
'-webkit-transform': 'scaleX(' + width + ') scaleY(' + height + ')',
'-ms-transform': 'scaleX(' + width + ') scaleY(' + height + ')',
'-o-transform': 'scaleX(' + width + ') scaleY(' + height + ')',
'transform': 'scaleX(' + width + ') scaleY(' + height + ')'
});
};
محصولات مشابه فروشی
-
دانلود افزونه وردپرس پنل کشویی Ninja Kick
افزونه متفرقه وردپرسافزونه Ninja Kick: افزونه پنل کشویی یک افزونه وردپرس است که نوار کناری مخفی را با انیمیشن به وب سایت وردپرسی شما اضافه میکند. شما می توانید از این افزونه در بسیاری از موارد استفاده کنید: به عنوان مثال اضافه کردن منو، فید های اجتماعی، خبرنامه، تبلیغات ، ثبت نام و یا فرم تماس، سبد خرید و غیره. امکانات و ویژگی های افزونه Ninja Kick ویرایشگر متن برای محتوای پانل. کتابخانه آیکون + آپلود. 100٪ پاسخگو چند زبانه در هر سایت. قوانین نمایش برای هر برگه. از زبانه های خاص به عنوان لینک های ساده استفاده کنید. سبک های مختلف برای دکمه های شناور. تنظیمات پنل برای پس زمینه، paddings، اثرات و غیره صفحه تنظیمات کاربر پسند گزینه ای برای پنهان سازی برچسب شناور و پانل تابع باز کردن پانل می تواند از ماشه جدید HTML برای قرار دادن در نوار کناری خواند. شما باید این داده های HTML را در کد صفحه خود با روش جی...65000 119000 -
دانلود مجموعه کاور و تم اینستاگرام در 5 استایل متفاوت با لایه باز
پست و استوری اینستاگرامدانلود مجموعه کاور و تم پست اینستاگرام لایه باز با 5 دیزاین شیک و متفاوت نکته : تمامی کاورهای اینستاگرام بنده با تخفیف بسیار بالا نسبت به سایتهای دیگه ارایه میشه طرح لایه باز کاور پست اینستاگرام بسیار شیک و کاربردی برای انواع پست با موضوعات مختلف شما میتونید هم برای پستهای خبری هم برای پستهای هنرمندان و هم فروش و معرفی اجناس ازین کاورها استفاده کنید و پیجی شیک داشته باشید و به اکسپلور اینستاگرام برید مشخصات طرح لایه باز پست اینستاگرام این پست در فرمت psd و لایه باز و دارای مود رنگی rgb میباشد نمونه کاور پست...25000 26000 -
دانلود مجموعه کاور اینستاگرام با 4 استایل متفاوت با لایه باز و تخفیف ویژه
پست و استوری اینستاگرامدانلود مجموعه کاور و تم پست اینستاگرام لایه باز با 4 دیزاین شیک و متفاوت نکته : تمامی کاورهای اینستاگرام بنده با تخفیف بسیار بالا نسبت به سایتهای دیگه ارایه میشه طرح لایه باز کاور پست اینستاگرام بسیار شیک و کاربردی برای انواع پست با موضوعات مختلف شما میتونید هم برای پستهای خبری هم برای پستهای هنرمندان و هم فروش و معرفی اجناس ازین کاورها استفاده کنید و پیجی شیک داشته باشید و به اکسپلور اینستاگرام برید مشخصات طرح لایه باز پست اینستاگرام این پست در فرمت psd و لایه باز و دارای مود رنگی rgb میباشد نمونه کاور پست...22000 26000 -
دانلود قالب معرفی و دانلود اپلیکیشن Axuta برای HTML
شرکتیقالب Axuta قالب معرفی نرم افزار تمیز و مدرن و صفحه فرود نرم افزار است. این قالب تمیز و زیبا مناسب و ایده آل برای صفحه فرود برنامه است. قالب Axuta به خوبی سازمان یافته است و بسیار آسان برای سفارشی کردن میباشد.
امکانات و ویژگی های قالب axuta برای HTML
- طراحی تعاملی
- بر اساس بوت استرپ 4
- W3C معتبر
- انیمیشن jQuery و CSS3
- Mailchimp آماده
- طراحی تمیز و فوق العاده مدرن
- پلاگین سبد پاسخگو
- سازگاری مرورگر مختلف
- 900+ قلم آیکن
- فونت های گوگل و فونت های سفارشی
- فونت ایران سنس
- فارسی و راستچین
89000 135000 -
کاملترین مجموعه قالب پست اینستاگرام برای تولید محتوا با فرمت psd مناسب برای تمامی پیج ها
پست و استوری اینستاگرامخفن ترین مجموعه قالب پست اینستاگرام برای تولید محتوا در ایران با 8 طرح لایه باز با اختلاف خیلی زیاد این مجموعه خوراک تمامی پیج های اینستاگرامی میباشد :) کاملترین مجموعه قالب پست اینستاگرام مناسب برای تمامی پیج ها این مجموعه قالب پست اینستاگرام طراحی شده در نرم افزار فتوشاپ کاملاً قابل ویرایش و همچنین با قرار داده شدن فایل های png طرح این امکان را به شما میدهد در موبایل با برنامه هایی مثل: اینشات + پیکس آرت+ پیکسل لب و سایر برنامه های موبایلی ادیت تصویر میباشد این پست اینستاگرام تولید محتوا مناسب برای تمامی پیج ها میباشد و شما به آسانی ویرایش و طراحی کنید. باتوجه به طراحی خلاقانه و تنوع زیادی طراحی و استفاده شده از شیپ و وکتورهای بسیار کاربری باعث شده این مجموعه را کاملترین مجموعه پست اینستاگارم خطاب کنیم شما حتی اگر پیج اینستاگرامتون از قالب...41000 60000 -
دانلود افزونه PowerPack | بیش از 70 افزودنی برای المنتور
افزونه صفحه سازافزونه PowerPack یکی از بهترین افزونه افزودنی صفحه ساز المنتور میباشد که با آن میتوانید وب سایت المنتور خود را با 70+ المنت منحصر به فرد ، خلاقانه قدرتمند کنید.
بیش از 70 المنت
مانند یک حرفه ای وب سایت های زیبایی ایجاد کنید
از طیف گسترده ای از عناصر افزودنی و ابزارک ها انتخاب کنید که نیازهای طراحی شما را برآورده می کنند. هر ابزارک PowerPack با تمرکز ویژه بر روی تجربه کاربر ، خلاقیت و انعطاف پذیری ساخته شده است.از قابلیت های ساده مانند عناوین گرفته تا ویژگی های پیشرفته مانند ابزارک های پست ها، PowerPack همه آنچه را که برای ساخت وب سایت های زیبا المنتور نیاز دارید در اختیار شما قرار می دهد.
69000 119000 -
دانلود قالب ثبت آگهی Listany برای HTML
دایرکتوری - آگهیقالب ثبت آگهی Listany - قالب html آگهی برای آگهی رستوران، غذا، کافه، هتل و غذاطراحی شده است. این قالب طراحی ساده و شیکی دارد. شما به راحتی میتوانید از آن برای ساخت هر وب سایت آگهی و دایرکتوری استفاده می کنید. فارسی و راستچین شده قالب ثبت آگهی Listany بصورت کامل فارسی و راستچینی شده است و شما به راحتی میتوانید از آن برای راه اندازی سایت ثبت آگهی خود استفاده نمایید. امکانات قالب ثبت آگهی Listany HTML5 و CSS3 قالب پاسخگو آیکون های رایگان پیکسل کامل طراحی تمیز و منحصر به فرد آسان برای سفارشی کردن رتینا آماده رنگ نامحدود طرح بندی جعبه یا گسترده فرم تماس با آژاکس پارالاکس خیلی بیشتر… سازگاری قالب ثبت آگهی Listany سازگار با : IE9, IE10, IE11, Firefox, Safari, Opera, Chrome ,Bootstrap...95000 -
دانلود قالب هاست Hostify برای HTML
شرکتیقالب هاست Hostify برای HTML قالب حرفه ای مناسب برای سایت های هاست و دامنه میباشد که در ادامه به بررسی ویژگی ها و امکانات قالب هاستینگ Hostify میپردازیم:
ویژگی ها و امکانات قالب Hostify
- CSS3 و بوت استرپ 3
- سیستم شبکه و طراحی پاسخگو
- رتینا آماده (طراحی با کیفیت بالا)
- ویژگی های ماهانه جدید
- طراحی گرا
- مگا منو بسیار قابل برنامه ریزی
- شاخص های اعتماد (توصیفات)
- صفحات سفارشی ورود / ثبت نام (نیاز به برنامه نویسی)
- جداول قیمت گذاری پاسخگو
89000 -
دانلود قالب فرم ورود و ثبت نام Iofrm برای HTML
قالب html تک صفحه ایقالب Iofrm یک مجموعه قالب های فرم (ورود / ثبت نام / فیلدها) میباشد که توسط ملت وب فارسی و راستچین شده است و میتواند صفحات ورود و ثبت نام خود را بسازید.
سبک مورد نظر خود را بین 15 طرح خلاقانه انتخاب کنید!- 23فایل HTML Pages / CSS / JS
- شامل SVG Vectors
- شامل تصاویر
- جعبه زیبا flipping برای تنظیم مجدد رمز عبور
- بوت استرپ 4
- طرح پاسخگو، موبایل آماده
- رتینا آماده
89000 129000 -
دانلود سربرگ بسیار شیک اداری برای هر موضوعی
سربرگدانلود سربرگ اداری بسیار شیک و مدرن با المانهای وکتور شیک برای هر موضوعی شما میتونید با دانلود و تغییر محتوای سربرگها ازین طرح برای شرکت و محل کار خودتون استفاده کنید مشخصات طرح لایه باز سربرگ شرکتی لایه باز این طرح با مود رنگی cmyk و حجم 4 مگابایتی و فرمت psd اماده دانلود عزیزان هست در ادامه نمونه طرح سربرگ اداری رو مشاهده خواهید کرد امیدوارم ازین طرح زیبا لذت برده باشید نمونه سربرگ...20000 -
دانلود قالب مدیریت Ultra Admin برای HTML
قالب مدیریتتوجه : قالب دارای راستچین کامل بوده فقط صفحه اصلی فارسی سازی گردیده چون برنامه نویسان وب سایت خوب میدانند در قالب مدیریت htmll فقط راستچین استاندارد مهم می باشد. و فارسی سازی سایر صفحات منافعی برایشان نخواهد داشت . قالب مدیریت Ultra Admin یک قالب مدریت HTML با طراحی ویژه و زیبای خود باعث میشود که شما پنل مدریت خود را منحصر به فرد کرده و به آسانی سفارشی سازی کنید. قالب با بوت استرپ طراحی شده است و کاملا ریسپانسیو می باشد . از دیگر قابلیت های منحصر به فرد قالب می توان به منوی جستوجوی آن اشاره کرد که همیشه در منوی بالا قرار دارد و کافیست آنچه که نیاز دارید را جستوجو کنید و نتیجه را مشاهده نمایید. برخی از ویژگی های قالب مدیریت Ultra Admin به طور کامل پاسخگو رابط کاربری زیبا و تمیز مجموعه ای بزرگ از اجزای UI ویدجت های تعاملی ابزارک مانند کار انجام کار، اطلاعیه ها، پیشرفت...94000 139000 -
دانلود قالب مدیریت ادمین Glade برای HTML
قالب مدیریتقالب Glade نام یک قالب تجاری به صورت HTML می باشد که برای ساخت صفحات مدیریت می باشد. این قالب داری طراحی واکنش گرا و دارای فایل های rtl.css و راست چین می باشد همچنین این قالب دارای صفحاتی مثل 404 ، صفحه به زودی ، فرم ها ، تقویم ، بخش ایمیل و .. می باشد. از قابلیت های برجسته این قالب می توان به نمودار های متحرک ، داری بخش تماس باما و همچنین داری نوتیفیکیشن حرفه ای می باشد . در ادامه به برخی دیگر از امکانات این قالب به صورت کلی نیز اشاره می کنیم: توجه : قالب دارای راستچین کامل بوده فقط صفحه اصلی فارسی سازی گردیده چون برنامه نویسان وب سایت خوب میدانند در قالب مدیریت htmll فقط راستچین استاندارد مهم می باشد. و فارسی سازی سایر صفحات منافعی برایشان نخواهد داشت . ویژگی ها و امکانات قالب مدیریت ادمین Glade طراحی واکنش گرا داری بخش گالری پشتیبانی نقشه گوگل طراحی به صورت...94000 139000 -
دانلود قالب مدیریت Doodle برای HTML فارسی
قالب مدیریتقالب Doodle نام یک قالب زیبا و فارسی شده می باشد که به صورت HTML ارائه شده است. قالب مدیریت Doodle یک قالب زیبا و بسیار سبک برای طراحی بخش های مدیریت سایت و برنامه های تحت وب است که شما می توانید توسط آن ظاهری متناسب برای بخش مدیریت خود بسازید. این قالب به صورت راستچین و با منوی کاملا فارسی به همراه فونت اختصاصی ملت وب ترمیم شده برای شما جهت استفاده قرار داده شده است. توجه : قالب دارای راستچین کامل بوده فقط صفحه اصلی فارسی سازی گردیده چون برنامه نویسان وب سایت خوب میدانند در قالب مدیریت html فقط راستچین استاندارد مهم می باشد. و فارسی سازی سایر صفحات منافعی برایشان نخواهد داشت . امکانات و ویژگی های قالب مدیریت Doodle اچ تی ام ال 90 + صفحات اچ تی ام ال 2000+ آیکون 500+ عناصر توییتر و اینستاگرام راستچین شده چیدمان پاسخگو ابزارک های متنوع نقشه های...99000 139000 -
دانلود قالب مدیریت Beagle برای HTML فارسی
قالب مدیریتقالب html ناحیه مدیریت Beagle یکی از قالب های جالب و زیبایی طراحی داشبورد ادمین و ناحیه مدیریت در سایت تم فارست است. این قالب که توسط foxy pixel طراحی شده، در سایت تم فارست از کاربرانش امتیاز بی نظیر 4.92 از 5 را دریافت کرده. با یک نگاه به این قالب به سرعت متوجه خواهید شد که این امتیاز چه از لحاظ فنی و چه از لحاظ نوع طراحی، درخور قالب Beagle است. قالب اچ تی ام ال بیگل یک تمپلیت مدیریتی واکشن گراست که با استفاده از فریم ورک bootstrap طراحی شده است. این قالب در کنار قدرت و گستردگی امکانات، از زیبایی و نمای چشمگیری نیز برخوردار است که آن را تبدیل به انتخابی مناسب برای ایجاد انواع داشبورد مدیریتی برای اسکریپت های مختلف میکند. توجه : قالب دارای راستچین کامل بوده فقط صفحه اصلی فارسی سازی گردیده چون برنامه نویسان وب سایت خوب میدانند در قالب مدیریت html فقط راستچین استاندارد مهم می...95000 139000 -
دانلود قالب مدیریت داشبورد Droopy برای HTML
قالب مدیریتقالب مدیریت Droopy یک کیت وب UI مبتنی بر بوت استرپ است که توسط Grunt، Bower و SCSS طراحی شده است. این قالب مدیریت برای سفارشی کردن و توسعه دادن بسیار راحت میباشد. این قالب مدیریت یک بسته حرفه ای است که همراه با مقدار زیادی از اجزای رابط کاربر، ویدجت، فرم، جدول، نمودار، صفحات و برنامه های کاربردی ارائه شده است. این قالب مدیریت براساس چارچوب Bootstrap CSS Sass است. هر جزء به طور کامل قابل تنظیم و فوق العاده آسان برای استفاده است. توجه : قالب دارای راستچین کامل بوده فقط صفحه اصلی فارسی سازی گردیده چون برنامه نویسان وب سایت خوب میدانند در قالب مدیریت html فقط راستچین استاندارد مهم می باشد. و فارسی سازی سایر صفحات منافعی برایشان نخواهد داشت . ویژگی ها و امکانات قالب مدیریت droopy نکات برجسته 95 + صفحات اچ تی ام ال 2000+ آیکون UI 500+ عناصر توییتر و اینستاگرام راستچین شده چیدمان...95000 -
دانلود قالب پزشکی FINDOCTOR برای HTML + پنل مدیریت
دایرکتوری - آگهیقالب FINDOCTOR یک قالب سایت HTML5، یک فهرست برای پزشکان و صنایع پزشکی است که بیماران می توانند از طریق تخصص و یا محل اقامت و دیدار و یا رزرو آن را پیدا کنند. پزشکان و کلینیک ها می توانند اطلاعات ضروری، بررسی های بیمار و رزرو در دسترس را نمایش دهند. امکانات و ویژگی های قالب پزشکی FINDOCTOR کد معتبر و تمیز HTML5 / CSS3 پنل مدیریت بوت استرپ 4 2500 علامت فونت فوق العاده با پشتیبانی ازرتینا +40 صفحه HTML پشتیبانی از رتینا فایل های SASS گنجانده شده است 5 صفحه اصلی رولوشن اسلایدر ادغام نقشه گوگل پشتیبانی شده توسط همه مرورگرهای اصلی فونت گوگل وب انیمیشن های CSS3 Owl Carousel جداول قیمت گذاری با سوئیچر و دیدگاه پاسخگو هوشمند کنترل کننده رمز عبور جستجوگر دوستانه صفحه به...99000 139000 -
دانلود قالب هاست و دامنه Hostinza برای HTML
شرکتیقالب Hostinza قالب HTML میزبانی وب مدرن و ایزومتریک است که برای افرادی که علاقمند به زندگی در شرکت میزبانی وب هستند ایجاد شده است. این قالب بسیار مناسب برای ارائه خدمات میزبانی وب با فناوری اطلاعات (مشترک و اختصاصی) است که همچنین ممکن است طراحی وب سایت و شبکه را انجام دهند. امکانات و وژگی های قالب Hostinza قالب HTML میزبانی وب 5+ سبک های صفحه قدرتمند با سرصفحه های منحصر به فرد و محتوا 20+ صفحات طراحی منحصر به فرد فرم تماس آژاکس با اعتبار سنجی HTML5 و CSS3 طرح کاملا پاسخگو انیمیشن های CSS3 مگا منو منوی کشویی چند سطحی بوت استرپ 4 پیمایش صاف وبلاگ منحصر به فرد کد کوتاه HTML طراحی تعاملی گزینه های مختلف قیمت گذاری جداول آسان برای سفارشی کردن و استفاده انعطاف پذیر و چند منظوره قالب میزبانی متمرکز طرح بندی نامحدود آیکون Font Awesome 250+ line icons< نقشه تماس گوگل فونت ایران سنس طراحی فرم...99000 149000 -
دانلود دو کاور استوری اینستاگرام با لایه باز برای هر موضوعی
پست و استوری اینستاگرامدانلود دو کاور استوری اینستاگرام با لایه باز برای هر موضوعی برای دوستان گرامی نکته مهم : قبل از خوندن توضیحات اگر به کاور پست و استوری اینستاگرام علاقه دارید همچنین کارت ویزیت حتما طرحهای بنده رو مشاهده بفرمایید. عزیزان دو قالب استوری اینستاگرام براتون قرار دادیم که میتونید برای هر موضوعی ازین قالبها استفاده کنید. استوری عاشقانه..استوری فلسفی ..هنری و.... مشخصات نمونه کاور استوری اینستاگرام این قالبها حجم 13 مگابایتی دارند فرمت psd و مود رنگی rgb دارند ما برای نمونه ازین تصاویر استفاده کردیم. شما میتونید از هر تصویری که علاقه دارید استفاده کنید یا از رنگ مورد علاقه خودتون استفاده فرمایید سام هستم طراح گرافیست samic design نمونه کاور استوری...19000 -
دانلود قالب لایه باز پست اینستا برای فروش اجناس مختلف
پست و استوری اینستاگرامدانلود قالب کاور پست اینستاگرام مختص فروش اجناس و حتی عکس شخصی نکته مهم: قبل از هرچیز حتما دیگر کاورهای بنده رو مشاهده بفرمایید که پشیمون نخواهید شد کاورهای ما ارزانتر از هرجایی برای شما عزیزان قرار داده میشه طرحی که مشاهده میفرمایید طرح لایه باز کاور پست اینستاگرام برای معرفی اجناس و حتی عکس شخصی برای پیجهای هنرمندان هست که میتونید با دانلود این طرح از عکس و متن مورد نظر خودتون در این طرح ایتسفاده کنید و طرح مخصوص خودتون رو داشته باشید مشخصات کاور پست اینستاگرام فروش موبایل این طرح دارای فرمت psd و لایه باز و فرمت رنگی rgb میباشد در ادامه نمونه کاور پست اینستاگرام رو باهم مشاهده خواهم کرد امیدوارم ازین طرح شیک لذت برده باشید نمونه کاور پست اینستاگرام فروش اجناس نمونه کاور پست اینستاگرام فروش...23000 -
دانلود مجموعه کاور و تم پست اینستاگرام لایه باز بسیار شیک برای تولید محتوا
پست و استوری اینستاگرامپست اینستاگرام | کاور اینستاگرام | فریم اینستاگرام | طرح لایه باز اینستاگرام | طرح تولید محتوا اینستاگرام معرفی مجموعه کاور و تم پست اینستاگرام لایه باز دانلود مجموعه کاور و تم پست اینستاگرام برای تولید محتوا کاملا لایه باز بوده و از طرح جذابی برای فروش بیشتر محصولات اینستاگرامی استفاده شده، این طرح مناسب برای پیج های بلاگری | تولید محتوایی | آموزشی | و مناسب برای سایر پیج ها... میباشد که از دید خوبی برخوردار میباشد برای جذب مشتری، این طرح فوق با افکت نورهای خاص و رنگبندی جذاب و روانشناسی رنگ رعایت شده که بصورت کاملاً لایه باز با فرمت psd و از کدهای رنگی RGB که مخصوص اینستاگرام هست استفاده شده.این طرح با طراحی شیک و مدرن در اندازه {1080*1080} پیکسل و رزولوشن ۳۰۰ DPII با کیفیت عالی می باشد. ویژگی های طرح پست اینستاگرام فروشگاه: طراحی یک پارچه و بی...23000 29000 -
دانلود 2 کاور بسیار کاربردی و شیک برای معرفی اجناس و عکس هنرمندان با لایه باز
پست و استوری اینستاگرامدانلود 2 طرح بسیار کاربردی و شیک پست اینستاگرام برای معرفی و فروش اجناس شما و حتی قراردادن عکس شخصی و هنرمندان برای پیجهای هنری. این کاورها به گونه ای طراحی میشن که شما عزیزان هم بتونید از اجناستون رونمایی کنید هم از عکس اشخاص مختلف استفاده کنید دراین کاورها نکته: قبل از هرچیز حتما دیگر کاورهای بنده رو مشاهده بفرمایید که پشیمون نخواهید شد کاورهای ما ارزانتر از هرجایی برای شما عزیزان قرار داده میشه طرحی که مشاهده میفرمایید طرح لایه باز کاور پست اینستاگرام برای معرفی اجناس و حتی عکس شخصی برای پیجهای هنرمندان هست که میتونید با دانلود این طرح از عکس و متن مورد نظر خودتون در این طرح ایتسفاده کنید و طرح مخصوص خودتون رو داشته باشید مشخصات کاور پست اینستاگرام فروش اجناس این طرح دارای فرمت psd و لایه باز و فرمت رنگی rgb میباشد در ادامه نمونه کاور...23000 33000 -
دانلود کاور استوری اینستاگرام در دو حالت مختلف برای سخنان انگیزشی ( لایه باز )
پست و استوری اینستاگرامدانلود دو نمونه کاور استوری اینستاگرام با موضوع سخنان انگیزشی و جملات عاشقانه و غیره... نکته : دوستان عزیز ما برای نمونه ازین عکس و متنها استفاده کردیم.. شما بسته به سلیقه خودتون از هر عکس و متنی که دلتون بخواد میتونید استفاده کنید مشخصات نمونه کاور استوری اینستاگرام این قالبها حجم 13 مگابایتی دارند فرمت psd و مود رنگی rgb دارند ما برای نمونه ازین تصاویر استفاده کردیم. شما میتونید از هر تصویری که علاقه دارید استفاده کنید یا از رنگ مورد علاقه خودتون استفاده فرمایید سام هستم طراح گرافیستdesign samic ملت وب ارزانترین کاورهای پست و استوری اینستاگرام رو نصف قیمت تمامی سایتها قرار میده حتما ازین موقعیت برای خرید زیباترین طرحهای گرافیکی استفاده...22000
آخرین های مشابه مشاهده بیشتر
-
دانلود سورس استایل 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 استفاده می شود. افزودن سبک در...رایگان -
دانلود سورس js , css جستجو پیشرفته با انیمیشن زیبا
آموزش cssبدست آوردن تجربه جستجو به راستی کار ساده ای نیست. نقطه شروع همیشه فرم جستجو است که در اکثر موارد تنها شامل یک فیلد ورودی و یک دکمه ارسال است. صفحه نتایج جستجو برای طراحی بسیار مشکل است، مخصوصا اگر شما دارای دسته های مختلف محتوا باشید. برای وب سایت های بزرگ و فروشگاه های آنلاین، چه مهم است، اما سعی کنید پیش بینی حرکت کاربر. ما باید توجه داشته باشیم که اغلب کاربران ما در مورد کجا...رایگان -
دانلود سورس انیمیشن js , css جهت صفحه بندی خدمات شما بدون رفرش
آموزش cssما اخیرا با یک انیمیشن طراحی شده با CSS تجربه کردیم که جایگزین تازه کردن صفحه وب می شود در حالی که محتوای با استفاده از ajax به روز شده است. انفجار امروز بر اساس یک ایده است، اما با یک اجرای متفاوت: در این زمان یک اثر شناور ساده تبدیل به یک نوار بارگذاری، که در نهایت با محتوای جدید گسترش می یابد! آیکون های کتابخانه هسته ای ما . ایجاد ساختار ساختار HTML از یک...رایگان -
استایل جالب فونت فتوشاپ برای جذاب سازی نوشته
طرح لایه بازاستایل جالب فونت فتوشاپ برای جذاب سازی نوشته از این طرح میتوانید برای هر نوشته ای استفاده کنید این استایل به نوشته حالت سه بعدی و خلاقانه می دهد حتی میتوانید از این استایل برای طراحی لوگو نیز استفاده کنید آموزش استفاده از استایل فتوشاپ برای استفاده از این کار شما باید به قسمت لایه ها در فتوشاپ خود مراجعه کنید اگر ابزار لایه برای شما فعال نیست از پنجره WINDWOS->LAYERS را فعال کرده و سپس طبق...رایگان -
دانلود استایل متنی فتوشاپ برای جذاب کردن متون
طرح لایه بازدانلود استایل مخصوص فتوشاپ با این استایل مخصوص میتوانید طرح های خودتان را جذاب کنید مثلا میتوانید برروی کارت ویزیت و بنر های خودتان و حتی برای خلق لوگو با استفاده از فونت های انگلیسی زیبا که لینکش رو براتون گذاشتم بدون دردسر و هزینه برای خودتان لوگو طراحی کنید. آموزش استفاده از استایل فتوشاپ برای استفاده از این کار شما باید به قسمت لایه ها در فتوشاپ خود مراجعه کنید اگر ابزار لایه...رایگان -
دانلود انیمیشن لندینگ زیبا برای وب سایت ها
پیش بارگیرها اغلب برای بارگیری وب سایت ها / برنامه های کاربردی آهسته استفاده می شوند تا کاربر را مطلع کنند که وب سایت هنوز بارگذاری شده یا سقوط نکرده است. پیش بارگیرها برای وب سایت ها و برنامه های کاربردی با منابع بسیار مفید هستند. در بسیاری از موارد، بارگذاری انیمیشن ها به عنوان اولین عنصرUX استفاده می شود. آن را به کاربر تایید می کند که برنامه یا وب سایت سقوط نمی...رایگان -
طرح استایل متنی فتوشاپ قرمز مسابقه
طرح لایه باز طرح استایل متنی فتوشاپ قرمز مسابقه در ملت وب دانلود طرح های لایه باز طرح استایل متنی فتوشاپ قرمز مسابقه تراکت که صد ها طرح لایه باز طرح استایل متنی فتوشاپ قرمز مسابقه رایگان را میتوانید به صورت رایگان دانلود و استفاده نمایید. آموزش استفاده از طرح استایل متنی فتوشاپ قرمز مسابقه برای استفاده از این طرح اینستاگرام در فتوشاپ شما باید به قسمت لایه ها...رایگان -
25+ کتابخانه انیمیشن CSS رایگان
آموزش cssامروز ما در حال رفتن به در بالای نگاه CSS انیمیشن کتابخانه برای کمک به شما انیمیشن های بسیار زیبا ایجاد کنید. انیمیشن ها زندگی را به وب، جنبش معنی دار شدت مطمئن UX را به سطح بعدی. شما احتمالا شنیده اصطلاح "انتقال" قبل، درست است؟ انتقال CSS چیزی را به محل در تغییر وضعیت هنگامی که شما معلق در هوا و یا چیزی است. در حال حاضر ما می توانید انیمیشن های CSS به تحریک و تشجیع هر...رایگان -
مجموعه 30 انیمیشن css و svg کاربردی و جذاب
آموزش cssتمامی انیمیشن های معرفی شده با css و svg و در برخی موارد همراه javascript نیز معرفی شده اند انیمیشن ها قابل دانلود هستند برای دانلود میتوانید از روی کد های آنلاین codepen دانلود را انجام بدید Border توسط شان مک کافری هنگامی که روی دستورالعمل "HOVER" می روید ، فقط با CSS ساخته می شود و یک حاشیه به راحتی متن ایجاد می شود. Elastic SVG Sidebar by Nikolay Talanov نوار کناری وقتی می خواهید آن را از کنار خود...رایگان -
باکس ثبت نام حرفه ای با انیمیشن زیبا css,jquery
آموزش cssدر بیشتر موارد، کاربران خود را به یک صفحه ثبت نام هدایت می کنید. با این حال، اگر فرآیند پرداخت شما کاملا ساده باشد، یک روش جایگزین برای جابجایی جدول قیمت گذاری است، و در همان صفحه، فرم پرداخت را نشان می دهد. این همان چیزی است که ما با قطعه امروز تلاش کردیم. صحبت کردن به اندازه کافی، بیایید به کد بچرخانیم؛) منابع: Velocity.js توسط جولیان شاپیرو. آیکون از Nucleo . ایجاد...رایگان -
ساخت فایل های انیمیشن GIF و تبدیل و بهینه سازی آنها
در این نوشته قصد داریم در مورد فایل هایی با پسوند GIF صحبت کنیم . فرمت GIF فرمتیست که هم بافت های گرافیکی ثابت رو پشتیبانی میکنه هم بافت های گرافیکی متحرک که در حقیقت کوتاه شده اسم Graphics Interchange Format هست . بر خلاف اون چیزی که بین متخصصان کامپیوتری و طراحان رواج پیدا کرده تلفظ صحیح این فرمت جیف هست . دیکشنری آکسفورد هر دو تلفظ گیف و جیف رو برای این فرمت صحیح میدونه در حالی که...رایگان -
دانلود پروژه css , java جهت نمایش نمونه کار ها با انیمیشن بسیار جذاب
آموزش cssما با ایده حرکت بلوک های محتوا به عنوان راهی برای انتقال از صفحه اصلی / گالری به صفحه پروژه، بازی کرده ایم. تمام پانل ها در امتداد محور Y حرکت می کنند (محور x در دستگاه های کوچکتر)، و حرکت به وسیله ی این که کاربر میخواهد بیشتر درباره یک پروژه یاد بگیرد یا میخواهد به ناوبری دسترسی پیدا کند، حرکت می کند. تصاویر: unsplash.com ایجاد ساختار ساختار HTML از دو لیست های نامرتب تشکیل...رایگان -
سورس مودال باکس modal box
آموزش cssسلام خدمت دوستان امروز با آموزش ساخت مودال باکس خدمت شما هستیم که بسیار مناسب برای ایده گیری و تسریع در طراحی وب سایت خواهد بود modal box فوق از 7 دموی متفاوت می باشد که میتوان به ساید بار کردن منو ها با مودال و دگمه های اشتراک گذاری متون با کاراکتر بیشتر با استفاده فول اسکرین و کلی امکانات دیگر... در زیر نمایی از تصاویر دمو رو خدمتتون ارسال میکنیم : مودال ورود و عضویت: مودال...رایگان -
دانلود استایل متنی یا افکت متنی لایه باز نقره ای براق رایگان
طرح لایه بازدانلود استایل متنی یا افکت متنی لایه باز نقره ای براق رایگان که از این طرح میتوانید در طرح های خود اعم از بنر و تراکت جهت نمایان شدن بهتر متون استفاده کنید حتی از این طرح میتوانید برای طراحی لوگو نیز استفاده کنید دانلود طرح لایه باز رایگان توسط طراحان ملت که منبع طراح های رایگان گرافیکی می باشد را تقدیم کاربران عزیز خود میکند، همچنین می توانید از خدمات قالب وردپرس ملت وب...رایگان -
سورس jquery افزودن به سبد خرید سریع
آموزش cssاستفاده از صفحه نمایش بزرگتر نباید محدود به استفاده از تصاویر / عناصر بزرگتر باشد. ما می توانیم این پیکسل های اضافی را با افزایش تجربه کاربر با ویژگی های اضافی کار کنیم. UX استاندارد برای یک گالری محصول: کلیک کاربر بر روی یک محصول که او دوست دارد، و سپس به صفحه محصول تک حرکت می کند. از این جا، او قصد دارد برخی از گزینه ها را انتخاب کند و در نهایت محصول را به سبد خرید اضافه کند. هیچ...رایگان -
10 قطعه کد متریال رایگان به صورت اپن سورس
آموزش cssکد جدول رسپانسیو در اینجا قطعه طراحی مواد با پیچ و تاب منحصر به فرد است. این جدول پاسخگو ایجاد شده توسط سرگئی کوپلاتکی در واقع میزبان لینک های دیگر به قطعه طراحی مواد است. خیلی باحال! این به طور طبیعی با استفاده از تکنیک های طراحی مواد ایجاد می شود، بنابراین جدول باید کاملا به طرح شما متوسل شود. اما سخت ترین بخشی از طراحی موبایل، ساخت جداول است که روی صفحه نمایش...رایگان -
قالب وردپرس رایگان فروشگاهی ووکامرس لوازم الکتریکی - دانلود قالب Hitek با استایل های راستچینی
قالب وردپرس رایگانقالب وردپرس رایگان Hitek یک قالب وردپرس برتر با عملکرد بالا برای هر نوع فروشگاه آنلاین الکترونیکی است. با ویژگی های قدرتمند آن ، می توانید وب سایت همه کاره خود را بدون دانش کد نویسی بسازید. حاوی استایل های راستچینی قالب فروشگاهی Hitek همراه با استایل های RTL ارائه شده تا برای زبان های راست به چپ نیز قابل استفاده باشد. مشاهده سریع محصولات بدون نیاز به نصب هیچ افزونه دیگری شما نمایش سریع...رایگان -
سورس js نمایش 360 درجه و سه بعدی تصاویر محصولات فروشگاهتان
آموزش cssدر طراحی تجارت الکترونیک یکی از اهداف اصلی این است که فاصله بین محصول و کاربر را پر کنید. این به ویژه برای کالاهای با قیمت بالا مرتبط است. از این رو، اهمیت ادغام ابزارهای تعاملی، برای دادن کاربر به یک راه برای "تقریبا تجربه" محصول. منابع امروز یک منبع ساده و تعاملی است که می تواند برای نشان دادن یک تور مجازی از محصول استفاده شود. ایده قطعه این است که از یک حرکت تصویر...رایگان -
آموزش کامل و سورس سبد خرید css , jquery با پیشنمایش و دانلود
آموزش cssما در مورد فرآیند "اضافه به سبد خرید" به الگوهای مختلفی استفاده می کنیم. ایده اصلی این الگو، اطلاع دادن به کاربر است که یک مورد به سبد اضافه شده است و او را با یک پیوند برای ادامه به پرداخت، ارائه می دهد. ما با این ایده مخفی کردن سبد خرید به طور پیش فرض آزمایش کرده ایم و آن را زمانی که کاربر بر روی دکمه «افزودن به سبد خرید» کلیک می کند نشان می دهد. به این ترتیب کاربر می...رایگان -
سورس کامل به همراه پیشنمایش تایم لاین jqruey , css
آموزش cssخط زمانی عمودی ما تا کنون یکی از محبوب ترین منابع در ملت وب است. بسیاری از شما از ما خواسته اید تا یک جدول زمانی افقی را نیز اضافه کنید. که تقدیم شما میگردد. ساخت یک جدول زمانی افقی کمی دشوار بود، زیرا شما نمی توانید به عمودی (بصری) رفتار پیمایش تکیه کنید. ما تصمیم گرفتیم جداول زمانی و حوادث را جدا کنیم، اولین کسی که مانند یک نوار لغزنده کار می کند، در حالی که دومین اشغال...رایگان -
دانلود سورس js , css نمایش گالری تصاویر به صورت سه بعدی
آموزش cssایده این منبع این است: اگر من یک گالری محصولات داشته باشم، من بهترین تصویر را برای هر یک از آنها انتخاب می کنم. اما اگر یک تصویر کافی نیست چه؟ مشتری بر روی محصول کلیک می کند، او به صفحه محصول تکیه می کند، و در بیشتر موارد، یک نمایش اسلاید در آنجا پیدا می کند. با این حال، اگر آنها قبل از رفتن به صفحه محصول، تصاویر بیشتری از یک محصول مشابه را ببینند، احتمال بیشتری وجود دارد که آنها...رایگان
هشتگ ها :
این محصول بدون نظر می باشد شما میتوانید اولین نظر را ثبت کنید