کد های طراحی سایت

خانه/آموزش طراحی سایت/کد های طراحی سایت
۲۴ ۰۴, ۱۳۹۶

کدهای جذاب و دیدنی ( Preloader ) : ساخت لودر زیبا و جالب

توسط | ۱۳۹۶-۴-۲۴ ۱۲:۴۹:۵۲ +۰۴:۳۰ تیر ۲۴ام, ۱۳۹۶|کد های طراحی سایت|دیدگاه‌ها برای کدهای جذاب و دیدنی ( Preloader ) : ساخت لودر زیبا و جالب بسته هستند

در این قسمت میخوام یک کد ( Preloader ) جالب رو در اختیارتون بزارم. همونطور که دیدید یک لودر زیبا و حرفه ای با استفاده از سه دایره ساخته شده و میتونین از اون استفاده کنید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و [...]

۲۲ ۰۴, ۱۳۹۶

کدهای جذاب و دیدنی ( Heart Animation ) : افکت انیمیشنی زیبا برای لایک کردن

توسط | ۱۳۹۶-۴-۲۲ ۱۵:۱۰:۰۳ +۰۴:۳۰ تیر ۲۲ام, ۱۳۹۶|کد های طراحی سایت|دیدگاه‌ها برای کدهای جذاب و دیدنی ( Heart Animation ) : افکت انیمیشنی زیبا برای لایک کردن بسته هستند

در این قسمت میخوام یک کد ( Heart Animation ) جالب رو در اختیارتون بزارم. همونطور که دیدید یک قلب قرار گرفته و زمانی که بر روی اون کلیک میکنید، یک افکت انیمیشنی زیبا نمایش داده میشه. میتونین از این ایده برای لایک کردن استفاده کنید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای [...]

۲۲ ۰۴, ۱۳۹۶

انیمیشن زیبا برای گریدبندی تصاویر – Grid Loading Animations ( نمونه ۱)

توسط | ۱۳۹۶-۵-۷ ۱۹:۳۸:۲۸ +۰۴:۳۰ تیر ۲۲ام, ۱۳۹۶|کد های طراحی سایت|دیدگاه‌ها برای انیمیشن زیبا برای گریدبندی تصاویر – Grid Loading Animations ( نمونه ۱) بسته هستند

