نکته سریع: گرادینت های پیچیده با CSS3

  • بوسیله: محسن شفیعی
  • در 1392/01/18 - 23:56
  • نظرات (3)
CSS3 - سی اس اس 3

CSS3 – سی اس اس 3

آیا تا به حال فکر کرده اید که با استفاده از گرداینت ها در CSS3 چه تصاویر پیچیده ای میتوان ساخت.  در واقع با استفاده از گرادینت ها و همینطور background-size میتوان تصاویر خلاقانه ای درست کرد. Lea Verou در سایتش تعدادی از این گرادینت های پیچیده را آرشیو کرده است. نکته جالب در این سایت این است که میزان حجم اشغال کننده این کدها را نیز به بایت نمایش میدهد.

همچنین شما میتوانید گرادینت هایی که خودتان آنها را درست کردید را نیز از طریق gitHub اطلاع دهید تا آرشیو شود.

ایجاد بکگراند راه راه متحرک

  • بوسیله: محسن شفیعی
  • در 1391/12/19 - 20:19
  • نظرات (3)
CSS3

CSS3

باکس های بزرگ موجود در سایت Uniqlo.com نوعی طراحی زیبایی وجود دارد که زمانی که ماوس را روی آن میبریم بکگراند راه راه سیاه و سفید به صورت متحرک به نمایش در می آید. البته این سایت این کار را با استفاده از یک عکس gif درست کرده است. شاید به این دلیل که در همه مرورگر ها به درستی نمایش در بیاید. با اینکه حجم این عکس 4K است اما باز هم یک درخواست HTTP به حساب می آید و ما میخواهیم آن را با استفاده از CSS درست کنیم.

نکته مورد نظر این است که من این دمو را علاوه بر استاندارد W3 بر اساس مرورگر کروم هم نوشتم. مرورگرهای دیگر را خودتان زحمت بکشید.

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

(بیشتر…)

گرادینت ها در CSS3

  • بوسیله: محسن شفیعی
  • در 1391/10/24 - 21:35
  • دیدگاه‌ها برای گرادینت ها در CSS3 بسته هستند
گرادینت ها در CSS

گرادینت ها در CSS

همانطور که میدانید قابلیت جدیدی که در CSS3 اضافه شده است و بسیار در نزد طراحان وب معروف است استفاده از گرادینت ها یا طیف رنگی است.

در این مطلب نحوه استفاده از این قابلیت را خواهیم دید.

(بیشتر…)