انیمیشن inline در SVG

  • بوسیله: محسن شفیعی
  • در 1393/01/06 - 15:50
  • نظرات (4)
Scalable Vector Graphics

Scalable Vector Graphics

اشکال موجود در SVG را به چندین روش میتوان به حالت animation در آورد که در این مطلب ما با تگ animate و تگهای مشابه آن کار خواهیم کرد و خصوصیات آن را شرح میدهیم.

در این مطلب علاوه بر انیمیشن inline کمی نیز با نحوه رسم اشکال در SVG آشنا میشویم.

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

(بیشتر…)

شناسایی پشتیبانی مرورگرها در CSS3 با استفاده از supports@

  • بوسیله: محسن شفیعی
  • در 1392/11/19 - 13:45
  • نظرات (5)
CSS3 - سی اس اس 3

CSS3 – سی اس اس 3

قبلاً در مطلبی، با عنوان ویژگی‌های جدید در مرورگر کروم، نگاهی کوتاه به ویژگی supports@ در CSS3 داشتیم. با استفاده از این قانون میتوانید بفهمید که آیا مرورگر از ویژگی مورد نظر شما در CSS پشتیبانی میکند یا خیر. با استفاده از این ویژگی دیگر نیازی به کتابخانه‌هایی مانند Modernizr نداریم.
در این مطلب این ویژگی را به صورت دقیقتری بررسی میکنیم.
در ادامه مطلب همراه ما باشید…

(بیشتر…)

مقدمه‌ای بر عناصر سه بعدی – بخش سوم

  • بوسیله: محسن شفیعی
  • در 1392/11/12 - 16:57
  • نظرات (3)
CSS3 - سی اس اس 3

CSS3 – سی اس اس 3

در دو مطلب قبلی که بیشتر شامل مقدمات کار بود با نحوه کار با 3D transform و برخی توابع آن آشنا شدیم. در این مطلب میخواهیم در عمل با این ویژگی CSS3 کار کنیم. در ادامه مطلب همراه ما باشید…

مشاهده دمو (بیشتر…)

انیمیشن در CSS3

  • بوسیله: محسن شفیعی
  • در 1392/10/27 - 12:03
  • نظرات (5)
CSS3

CSS3

با استفاده از CSS animations میتوان یک عنصر را به صورت انیمشینی از نوعی به نوع دیگری تبدیل کرد. انیمشین ها شامل دو جزء هستند، یکی کدهای CSS که استایل عنصر را مشخص میکند و دیگری keyframeها که نقاط شروع، پایان یا بین آن‌ها را مشخص میکند.

استفاده از انیمشین در CSS3 نیازی با یاد داشتن JavaScript ندارد در حالی که انیمیشن ها در CSS دارای کارایی بالاتری از انیمیشن هایی هستند که با استفاده از JavaScript نوشته میشوند.

در ادامه مطلب همراه ما باشید

(بیشتر…)

فونت های اصلاح شده فارسی

  • بوسیله: محسن شفیعی
  • در 1392/10/22 - 18:30
  • نظرات (14)
Fonts

Fonts

سازمان تولید و سازماندهی  محتوای الکترونیکی ایران، دست به استاندارد سازی فونت های فارسی زده است. به نقل از این سازمان:

39 فونت متنی و گرافیکی فارسی پس از اصلاح و استانداردسازی، برای استفاده علاقه‌مندان در وب‌گاه scict.ir ارائه شد.
به گزارش واحد ارتباطات دبیرخانه شورای عالی اطلاع‌رسانی، فونت‌های فارسی اغلب در انطباق با استانداردهای ملی و بین‌المللی و همچنین از نظر قواعد زیباشناختی، کاستی‌های بسیاری دارند. از این رو کارگروه خط و زبان فارسی در محیط رایانه‌ای دبیرخانه شورای عالی اطلاع‌رسانی، اصلاح و استاندارسازی 39 خانواده فونت فارسی را در دستور کار خود قرار داد.

از مهم‌ترین ویژگی‌ فونت‌های اصلاح شده می‌توان به تنظیم درهم‌رفتگی (kerning) حروف و کاهش تقریبا 10 درصدی طول متن در برخی فونت‌ها اشاره کرد که در کنار افزایش زیبایی متن، کاهش حجم صفحات یک کتاب، کاهش مصرف کاغذ و هزینه را موجب می‌شود.

