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

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

(بیشتر…)

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

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

CSS3 – سی اس اس 3

CSS3 درهای جدیدی را به روی طراحان وب باز کرده است. یکی از خصوصیت های پرطرفدار و مهم اضافه شده در CSS3 خاصیت transform است. ممکن است شما با این خاصیت کار کرده باشید. برای مثال از توابعی مانند rotate، scale، translate  و … استفاده کرده باشید. اما ما در این سلسله از جلسات سراغ بخش سه بعدی transform میرویم.

منبع

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

(بیشتر…)

آموزش مقدماتی LESS

  • بوسیله: محسن شفیعی
  • در 1392/06/24 - 16:04
  • نظرات (4)
LESS

LESS

زبان CSS برای کسانی که با آن کار میکنند، واقعا یک زبان بسیار جالب است که کمتر کسی از آن خسته میشود و همیشه راه های جدیدی پیش روی ما میگذارد. اما یکی از معضلات زبان CSS این است که رفتار داینامیکی یا پویا ندارد، و بیشتر متمایل به یک زبان ایستا است. اما در جهت رفع این کارهایی شده است.

برای مثال در مطلب قبلی به نام “متغیرها در CSS“، شما میتوانید از متغیرها در زبان CSS استفاده کنید اما هنوز هیچ مرورگری به صورت کامل از آن پشتیبانی نمیکند و چند سالی طول خواهد کشید تا بتوان از آن استفاده کرد.

اما توسط پیش پردازنده هایی که برای زبان CSS توسعه داده شده، شما میتوانید با زبان CSS مانند یک زبان برنامه نویسی کار کنید که دارای متغیرها، توابع، عملیات ریاضی و … است. پیش پردازنده ها به این صورت کار میکنند که قبل از اینکه فایل CSS لود شود یا پس از لود شدن، کدهای نوشته شده شما را به زبان اصلی CSS تبدیل میکنند و سپس به مرورگر تحویل میدهند.

تا کنون پیش پردازنده هایی مانند SASS, Stylus و LESS ساخته شده اند که ما در این مطلب به آموزش مقدماتی LESS میپردازیم.

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

(بیشتر…)

متغیرها در CSS

  • بوسیله: محسن شفیعی
  • در 1392/06/23 - 20:15
  • نظرات (2)
CSS3 - سی اس اس 3

CSS3 – سی اس اس 3

اگر با پیش پردازنده های ساخته شده برای زبان CSS کار کرده باشید، حتما با یکی از مهمترین مزیت های استفاده از آنها یعنی متغیرها آشنا هستید. برای مثال کد یک رنگ را درون متغیر نگهداری میکنید و پس از آن هر کجا که خواستید از آن رنگ استفاده کنید، از متغیر استفاده میکنید. به این ترتیب اگر برای مثال نظرتان در مورد رنگ عوض شد و خواستید رنگ را عوض کنید کافیست مقدار متغیر را تعویض کنید تا بر روی کل سایت اعمال شود.

اما امروزه امکان استفاده از متغیرها به خود زبان CSS اضافه شده است، و شما میتوانید به صورت معمولی و بدون استفاده از پیش پردازنده ها از آن استفاده کنید.

(بیشتر…)

چگونه در مرورگر لاغر شویم!! – بخش اول

  • بوسیله: محسن شفیعی
  • در 1392/04/16 - 22:39
  • نظرات (7)
افزایش کارایی صفحات وب

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

در سایت browserdiet.com چندی از متخصصان وب از شرکت های مختلفی مانند تویتر، گوگل، اپرا و چند شرکت دیگر راهنمای سرگرم کننده ای درست کرده اند که رعایت آنها باعث افزایش کارایی صفحه وب شما میشود. این راهنماها در بخش های مختلفی اعم از HTML, CSS, JavaScript, jQuery, Images, Server است.

 در این مطلب به نکته هایی که در این سایت به آنها اشاره شده است میپردازیم. این مطلب کاربردی را از دست ندهید.

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

(بیشتر…)

تمپلیت برای قالبهای ریسپانسیو

  • بوسیله: محسن شفیعی
  • در 1392/03/12 - 23:04
  • نظرات (4)
طراحی رسپانسیو

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

بیشتر برنامه نویسان دارای یک تمپلیت برای کدهای خود هستند تا هر زمان که میخواهند یک پروژه جدید را استارت بزنند از ابتدا شروع به نوشتن نکند و در وقتشان صرفه جویی کنند. همچنین ایجاد تمپلیت باعث ایجاد نظم در برنامه ها و خطایابی بهتر آنها میشود. زیرا همه برنامه هایتان دارای یک ساختار مشخص هستند.

در ابن مطلب شما میتوانید یک تمپلیت برای قالب هایی که میخواهید توسط HTML5 و به صورت Responsive طراحی کنید دانلود کنید. این تمپلیت از نظر ظاهری کاملا خالی (Blank) است.

در این تمپلیت کدهای CSS Reset, Meida Query, متا تگ های مخصوص HTML5 و کدهای Font-Face به صورت پیشفرض موجود است. شما میتوانید از این تمپلیت برای قالب های HTML5 خود استفاده کنید.

در ادامه مطلب لینک دانلود موجود است.

(بیشتر…)