خلاصی از دردسر Prefixها در CSS

  • بوسیله: محسن شفیعی
  • در 1394/05/02 - 0:21
  • نظرات (2)
CSS3

CSS3

در زبان CSS همیشه باید بررسی کنیم که کدی که در حال نوشتن هستیم، در تمام مرورگرها به درستی کار کند، بعضی مواقع واقعاً موجب دردسر هستند!

اما راهکار بسیار ساده‌ایی برای رهایی از نوشتن Prefixها در CSS وجود دارد، به این صورت که ما کد استاندارد را مینویسیم، و کد مخصوص مرورگرهای مختلف را بوسیله برنامه Autoprefixer تولید میکنیم.

(بیشتر…)

آشنایی با واحد اندازه گیری rem

  • بوسیله: محسن شفیعی
  • در 1393/02/23 - 12:27
  • نظرات (10)
CSS3 - سی اس اس 3

CSS3 – سی اس اس 3

احتمالا بیشتر شما با واحدهای اندازه گیری مختلفی در CSS آشنا هستید که البته معروف ترین آنها px است و همچنین واحدی که در چند سال گذشته حرف آن زیاد به گوش رسیده واحد em است. در این مطلب ما قبلا با واحد اندازه گیری em آشنا شدیم. این واحد به صورت relative کار میکند و بر اساس مقدار اندازه والد عمل میکند که همین نکته باعث میشود مشکلاتی در استفاده از این واحد در font-size بوجود آید.

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

متحرک کردن تصویر با استفاده از CSS Keyframes

  • بوسیله: محسن شفیعی
  • در 1393/02/16 - 12:00
  • نظرات (13)
Animation

Animation

فرمت gif یکی از فرمت های رایج تصویری در وب است که بیشترین استفاده آن زمانی است که بخواهیم یک تصویر متحرک یا به صورت انیمیشن را نمایش دهیم. اما این فرمت برخلاف رایج بودن آن اصلا فرمت خوبی نیست و دارای حجم های بالایی نیز است و همچنین از تعداد رنگ پایینی پشتیبانی میکند. برای مثال Matt در این سایت یک عکس با فرمت gif را گذاشته است که دارای 1.7MB حجم است، در حالی که همان عکس با فرمت ویدیویی WebM دارای فقط 94KB است.

ما در مطلبی در گذشته با animation در CSS3 آشنا شدیم و این مطلب تنها برای مطرح کردن یک ایده است و حاوی کد جدیدی نیست. در این مطلب ما قصد داریم ببینیم که چگونه میتوان با استفاده از animation در CSS3 یک تصویر متحرک بسازیم.

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

(بیشتر…)

فلکس باکس: آینده لی‌ اوت در CSS

  • بوسیله: محسن شفیعی
  • در 1393/02/09 - 22:21
  • یک نظر
CSS3 - سی اس اس 3

CSS3 – سی اس اس 3

فلکس باکس یا بگذارید بهتر بگوییم Flexbox، مجموعه ای از دستورات یا یک ماژول به حساب می آید که طراحان با استفاده از آنها میتوانند Layoutهای قابل انعطاف یا به نوعی شناور را به راحتی درست کنند که پیچیدگی های سیستم های دیگر را به شدت کاهش میدهد. وضعیت پشتیبانی این ویژگی، الان تنها در Opera mini پشتیبانی نمیشود، و به نظر میرسد زمان یادگیری این ویژگی فرارسیده است.

(بیشتر…)

OOCSS چیست؟

  • بوسیله: محسن شفیعی
  • در 1393/01/20 - 9:59
  • نظرات (4)
OOCSS

OOCSS

حتما با واژه و روش برنامه نویسی شی گرایی در زبان های برنامه نویسی آشنا هستید، حالا  اگر بگوییم روش شی گرایی در نوشتن کدهای CSS هم وجود دارد، واکنش شما چیست؟ OOCSS در واقع مخفف Object Oriented CSS است. واژه شی گرایی در CSS ممکن است واژه جدیدی باشد که البته اگر سال 2009 را جدید بدانیم زیرا واژه OOCSS در سال 2009 توسط Nicole Sullivan ایجاد گردید، ممکن است خود شما در حال استفاده از آن باشید.

برای آشنایی بیشتر در ادامه مطلب همراه ما باشید…

(بیشتر…)

شناسایی پشتیبانی مرورگرها در 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 نوشته میشوند.

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

(بیشتر…)

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

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

CSS3 – سی اس اس 3

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

مشاهده دمو

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

(بیشتر…)

وراثت در CSS3

  • بوسیله: محسن شفیعی
  • در 1392/08/05 - 12:22
  • یک نظر
CSS3 - سی اس اس 3

CSS3 – سی اس اس 3

استفاده از مدل آبشاری در نوشتن کدهای CSS کار راحتی است. بیشتر توسعه دهندگان از با کلمه کلیدی inherit آشنا هستند. اما در این مطلب میخواهیم بیشتر با وراثت در CSS3 آشنا شویم.

(بیشتر…)