<html> <head> <title>Highcharts Tutorial</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> </head> <body> <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> <scr...

در این قسمت میخوام یک کد ( UI Statistic Pop Out ) جالب رو در اختیارتون بزارم. همونطور که دیدید افکت زیبایی برای هاور قرار داده شده و زمانی که بر روی المنتها هاور میکنید، اون آیتم بصورت Pop Out بالا میاد و حالت زیبایی رو به وجود میاره. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار م...

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

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

<html> <head> <title>Highcharts Tutorial</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> </head> <body> <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> <scr...

در این قسمت میخوام یک کد ( svg goo effect demonstration ) جالب رو در اختیارتون بزارم. همونطور که دیدید با استفاده از 4 دایره افکت Goo یا چسبنده رو براتون به نمایش گذاشته و میتونین اون رو بفهمید و ازش استفاده کنید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو د...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون بصورت کلی آموزش داده شده که چطور انیمیشنی بر روی مسیر خمیده بسازیم و المنت مورد نظر رو در امتداد اون و با تابع زمانی خاص حرکت بدیم. برای شروع وارد سایت curved-path-animations بشین. امیدوارم بدردتون بخوره. موفق باشید. یا علی Let's block ads! (Why?...

در این قسمت میخوام یک کد ( Triangular Sidebar Menu ) جالب رو در اختیارتون بزارم. همونطور که دیدید یک افکت مثلثی برای تمام اجزا قرار داده شده و زمانی که بر روی آیکون همبرگر یا سه خط کلیک میکنید، تمام اسلایدها میان و با کلیک بر روی هر کدوم، محتوای اون نمایش داده میشه. بدلیل اینکه حجم کدها زیاد بود ، ا...

0 3 ۳۱ اردیبهشت ۹۵ در این مطلب با ادامه آموزش واکنشگرا کردن تصاویر در خدمتتون هستم. در این قسمت با آخرین جلسه از واکنشگرا کردن تصاویر در خدمتتون هستم. در این جلسه میخایم تعدادی راه و روش و منبع و نکات پایانی رو خدمتتون عرض کنیم. بازرسی تصاویر واکنشگرا اولین قدمی که میخایم یک سایت رو ببینیم و تصاویر ...

0 5 ۲۹ اردیبهشت ۹۵ در این مطلب با ادامه آموزش واکنشگرا کردن تصاویر در خدمتتون هستم. انتخاب Breakpoint بر اساس بودجه Performance و کارایی چی میشه اگه ما ایده بودجه Performance رو در واکنشگرا کردن تصاویر مورد استفاده قرار بدیم؟ چطوری میشه اون رو تفسیر کرد؟ ما با تعریف کردن یک بودجه برای مقدار بایت اضا...

0 3 ۲۸ اردیبهشت ۹۵ در این مطلب با ادامه آموزش واکنشگرا کردن تصاویر در خدمتتون هستم. به چه دلیل سایز دقیق تصویر رو محیا نمیکنیم؟ در این لحظه شاید به نظرتون برسه و با خودتون بگید که چرا از همون سایزی که قرار هست در صفحه نمایش داده بشه استفاده نمیکنیم و خودمون رو راحت کنیم؟! نخست باید بگیم که تصاویر fl...

در این مطلب نمونه 6 برای هاور بر تصاویر با عنوان CSS Image Hover رو در اختیارتون قرار میدم. امیدوارم که بتونین از اون ایده بگیرید و یا اینکه از اون در سایتتون استفاده کنید. کد HTML : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <h2 id="demo06">6. Rotate<span>(+Zoom Out)</span></h2> <div class="hover06 column...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون تعدادی المنت برداری و وکتور قرار داده شده و میتونین اونا رو بصورت رایگان دانلود کرده و استفاده کنید. برای شروع وارد سایت timber بشین. امیدوارم بدردتون بخوره. موفق باشید. یا علی Let's block ads! (Why?)

0 3 ۲۷ اردیبهشت ۹۵ در این بخش که آخرین جلسه از دوره آموزش سئو هست به مطالب آخر فصل و همچنین جمع بندی مطالب دوره خواهیم پرداخت که دانشجویان نکات مهم دوره را بهتر درک کرده و در بهینه سازی سایت خود روی آنها تمرکز بیشتری داشته باشند. همچنین منابعی را در اخر این جلسه معرفی خواهیم کرد تا از جدیدترین مطالب...

در این مطلب نمونه 4 برای هاور بر تصاویر با عنوان CSS Image Hover رو در اختیارتون قرار میدم. امیدوارم که بتونین از اون ایده بگیرید و یا اینکه از اون در سایتتون استفاده کنید. کد HTML : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <h2 id="demo04">4. Zoom Out #2</h2> <div class="hover04 column"> <div> <figure><i...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون بهترین وبسایتهای سال از نظر طراحی قرار داده شده و با کلیک بر روی هر ماه میتونین به اطلاعات اون دسترسی داشته باشید و با دیدن اونا ایده بگیرید. برای شروع وارد سایت mmxv بشین. امیدوارم بدردتون بخوره. موفق باشید. یا علی Let's block ads! (Why?)

در این مطلب نمونه 3 برای هاور بر تصاویر با عنوان CSS Image Hover رو در اختیارتون قرار میدم. امیدوارم که بتونین از اون ایده بگیرید و یا اینکه از اون در سایتتون استفاده کنید. کد HTML : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <h2 id="demo03">3. Zoom Out #1</h2> <div class="hover03 column"> <div> <figure><i...

در این مطلب نمونه 2 برای هاور بر تصاویر با عنوان CSS Image Hover رو در اختیارتون قرار میدم. امیدوارم که بتونین از اون ایده بگیرید و یا اینکه از اون در سایتتون استفاده کنید. کد HTML : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <h2 id="demo02">2. Zoom In #2</h2> <div class="hover02 column"> <div> <figure><im...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون یک منو ثابت و عمودی که واکنشگرا هست رو میسازه و میتونین از اون استفاده کنید. میتونین بر روی دمو در لینک مورد نظر کلیک کنید، تا نتیجه کار رو ببینید. برای شروع وارد سایت vertical-fixed-navigation-2 بشین. امیدوارم بدردتون بخوره. موفق باشید. یا علی L...

0 3 ۲۵ اردیبهشت ۹۵ در جلسه بیست و یکم دوره آموزش فریم ورک فاندیشن می پرداریم به ادامه بررسی مبحث پلاگین های خارجی و با نحوه استفاده و کاربر آنها آشنا خواهیم شد... در این جلسه می پردازیم به : نکته : با توجه به اینکه از جلسه آینده وارد مبحث پروژه نهایی این دوره خواهیم شد لذا برای آماده سازی مراحل کدنو...