در این قسمت میخوام یک کد ( Hover squares ) جالب رو در اختیارتون بزارم. همونطور که دیدید تعدادی بلاک مربعی قرار داده شدن و زمانی که بر روی هر کدوم از اونا هاور میکنید، با استایل زیبایی و بصورت سه بعدی از جای خودشون بلند میشن و حالت خوبی رو بوجود میارن. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای...

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

0 55 ۱۴ مرداد ۹۵ در این مطلب با ادامه آموزش Grunt در خدمتتون هستیم. در جلسه های گذشته در مورد نصب grunt صحبت کردیم و همچنین توضیحاتی مقدماتی در مورد تعدادی از پلاگینهای اون دادیم. تا اینجای کار فایل package.json ما بصورت زیر هست: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 { "name": "grunt-project", "version":...

0 30 ۱۲ مرداد ۹۵ در این مطلب با ادامه آموزش Grunt در خدمتتون هستیم. در جلسه قبل تعدادی از پلاگینهای موجود برای grunt رو قرار دادیم و برای هر کدوم توضیحاتی رو در نظر گرفتیم. در این جلسه هم میخایم تعدادی پلاگین دیگه رو خدمتتون عرض کنیم و شما با اونا آشنایی مقدماتی پیدا کنید. پلاگین 11 : grunt-contrib-...

در این قسمت میخوام یک کد ( Ionic Side Menu Transitions ) جالب رو در اختیارتون بزارم. همونطور که دیدید یک منوی جانبی در سمت چپ قرار گرفته و انیمیشنهای زیبایی برای اون در نظر گرفته شده. برای دیدن و عوض کردن انیمیشن ها بر روی دکمه های موجود در پایین صفحه کلیک کنید. مثلا اگر بر روی wave کلیک کنید، منو ب...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون ابزار css رو معرفی کرده که با استفاده از اون میتونین برای المنتهای خودتون به راحتی tooltip های زیبایی رو قرار بدین و توضیحاتی در مورد اون المنت رو درونش بزارید. همچنین میتونین موقعیت اون رو مشخص کنید و بگید که در بالا یا پایین یا چپ و راست قرار ب...

0 6 ۱۱ مرداد ۹۵ در این مطلب با ادامه آموزش Grunt در خدمتتون هستیم. در جلسه قبل تعدادی از پلاگینهای موجود برای grunt رو قرار دادیم و برای هر کدوم توضیحاتی رو در نظر گرفتیم. در این جلسه هم میخایم تعدادی پلاگین دیگه رو خدمتتون عرض کنیم و شما با اونا آشنایی مقدماتی پیدا کنید. پلاگین 7 : grunt-contrib-ja...

در این قسمت میخوام یک کد ( Mr JeellyFish pure CSS animation ) جالب رو در اختیارتون بزارم. همونطور که دیدید یک ماهی شبیه سازی شده و انیمیشنی زیبا برای اون قرار گرفته و شما میتونین از اون ایده بگیرید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و اس...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که از نظر طراحی و رابط کاربری بسیار زیبا و حرفه ای ساخته شده و شما دوستان میتونی از اون ایده بگیرید. نام این سایت 56 هست و title اون که در مرورگر نمایش داده میشه، کلا اعدادی نمایش داده میشه که حاصل اون 56 میشه. مثلا 224 / 4 یا 40 + 16 و ... در بالای صفحه ی...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون 38 آیکون زیبا و جالب در رابطه با نقل و انتقال قرار داده شده و شما دوستان میتونین اونا رو بصورت رایگان دانلود کرده و استفاده کنید. این آیکون ها در فرمت SVG قرار داده شده اند و میتونین از اونا در هر سایزی بدون افت کیفیت استفاده کنید. برای دانلود کل...

در این قسمت میخوام یک کد ( move ball by mouse ) جالب رو در اختیارتون بزارم. همونطور که دیدید یک ربات به شکل توپ قرار داده شده و زمانی که ماوستون رو در صفحه جابجا میکنید، این ربات هم حرکت میکنه تا به مکان مورد نظر برسه. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین ا...

0 47 ۱۰ مرداد ۹۵ در این مطلب با ادامه آموزش Grunt در خدمتتون هستیم. در جلسه قبل تعدادی از پلاگینهای موجود برای grunt رو قرار دادیم و برای هر کدوم توضیحاتی رو در نظر گرفتیم. در این جلسه هم میخایم تعدادی پلاگین دیگه رو خدمتتون عرض کنیم و شما با اونا آشنایی مقدماتی پیدا کنید. پلاگین 3 : grunt-contrib-s...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون بصورت کامل آموزش داده شده که چطور برای جدول مقایسه محصولات خودتون استایل زیبایی رو قرار بدین و رابط کاربری سایتتون رو ارتقاء بدین. شما میتونین از این آموزش استفاده کرده و همچنین دمو یا خروجی اون رو ببینید و کدهای نهایی اون رو دانلود کرده و استفاد...

0 23 ۹ مرداد ۹۵ در این مطلب با ادامه آموزش Grunt در خدمتتون هستیم. در جلسه قبل توضیحاتی در مورد grunt و بسته های اون دادیم و صفحه مربوط به plugin های اون رو بصورت کامل توضیح دادیم. حالا میخایم 14 عدد از پلاگینهایی که کاربرد بیشتری دارن و خود تیم grunt اونا رو توسعه داده براتون معرفی کنیم و توضیحاتی ...

در این قسمت میخوام یک کد ( Music Player ) جالب رو در اختیارتون بزارم. همونطور که دیدید یک تصویر از آهنگ مورد نظر قرار داده شده و زمانی که بر روی اون هاور میکنید، با حالت زیبایی یک طرف اون بلند میشه و مواردی رو در زیر خودش نشون میده. شما میتونین از این ایده استفاده کنید. بدلیل اینکه حجم کدها زیاد بود...

0 22 ۹ مرداد ۹۵ در جلسه دوم از فصل مقدماتی این دوره مروری خواهیم داشت بر پیشنیازهای این دوره برای شروع... در این جلسه می پرداریم به : از چه ورژنی استفاده کنیم؟ معرفی سایت های معتبر ارائه دهنده نرم افزار ایلوستریتور در وب فارسی آموزش نحوه نصب صحیح نرم افزار ایلوستریتور و کرک صحیح آن آموزش اعتماد سازی...

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

0 7 ۸ مرداد ۹۵ در این مطلب با ادامه آموزش Grunt در خدمتتون هستیم. در جلسه قبلی در مورد نصب grunt در پروژه خودمون صحبت کردیم و همچنین توضیحاتی در مورد ورژنها و نسخه بندی بسته ها گفتیم. با کاری که در جلسه قبل کردیم و با نصب grunt توسط npm، این ابزار یک پوشه جدید بنام node_modules در ریشه پروژمون میساز...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که یک محیط و بوم ساخته شده با پیکسل رو به شما نمایش میده و میتونین با جابجا کردن ماوستون اون رو تغییر اندازه یا resize کنیدو این تصویر یا گرافیک، واکنشگرا هست و زمانی که اون رو resize میکنید، متناسب با سایزی که داره محتوای مناسبی رو نمایش میده و حالت اون ع...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که میتونین در اون لوگوهای معروف رو پیدا کنید و هر کدوم رو خواستید دانلود کرده و استفاده کنید. در بالای سایت یک input قرار داده شده که میتونین عبارت مورد نظرتون رو در اون قرار بدین تا نتایج مربوط به اون رو بهتون نشون بده. در زیر هر آیکون و لوگو دو لینک قرار...