آموزش ساخت لودینگ با استفاده از css3

  • بوسیله: جاوید خانلو
  • در 1391/12/10 - 15:28
  • نظرات (6)

loading using css3

loading using css3


معمولا ساخت لودینگ با نرم افزار فلش برای کاربران عادی کار ساده ای نیست و باید وقت زیادی را صرف ساخت یک لودینگ ساده بکنند بنابر این تصمیم گرفتیم در این پست ساخت لودینگ با استفاده از css3 را آموزش دهیم.
(بیشتر…)

نحوه استفاده از Absolute در CSS

  • بوسیله: محسن شفیعی
  • در 1391/12/05 - 13:46
  • نظرات (7)
CSS

CSS

در مورده استفاده از خاصیت absolute برای بعضی از طراحان وب سردرگمی هایی وجود دارد. برای مثال زمانی که شما یک عنصر با خاصیت absolute را تعریف میکنید و با استفاده از خاصیت های top و left به آن مختصات میدهید مقادیر top و left بر اساس کل صفحه تعیین میشوند نه بر اساس عنصر والد که این کار در رزولویشن های دیگر به باعث بوجود آمدن مشکل میشود.

نحوه استفاده از خاصیت absolute به این ترتیب است که یک عنصر با خاصیت absolute باید درون یک عنصر با خاصیت relative قرار بگیرد.

(بیشتر…)

حل مشکل Padding با استفاده از box-sizing

  • بوسیله: محسن شفیعی
  • در 1391/12/01 - 18:38
  • یک نظر
CSS3

CSS3

یکی از دردسرهایی که گریبان هر طراح وبی را میگیرد مشکل با Padding است. برای مثال شما عرض یک div را مشخص میکنید و در خط بعد به آن Padding میدهید و میبینید که مقدار Padding به ارتفاع و عرض آن اضافه میشود که برای حل این مشکل اغلب طراحان وب دوباره می آیند و از عرض و ارتفاع دایو کم میکنند که کمی دردسر دارد.

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

(بیشتر…)

مجموعه بزرگی از آیکون فونت ها

  • بوسیله: محسن شفیعی
  • در 1391/11/22 - 11:04
  • دیدگاه‌ها برای مجموعه بزرگی از آیکون فونت ها بسته هستند
مجموعه بزرگی از آیکون فونت ها

مجموعه بزرگی از آیکون فونت ها

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

(بیشتر…)

معرفی Slectorهای جدید CSS3

  • بوسیله: محسن شفیعی
  • در 1391/11/10 - 12:10
  • دیدگاه‌ها برای معرفی Slectorهای جدید CSS3 بسته هستند
معرفی Slectorهای جدید CSS3

معرفی Slectorهای جدید CSS3

ترکیب منطقی با استفاده از :NOT و :MATCHES

بوسیله matches: میتوانید گروهی از کلاس ها یا عناصر کاذب را به صورت یک گروه دربیاورید که خوانایی کد را بالا میبرد. برای مثال ما به جای اینکه کد زیر را بنویسیم:

p.green,p.blue{
    background:red;
}

 
به صورت زیر مینویسیم:

p:matches(.green, .blue){
    background:red;
}

 

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

  (بیشتر…)

طراحی ریسپانسیو یک سایت دیگر

  • بوسیله: محسن شفیعی
  • در 1391/11/05 - 17:35
  • نظرات (5)
آموزش طراجی رسپانسیو

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

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

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

البته این را نیز یادآور میشوم که بهترین کار برای یادگیری عمل کردن است.

دوباره بعضی نکات باید یادآوری شود.

برای اینکه مدیا کوئری ها و عناصر جدید HTML5 در مرورگرهای قدیمی مانند IE8 و IE7 به درستی عمل کنند ما دو کتابخانه css3-mediaqueries.js و html5shim را برای این دو مرورگر فراخوانی میکنیم.

  (بیشتر…)

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

  • بوسیله: محسن شفیعی
  • در 1391/11/03 - 22:28
  • نظرات (6)
طراحی ریسپانسیو در ایران

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

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

اگر سری با سایت های خارجی بزنید میبینید که اغلب سایت هایی که دارای طراحی جدید هستند(تازه طراحی شده اند) از طراحی ریسپانسیو کمک گرفته اند. ما در آپارنت مطالب زیادی را در این مورد گذاشتیم و به شرح آموزش های این طراحی از جنبه های مختلف کردیم. اما ریسپانسیو در ایران چطور است؟

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

(بیشتر…)

آموزش طراحی ریسپانسیو – فونت ها

  • بوسیله: محسن شفیعی
  • در 1391/10/28 - 23:08
  • نظرات (6)
آموزش طراحی ریسپانسیو – قدم اول

آموزش طراحی ریسپانسیو – قدم اول

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

برای درک طراحی ریسپانسیو ابتدا مطالب طراحی ریسپانسیو (Responsive) چیست؟ و آموزش طراحی ریسپانسیو را بخوانید.

در قدم اول ما در طراحی ریسپانسیو باید اندازه تمام فونت هایمان را از واحد px به واحد em تبدیل کنیم.

در واقع em بر اساس میزان بزرگی یا کوچک بودن والد, اندازه خود را نیز تغییر میدهد و این همان چیزی است که ما آن را لازم داریم. زیرا میخواهیم در دستگاه های کوچکتر مانند موبایل اندازه فونت ها به صورت خودکار تنظیم شود.

(بیشتر…)

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

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

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

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

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

(بیشتر…)

ایجاد تصاویر ریسپانسیو با Jquery و PHP

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

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

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

همانطور که میدانید در طراحی ریسپانسیو سایت ما در همه رزولویشن ها باید به درستی نمایش داده شود. خب شما براحتی با استفاده از Media Query میتوانید شرط هایی بزارید و اندازه متن و دایوهاتون رو بر اساس سایز نمایشگر کاربر کم یا زیاد بکنید. اما نکته قابل توجه عکس های شماست.

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

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

(بیشتر…)