;(function(window) {   /** * GridLoaderFx obj. */ function GridLoaderFx(el, options) { this.el = el; this.items = this.el.querySelectorAll('.grid__item > .grid__link'); }   GridLoaderFx.prototype._render = function(effect) { // Reset styles. this._resetStyles();   var self = this, effects = { 'Hapi': { animeOpts: { duration: function(t,i) { return 600 + i*75; }, easing: 'easeOutExpo', delay: function(t,i) { [...]

۲۱ ۰۴, ۱۳۹۶

کدهای جذاب و دیدنی ( Wispy Ember ) : گلوله آتشین زیبا

توسط | ۱۳۹۶-۴-۲۲ ۱۴:۴۳:۲۶ +۰۴:۳۰ تیر ۲۱ام, ۱۳۹۶|کد های طراحی سایت|دیدگاه‌ها برای کدهای جذاب و دیدنی ( Wispy Ember ) : گلوله آتشین زیبا بسته هستند

در این قسمت میخوام یک کد ( Wispy Ember ) جالب رو در اختیارتون بزارم. همونطور که دیدید یک گلوله آتشین زیبا قرار گرفته و زمانی که ماوستون رو به سمت راست و چپ میبرید، آتش مربوط به این دایره جابجا میشه. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم [...]

۲۰ ۰۴, ۱۳۹۶

کدهای جذاب و دیدنی ( Funky Pure CSS Accordion ) : ساخت آکوردئون زیبا با CSS خالص

توسط | ۱۳۹۶-۴-۲۲ ۱۴:۴۵:۴۵ +۰۴:۳۰ تیر ۲۰ام, ۱۳۹۶|کد های طراحی سایت|دیدگاه‌ها برای کدهای جذاب و دیدنی ( Funky Pure CSS Accordion ) : ساخت آکوردئون زیبا با CSS خالص بسته هستند

در این قسمت میخوام یک کد ( Funky Pure CSS Accordion ) جالب رو در اختیارتون بزارم. همونطور که دیدید یک آکوردئون زیبا با استفاده از CSS خالص ساخته شده و زمانی که بر روی هر کدام از آیتم ها کلیک میکنید، با استایل و افکتی زیبا، زیر مجموعه های اون نمایش داده میشن. بدلیل اینکه [...]

۱۹ ۰۴, ۱۳۹۶

کدهای جذاب و دیدنی ( Different social nav styles ) : استایل متنوع برای اشتراک شبکه های اجتماعی

توسط | ۱۳۹۶-۴-۲۰ ۱۸:۲۴:۴۳ +۰۴:۳۰ تیر ۱۹ام, ۱۳۹۶|کد های طراحی سایت|بدون دیدگاه

در این قسمت میخوام یک کد ( Different social nav styles ) جالب رو در اختیارتون بزارم. همونطور که دیدید استایلهای متفاوت و متنوعی قرار داده شده و میتونین از آنها برای نشان دادن شبکه های اجتماعی خودتان به کاربران و همچنین به اشتراک گذاری در شبکه های اجتماعی استفاده کنید. بدلیل اینکه حجم کدها زیاد [...]

۱۶ ۰۴, ۱۳۹۶

کدهای جذاب و دیدنی ( Tile adder ) : ساخت لودر زیبا با CSS

توسط | ۱۳۹۶-۴-۱۷ ۰۴:۱۲:۲۹ +۰۴:۳۰ تیر ۱۶ام, ۱۳۹۶|کد های طراحی سایت|دیدگاه‌ها برای کدهای جذاب و دیدنی ( Tile adder ) : ساخت لودر زیبا با CSS بسته هستند

در این قسمت میخوام یک کد ( Tile adder ) جالب رو در اختیارتون بزارم. همونطور که دیدید یک لودینگ زیبا بصورت زیبا ساخته شده و میتونین از اون ایده بگیرید و استفاده کنید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. [...]

۱۶ ۰۴, ۱۳۹۶

کدهای جذاب و دیدنی ( THREE Image Transition ) : افکت حرفه ای و سه بعدی برای تغییر تصویر

توسط | ۱۳۹۶-۴-۱۶ ۱۹:۴۷:۳۰ +۰۴:۳۰ تیر ۱۶ام, ۱۳۹۶|کد های طراحی سایت|دیدگاه‌ها برای کدهای جذاب و دیدنی ( THREE Image Transition ) : افکت حرفه ای و سه بعدی برای تغییر تصویر بسته هستند

در این قسمت میخوام یک کد ( THREE Image Transition ) جالب رو در اختیارتون بزارم.   همونطور که دیدید یک تصویر قرار گرفته و بصورت اتوماتیک و در فواصل زمانی مشخص یک افکت انیمیشنی زیبا و سه بعدی انجام میشه و تصویر تغییر میکنه. شما میتونین با کلیک و درگ کردن به سمت راست و [...]

۱۶ ۰۴, ۱۳۹۶

کدهای جذاب و دیدنی ( SVG clip-path Hover Effect ) : افکت هاور زیبا و دیدنی

توسط | ۱۳۹۶-۴-۱۶ ۰۰:۱۹:۳۵ +۰۴:۳۰ تیر ۱۶ام, ۱۳۹۶|کد های طراحی سایت|دیدگاه‌ها برای کدهای جذاب و دیدنی ( SVG clip-path Hover Effect ) : افکت هاور زیبا و دیدنی بسته هستند

در این قسمت میخوام یک کد ( SVG clip-path Hover Effect ) جالب رو در اختیارتون بزارم. همونطور که دیدید تعدادی بلاک و سکشن قرار داده شده و زمانی که بر روی اونا هاور میکنید، پشت زمینه یک ناحیه دایره ای شکل از این سکشن نمایش داده میشه. این کار با استفاده از SVG انجام شده [...]