@import url(http://fonts.googleapis.com/css?family=Francois+One); @import url(http://fonts.googleapis.com/css?family=PT+Sans); @font-face { font-family: 'Audiowide'; font-style: normal; font-weight: 400; src: local("Audiowide"), local("Audiowide-Regular"), url(http://themes.googleusercontent.com/sta...

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

@import url(http://fonts.googleapis.com/css?family=Francois+One); @import url(http://fonts.googleapis.com/css?family=PT+Sans); @font-face { font-family: 'Audiowide'; font-style: normal; font-weight: 400; src: local("Audiowide"), local("Audiowide-Regular"), url(http://themes.googleusercontent.com/sta...

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

0 59 ۱۹ خرداد ۹۵ به نام خدا و سلام. با بیستمین جلسه از دوره مجازی پلاگین نویسی در خدمت شما هستیم. در این جلس قصد داریم نحوه ایجاد کارهای زمان بندی شده را خدمت شما آموزش دهیم و با استفاده از آن گزارش های روزانه پلاگین آمار بازدید را برای کاربران مورد نظر ارسال کنیم. در ابتدا تابع wp_schedule_event را...

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

@import url(http://fonts.googleapis.com/css?family=Francois+One); @import url(http://fonts.googleapis.com/css?family=PT+Sans); @font-face { font-family: 'Audiowide'; font-style: normal; font-weight: 400; src: local("Audiowide"), local("Audiowide-Regular"), url(http://themes.googleusercontent.com/sta...

* { box-sizing: border-box; padding: 0; margin: 0; } html, body { min-height: 100%; height: 100%; background-image: url(http://theartmad.com/wp-content/uploads/Dark-Grey-Texture-Wallpaper-5.jpg); background-size: cover; background-position: top center; font-family: helvetica neue, helvetica, arial, ...

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

* { box-sizing: border-box; padding: 0; margin: 0; } html, body { min-height: 100%; height: 100%; background-image: url(http://theartmad.com/wp-content/uploads/Dark-Grey-Texture-Wallpaper-5.jpg); background-size: cover; background-position: top center; font-family: helvetica neue, helvetica, arial, ...

@import url(http://fonts.googleapis.com/css?family=Francois+One); @import url(http://fonts.googleapis.com/css?family=PT+Sans); @font-face { font-family: 'Audiowide'; font-style: normal; font-weight: 400; src: local("Audiowide"), local("Audiowide-Regular"), url(http://themes.googleusercontent.com/sta...

<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> <script src="http://code.highcharts.com/modules/drilldown.js"></script> <script src="http://code.h...

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,900); * { box-sizing: inherit; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .6s; transition-duration: .6s; -webkit-transition-timing-function: ease; transition-timing-function: ease; margin:...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون 72 آیکون زیبا در سایز 24 در 24 قرار داده شده و میتونین اونا رو بصورت رایگان دانلود کرده و استفاده کنید. این آیکونها در فرمتهای AI برای Adobe illustrator و PSD برای Photoshop و Sketch و SVG قرار داده شده و میتونین با استفاده از لینکی که قرار داده ...

0 3 ۱۵ خرداد ۹۵ در جلسه بیست و ششم دوره آموزش فریم ورک فاندیشن می پرداریم به پیاده سازی بخش پنجم پروژه نهایی این دوره و آنچه را که آموختیم رو در قالب یک پروژه کاملا کاربردی پیاده سازی خواهیم کرد در این جلسه می پردازیم به : تکمیل بخش اسلایدر توسط پلاگین animate.css معرفی و نحوه استفاده از پلاگین wow....

<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> <script src="http://code.highcharts.com/modules/drilldown.js"></script> <script src="http://code.h...

body { background: #1BBC9B; font-family: 'Montserrat', sans-serif; } .container { text-align: center; } h1 { color: #117964; font-weight: 400; font-size: 2em; margin: 1em 0; } /** * iPhone * Credits: Flat, Scaleable CSS iPhone Illustration by Tom Hergenreter * http://codepen.io/TomHergenreter/detail...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که برگه راهنمای کاملی برای Ecmascript 6 در اختیارتون قرار میده و میتونین از اون استفاده کنید و روشها و ترفندها و بهترین نمونه ها و نمونه کدها رو ببینید و از اونا استفاده کنید و کدهایی با performance بالاتر بسازید و سایتتون رو بهینه تر کنید. این صفحه در مور...

0 21 ۱۱ خرداد ۹۵ در جلسه بیست و پنجم دوره آموزش فریم ورک فاندیشن می پرداریم به پیاده سازی بخش چهارم پروژه نهایی این دوره و آنچه را که آموختیم رو در قالب یک پروژه کاملا کاربردی پیاده سازی خواهیم کرد در این جلسه می پردازیم به : پیاذه سازی بخش جستجو قالب پیاده سازی بخش slider قالب معرفی و بررسی پلاگین ...

در این قسمت میخوام یک کد ( SVG Low PolyLion ) جالب رو در اختیارتون بزارم. همونطور که دیدید شکل شیر رو با استفاده از polygon ساخته شده و افکت انیمیشنی برای اون قرار داده شده. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت ...