قرار دادن سه نقطه در انتهای متن های طولانی

  • بوسیله: محسن شفیعی
  • در 1392/03/07 - 12:59
  • نظرات (7)
CSS3 - سی اس اس 3

CSS3 – سی اس اس 3

قرار دادن سه نقطه در انتهای متن های طولانی

یکی از خاصیت هایی که در CSS از طرف توسعه دهندگان نادیده گرفته شده است خاصیت text-overflow است. توسط این خاصیت میتوان مشخص کرد که در صورتی متن overflow شود چه کاری باید انجام شود.

این خاصیت یک مقدار به نام ellipsis میگیرد که باعث بوجود آمده سه نقطه در متن های طولانی میشود, که انتهای آنها دیده نمیشود. اما استفاده تنها از این خاصیت کارساز نیست.

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

(بیشتر…)

تشخیص جهت نمایشگر در CSS3

  • بوسیله: محسن شفیعی
  • در 1392/02/27 - 17:46
  • نظرات (3)
CSS3

CSS3

همانطور که میدانید امروزه اکثر موبایل ها و تبلت ها دارای دو نوع نمایش هستند. نمایش Landscape یا افقی و نمایش Portrait یا عمودی

برای تشخیص اینکه در حال حاظر کدام نمایش فعال است میتوان از Media Queryهای CSS3 استفاده کرد.

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

(بیشتر…)

5 نکته برای بالابردن کارایی CSS و JavaScript

  • بوسیله: محسن شفیعی
  • در 1392/02/25 - 13:07
  • نظرات (5)
راهکارهای افزایش لود صفحات وب

راهکارهای افزایش لود صفحات وب

آیا شده که مشتری رو به خاطر دیر لود شدن سایت در مرورگر از دست بدهید؟ اما منظور ما در اینجا اندازه فایل نیست بلکه مقدار زمانی است که مرورگر صرف فهمیدن و انجام دادن کدهای میکند.

در این مطلب به نکاتی اشاره میکنیم که رعایت آنها باعث میشود مروگر زمان کمتری را برای اجرای کدهای ما اختصاص دهد. (بیشتر…)

شبه عناصر (Pseudo Element) در CSS3

  • بوسیله: محسن شفیعی
  • در 1392/02/19 - 16:27
  • نظرات (2)
CSS

CSS

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

Syntax

Syntax

در CSS2.1 شبه عناصر با یک دو نقطه مانند شبه کلاس ها انتخاب میشدند. اما در CSS3 شبه عناصر با دو دو نقطه انتخاب میشوند. اما به دلیل اینکه در تمام مروگرها کار کند ما از همان یک دو نقطه استفاده میکنیم. اما همان طور که میبینید به دلیل اینکه شبه عنصر selection در CSS3 معرفی شده فقط با دو نقطه نوشته میشود.

در ادامه مطلب به معرفی چند تا از شبه عناصر می پردازیم.

(بیشتر…)

شبه کلاس ها (Pseudo-Classes) در CSS3

  • بوسیله: محسن شفیعی
  • در 1392/02/04 - 19:44
  • یک نظر
شبه کلاس ها - Pseudo Classes

شبه کلاس ها – Pseudo Classes

Pseudo-Classes یا شبه کلاس ها برای انتخاب عناصر بدون دادن کلاس, آیدی یا خاصیت اضافی به آنها استفاده میشوند. در این مطلب تعدادی از آنها را آموزش میدهیم و در مطالب بعدی کامل خواهیم کرد.

(بیشتر…)

خاصیت filter در CSS

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

CSS3

با استفاده از خاصیت filter در CSS میتوان عملیاتی مانند تار کردن, سیاه و سفید کردن, کنتراست و … را روی تصاویر سفارشی کرد.

این خاصیت فعلا توسط مروگر کروم و سافاری پشتیبانی میشود. Caniuse

در این مطلب قرار است توابع موجود در خاصیت filter را با هم بررسی کنیم.

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

(بیشتر…)

آموزش پشت و رو کردن 3D یک عنصر با Transform

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

CSS3

شاید در بعضی از سایت ها دیده باشید که با کلیک روی یک عنصر, آن عنصر پشت و رو میشود و طرف دیگر آن به شکل زیبایی نمایش داده میشود. اینکار با استفاده از CSS3 و خاصیت Transform انجام میشود. در ادامه با ما همراه باشید…

(بیشتر…)

مدیا کوئری های توصیه شده در طراحی ریسپانسیو

  • بوسیله: محسن شفیعی
  • در 1392/01/23 - 16:02
  • نظرات (4)
آموزش طراجی رسپانسیو

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

اگر شما از آن دسته از کسانی هستید که میخواهید به تازگی از طراحی ریسپانسیو در پروژه های خود استفاده کنید حتما با این سوال روبرو شده اید که از کدام مدیا کوئری ها (Media Query) باید استفاده کرد؟

در این مطلب به معرفی مدیا کوئری های توصیه شده میپردازیم. در ادامه با ما باشید…

(بیشتر…)

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

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

CSS3 – سی اس اس 3

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

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