ایجاد تب منوی عمودی با استفاده از Css,JQuery

  • بوسیله: جاوید خانلو
  • در 1394/10/22 - 18:49
  • نظرات (10)
تب منوی عمودی

تب منوی عمودی

 

 

با سلام خدمت تمامی کاربران سایت آپارنت ، امیدواریم  تا این لحظه که با ما همراهید موفق و برنامه نویس باشید.

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

 

(بیشتر…)

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

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

لودینگ

 

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

 

(بیشتر…)

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

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

CSS3

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

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

(بیشتر…)

Remote debugging صفحات وب با Chrome

  • بوسیله: محسن شفیعی
  • در 1393/10/13 - 18:05
  • نظرات (9)
Remote debugging

Remote debugging

همیشه یکی از چالش های طراحی صفحات وب برای گوشی های هوشمند، تست و خطایابی آنها درون محیط واقعی آنها است. برای این مشکل، راه حل هایی البته وجود دارد. سایت های وجود دارند که عکسی از صفحه شما درون دستگاه های مختلف میدهند. همچنین پکیج هایی نیز برای زبان Node js نوشته شده است که میتوانید گوشی را به سیستم متصل کنید، که به این صورت کارتان را بسیار ساده تر میکنند.
اما اگر بخواهیم از این هم ساده تر سایت ریسپانسیو را درون گوشی یا تبلتمان چک کنیم، چه راه حلی وجود دارد؟ راه حل استفاده از مرورگر گوگل کروم است. این مرورگر از نسخه 32 به بعد قابلیتی به نام Remote debugging را به خودش اضافه کرده است که در آن به راحتی میتوانید گوشی را به سیستم متصل کنید و همچنین میتوانید سایت باز شده درون گوشی را از طریق سیستم inspect کنید.
در ادامه مطلب همراه ما باشید…

(بیشتر…)

کدام لایه بندی؟ استاتیک، شناور، تطبیقی یا واکنش گرا

  • بوسیله: محسن شفیعی
  • در 1393/05/25 - 22:49
  • نظرات (5)
طراحی وب

طراحی وب

زمانی که درباره لایه بندی (Layout) صفحات وب صحبت می‌شود با کلمه هایی نظیر استاتیک، شناور یا واکنش گرا (ریسپانسیو)، روبرو می‌شویم و اگر شما یک طراح یا برنامه نویس وب یا مدیر پروژه یا حتی یک مشتری هستید باید با این کلمات آشنا باشید و معنی و مفاهیم هر یک را بدانید.
به طور خلاصه نوع لایه بندی، نحوه رفتار سایت در نمایشگرهای مختلف با اندازه های متفاوت را مشخص میکند.
برای آشنایی با چهار نوع لایه بندی معروف و مورد استفاده در ادامه مطلب همراه ما باشید…

(بیشتر…)

طراحی به شیوه ابتدا موبایل (Mobile First)

  • بوسیله: محسن شفیعی
  • در 1393/03/14 - 23:12
  • نظرات (8)
Mobile First Web Design

Mobile First Web Design

شیوه ابتدا موبایل یا Mobile First یک نوع روش در طراحی ریسپانسیو است. ایده آن به اینصورت است که ما طراحی سایت را ابتدا تنها با یک ستون (مخصوص نمایشگرهای کوچک) شروع میکنیم. به این صورت سایت طراحی شده در همه دستگاه‌ها، رزولویشن ها و مرورگرها به خوبی نمایش داده می‌شود. مهم نیست که نمایشگر کاربر چه اندازه‌ای باشد، مهم این است که به راحتی میتواند محتوا را مشاهده کند.

زمانی که طراحی تنها با یک ستون به پایان رسید با استفاده از Media Queryها و JavaScript سایت را برای نمایشگرهای بزرگتر آماده میکنیم. برای مثال ستون‌های بیشتری اضافه میکنیم، عکس‌های با رزولویشن بالاتری را لود میکنیم و هر کاری که میخواهیم در نمایشگرهای بزرگتر انجام دهیم.

اما فواید این روش چیست؟ در ادامه مطلب همراه ما باشید…

(بیشتر…)

آشنایی با واحد اندازه گیری 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 ایجاد گردید، ممکن است خود شما در حال استفاده از آن باشید.

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

(بیشتر…)