شرح تابع های خاصیت transition

  • بوسیله: محسن شفیعی
  • در 1391/10/21 - 21:04
  • نظرات (2)

همانطور که میدانید خاصیت transition دارای تایع های مختلفی به نام های ease, ease-in, ease-out ease-in-out, linear و cubic-bezier است.
در این مطلب به شرح چگونگی کار این تابع ها میپردازیم.

 


تابع ease

شرح تابع های خاصیت transition

شرح تابع های خاصیت transition

آموزش قدم به قدم طراحی ریسپانسیو یک سایت کامل

  • بوسیله: محسن شفیعی
  • در 1391/10/21 - 11:52
  • نظرات (67)
آموزش قدم به قدم طراحی ریسپانسیو یک سایت کامل

آموزش قدم به قدم طراحی ریسپانسیو یک سایت کامل

ابتدا توصیه میکنیم حتما مطالب “ طراحی ریسپانسیو (Responsive) چیست؟” و ” آموزش طراحی ریسپانسیو” را بخوانید.

در این آموزش به شما نشان خواهیم داد که چگونه باید یک سایت ریسپانسیو درست کرد. سایتی که در همه رزولیشن ها به خوبی نمایش داده شود.

هدف پروژه: درباره من


ایجاد کردن سند

صفحه رو با doctype HTML5 و متا تگ ها آغاز کردیم. اما در طراحی ریسپانسیو ما نیاز به نصب کامپوننت های اضافی خواهیم داشت. بیشتر این متا تگ ها توسط مرورگرهای مدرن پشتیبانی میشوند.
(بیشتر…)

حل مشکل پشتیبانی نشدن عناصر HTML5 در IE

  • بوسیله: محسن شفیعی
  • در 1391/10/20 - 18:14
  • یک نظر

در مطلب نگاهی به عناصر HTML5 ما بعضی از عناصر header, footer و nav را بررسی کردیم. با این حال وقتی شما به این عناصر در مرورگرهای قدیمی مانند IE8 استایل مورد نظر خود را اعمال میکنید هیچ گونه تغییری در صفحه شما ایجاد نخواهد شد چون مرورگر IE8 برای HTML5 ساخته نشده است.

برای مثال تصویر زیر گویای این حرف است:

حل مشکل پشتیبانی نشدن عناصر HTML5 در IE

حل مشکل پشتیبانی نشدن عناصر HTML5 در IE

تصویر بالا گویای همه چیز است. اما چگونه این مشکل را رفع کنیم.

در ادامه با ما همراه باشید…

(بیشتر…)

پیداکردن قابلیت های مرورگرها

  • بوسیله: محسن شفیعی
  • در 1391/10/20 - 17:48
  • نظرات (6)
پیدا کردن قابلیت های مرورگرها

پیدا کردن قابلیت های مرورگرها

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

حالا چگونه باید از قابلیت های مرورگرها مطلع شویم. سایت جامع Can I Use میتواند به شما در این زمینه کمک کند. این سایت قابلیت های جدید مختلف را مانند CSS3 و HTML5 را در مورد مرورگرهای مختلف بررسی کرده است.

Can I Use

نسخه جدید فایرفاکس با 25% بهبود در اجرای جاوا اسکریپت

  • بوسیله: محسن شفیعی
  • در 1391/10/19 - 19:45
  • دیدگاه‌ها برای نسخه جدید فایرفاکس با 25% بهبود در اجرای جاوا اسکریپت بسته هستند

نسخه جدید فایرفاکس 18

نسخه جدید فایرفاکس 18


شرکت موزیلا امروز رسما نسخه 18 فایرفاکس را برای ویندوز, مک, لینوکس و اندورید منتشر کرد. بهبودهای انجام شده شامل کامپایلر جدید جاوااسکریپت, نسخه نمایش PDF, پشتیبانی از صفحه نمایش رتینا(در مک) و رویدادهای تاچ در موبایل ها.
بزرگترین تغییر در این نسخه انتشار نسخه جدید کامپایلر جاوا اسکریپت است. این کامپایلر جدید با نام lonMonkey منتشر شده است.
با استفاده از lonMonkey بازی ها و انیمیشن ها با 25% بهبود اجرا میشوند.
تغییرات انجام شده در این نسخه:
1- (جدید) کامپایلر جاوا اسکریپت lonMonkey با 25% بهبود
2- (جدید) پشتیبانی از صفحه نمایش رتینا در OS X 10.7 و بالاتر
3- (جدید) پشتیبانی مقدماتی از WebRTC
4- (تغییر) تجربه بهتر تصاویر با الگوریتم جدید
5- (تغییر) کارایی بهتر در زمان سوئیج بین تب ها
6- (توسعه دهنده) پشتیبانی از ساختار درختی جدید ویندوز devicePixelRatio.
7- (توسعه دهنده) بهبود در راه اندازی اولیه
8- (HTML5) پشتیبانی از رویدادهای تاچ با نام MozTouch
9- (تعمیر) غیرفعال کردن محتوای نا امن در صفحه های HTTPS
10-(تعمیر) بهبود رسپانسیو برای کاربران پراکسی