پشتیبانی از نیازهای خاص زبان‌های هم‌خانواده فارسی مانند عربی، پشتو، اردو و کردی نیز از دیگر ویژگی‌ فونت‌های اصلاح شده محسوب می‌شود که با چنین رویکردی شاهد حفظ و افزایش نفوذ فرهنگی در کشورهایی که از این زبان‌ها استفاده می‌کنند، خواهیم بود.

تصحیح محل اعراب، امکان درج فونت در فایل‌های PDF، مطابقت با آخرین نسخه استاندارد یونی‌کد، استاندارد ملی 6219، استاندارد‌ Adobe Glyph Naming  نیز در فونت‌های یاد شده انجام شده است.

همچنین مناسب سازی حالت نرمال 10 فونت از این مجموعه مانند لوتوس، بدر و نازنین برای استفاده در وب در اندازه 5 Pt انجام شده است.

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

آپارنت نسخه های eot و woff این فونت ها را آماده کرده است و شما میتوانید از این پس از این فونت های اصلاح شده در تمامی مرورگرها استفاده کنید.

برای دانلود و نحوه استفاده از فونت به صورت Cross-Browser به ادامه مطلب بروید.

(بیشتر…)

آموزش ساخت سوئیچ در CSS3

  • بوسیله: محسن شفیعی
  • در 1392/10/18 - 21:38
  • نظرات (5)
CSS3 - سی اس اس 3

CSS3 – سی اس اس 3

در این مطلب میخواهیم نحوه ساخت سوئیچ با ساختار انیمیشنی، آنهم تنها با استفاده از CSS3 بپردازیم. سوئیچ در‌ واقع همان چک باکس است که ما قرار است آن را به صورت آن چیزی که بیشتر در موبایل های هوشمند شاهد آن هستیم تبدیل کنیم.

مشاهده دمو

در ادامه مطلب همراه ما باشید

(بیشتر…)

آموزش استفاده از CSS3 PIE

  • بوسیله: محسن شفیعی
  • در 1392/10/13 - 22:15
  • نظرات (2)
CSS3 PIE

CSS3 PIE

یکی از دغدغه های اصلی طراحان وب و Front End Developerها مخصوصاً در ایران، نمایش درست سایت در مرورگرهای قدیمی به‌ خصوص IE6 تا 9 است. حالا که با آمدن CSS3 قابلیت‌های خیلی زیادی به CSS اضافه شده است، نمیتوان از همه آن‌ها در طراحی سایت دست کشید، آن هم فقط به خاطر اینکه در مرورگرهای پایین جواب نمیدهد.

حال با استفاده از کتابخانه CSS3 PIE میتوانیم بعضی از قابلیت‌های CSS3 را در مرورگر های IE6 تا 9 هم استفاده کنیم.

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

(بیشتر…)

معرفی API تمام صفحه (full screen) در HTML5

  • بوسیله: محسن شفیعی
  • در 1392/10/08 - 18:32
  • یک نظر
Full screen api

Full screen api

با استفاده از API تمام صفحه یا Full screen در HTML5 میتوانید سایت یا حتی عنصری مشخص را به صورت تمام صفحه به کاربر نمایش دهید. اینکار مخصوصاً در موبایل ها برای ایجاد تمرکز بیشتر کاربر، بر روی سایت، یا عنصر مربوطه، بسیار خوب است.

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

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

(بیشتر…)

آموزش ساخت ایمیل ریسپانسیو

  • بوسیله: محسن شفیعی
  • در 1392/10/02 - 17:32
  • نظرات (8)
ایمیل ریسپانسیو

ایمیل ریسپانسیو

در این پست آموزش ساخت ایمیل به صورت ریسپانسیو داده خواهد شد به صورتی که در تمام سرویس های ایمیل، شامل گوشی های هوشمند و اپلیکیشن های ایمیل درست نمایش داده شود. در این روش میخواهیم تا حد امکان از مدیا کوئری ها کمتر استفاده کنیم و قالب را به صورت شناور (fluid) طراحی کنیم.

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

(بیشتر…)

منوی های ریسپانسیو – نوع اول

  • بوسیله: محسن شفیعی
  • در 1392/09/06 - 12:27
  • نظرات (9)
طراحی رسپانسیو

طراحی رسپانسیو

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

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

(بیشتر…)