لودینگ های زیبا با css3

  • بوسیله: جاوید خانلو
  • در 1394/05/05 - 18:35
  • نظرات (11)
لودینگ

لودینگ

 

در این پست به ارائه چند لودینگ css3 خواهیم پرداخت که امیدواریم از این لودینگ ها لذت و بهره کافی را ببرید لطفا در ادامه همراه ما باشید……

 

(بیشتر…)

متحرک کردن تصویر با استفاده از 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 پشتیبانی نمیشود، و به نظر میرسد زمان یادگیری این ویژگی فرارسیده است.

(بیشتر…)

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

(بیشتر…)

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

  • بوسیله: محسن شفیعی
  • در 1392/07/28 - 21:37
  • دیدگاه‌ها برای مقدمه ای بر عناصر سه بعدی در CSS3 – بخش دوم بسته هستند
CSS3 - سی اس اس 3

CSS3 – سی اس اس 3

در مطلب اول این سری از مباحث در مورد perspective و perspective-origin صحبت کردیم. اما در این مطلب به توابع 3D transform خواهیم پرداخت. احتمالا شما با توابع rotateX یا rotateY آشنا هستید که به عنوان توابع 2D transform شناخته میشوند و در محیط دو بعدی کاربرد دارند. در این مطلب در مورد توابع سه بعدی بیشتر صحبت خواهیم کرد.

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

(بیشتر…)

Border Corner Shape در CSS3

  • بوسیله: محسن شفیعی
  • در 1392/07/08 - 18:16
  • نظرات (5)
Border Corner Shape

Border Corner Shape

احتمالا شما با خاصیت border-radius آشنا هستید. توسط این خاصیت در CSS3 براحتی میتوان گوشه های گرد برای عناصر ساخت. اما اگر بخواهیم این گوشه ها گرد نباشند چه کاری باید بکنیم؟!

توسط خاصیت border-corner-shape میتوان نوع گوشه ها را مشخص کرد، که انواع آن را میتوانید در تصویر ابتدای همین پست ببینید.

در ادامه همراه ما باشید تا از آن استفاده کنیم…

(بیشتر…)

  • صفحه 1 از 4
  • 1
  • 2
  • 3
  • 4
  • <