آموزش طراحی ریسپانسیو

  • بوسیله: محسن شفیعی
  • در 1391/10/19 - 17:20
  • نظرات (29)
آموزش طراجی ریسپانسیو

آموزش طراجی ریسپانسیو

در این مطلب به آموزش پایه ای طراحی ریسپانسیو خواهیم پرداخت.

اگر هنوز مطلب  “طراحی ریسپانسیو (Responsive) چیست؟” را نخواندید توصیه میکنم ابتدا آن را بخوانید.

برای آنکه بتوانیم یک سایت ریسپانسیو را درست به کاربر نمایش دهیم باید ابتدا اندازه نمایشگر کاربر را بگیریم و مطابق با اندازه نمایگشر کاربر, سایت را نمایش دهیم.

نترسید. ما برای همه نمایشگرها طراحی جداگانه ای انجام نمیدهیم. فقط برای نمایشگرهایی با اندازه های پایین:

320px (نمایشگرهایی که کمترین عرضشان 320px است).

480px (نمایشگرهایی که کمترین عرضشان 480px است).

600px (نمایشگرهایی که کمترین عرضشان 600px است).

768px (نمایشگرهایی که کمترین عرضشان 768px است).

900px (نمایشگرهایی که کمترین عرضشان 900px است).

1200px (نمایشگرهایی که کمترین عرضشان 1200px است).

(بیشتر…)

ساخت آیکن با استفاده از عناصر HTML

  • بوسیله: محسن شفیعی
  • در 1391/10/18 - 19:59
  • یک نظر
box shadow

box shadow

در CSS3 با استفاده از عناصر کاذب میتوان آیکن مانند آن چیزی که در ادامه خواهیم دید ساخت.
عناصر کاذب در ساختار درختی سند HTML شما وجود ندارند اما توسط CSS میتوان آنها را تولید کرد. اما ما به شما پیشنهاد میکنیم که خودتان آنها را اضافه کنید.
برای مثال مانند زیر عمل کنید:

<div class="”square”"></div>

و CSS را مانند زیر وارد کنید:

.square {
   position: relative;
   background: blue;
   width: 50px;
   height: 50px;
}
.square::before {
   position: absolute;
   left: -50px;
   content: '';
   height: 50px;
   width: 50px;
   display: block;
   background: green;
}
.square::after {
   position: absolute;
   left: 50px;
   content: '';
   height: 50px;
   width: 50px;
   display: block;
   background: red;
}

(بیشتر…)

همه چیزی که باید درباره Transitions در CSS بدانید

  • بوسیله: محسن شفیعی
  • در 1391/10/17 - 19:49
  • دیدگاه‌ها برای همه چیزی که باید درباره Transitions در CSS بدانید بسته هستند
متحرک سازی در CSS

متحرک سازی در CSS

Transitions راهی ساده و زیبا برای انتقال یک عنصر به صورت انیمیشن است.

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


پشتیبانی مرورگرها

Transitions عملا در همه نسخه های Firefox, Safari و Chrome پشتیبانی میشود.و همچنین در IE10 و نسخه های بعد از آن.

مرورگرهای بر اساس Webkit که شامل Chrome و Safari میشوند از پیشوند -webkit- برای شناسایی این کدها استفاده میکنند. اما بزودی این خطا رفع میشود تا با استاندارد W3 یکسان شود.

 


استفاده از Transitions

راه ساده برای استفاده از Transitions استفاده از شبه کلاس ها مانند hover: است. که در آن باید نام خواص و مدت زمان اجرای انیمیشن و تابع انیمیشن تعیین شود.

برای مثال:

در ادامه همراه ما باشید…

(بیشتر…)

استایل دادن به عناصر فرم – بخش دوم

  • بوسیله: محسن شفیعی
  • در 1391/10/17 - 11:44
  • یک نظر
استایل دادن به عناصر فرم

استایل دادن به عناصر فرم

در این بخش که ادامه بخش اول استایل دادن به عناصر فرم است به آموزش استایل دادن به عناصر file  میپردازیم.

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

 


عنصر file

ابتدا عنصر را در صفحه میگذاریم.

<label>ارسال مدارک:</label>
<div class="refile">انتخاب کنید<div></div></div>
<input class="file" type="file" />

در ادامه با ما همراه باشید…

(بیشتر…)