تکنیک های طراحی

[rezakho]

در این تاپیک تکنیک های مرسوم فعلی در طراحی سایت های مختلف و معروف آموزش داده میشه، از دوستان می خوام که حق تالیف رو مد نظر داشته باشند.
مطالب در حوزه html, css, js, jquery, layout هست و همه کاربردی انشاالله.
هر پست مربوط به یک موضوع خاص میشه و مطلب های دیگه که پراکنده نوشتم هم میاد اینجا و دوستان پست جدید اضافه نکنند مگر مطلب آموزشی.
متشکر

[rezakho]

ترازبندی افقی و عمودی

خوب، برای ترازبندی افقی به این شکل عمل کنید

برای تگ هایی که دستور position آنها برابر static یا relative بود
اگر تگ inline بود، دستور text-align:center را به تگ والدش میدیم
اگر تگ block بود، margin چپ و راست خود تگ را برابر auto قرار میدیم

برای تگ هایی که دستور position آنها برابر absolute یا fixed بود
مقدار margin-left خود تگ را برابر منفی نصف اندازه عرض تگ و مقدار left را برابر %50 قرار میدیم

و برای ترازبندی عمودی به این شکل عمل کنید


برای تگ هایی که دستور position آنها برابر static یا relative بود
اگر تگ inline بود یکی از روش های زیر


از padding-top استفاده کنید و به مقدار padding-top از ارتفاع کم کنید
line-height رو برابر ارتفاع تگ قرار بدید

اگر تگ block بود یکی از روش های زیر

از padding-top استفاده کنید و به مقدار padding-top از ارتفاع کم کنید
به خود تگ دستورات display:table-cell; vertical-align:middle و به تگ والد این تگ دستور display:table رو بدید

برای تگ هایی که دستور position آنها برابر absolute یا fixed بود
مقدار margin-top خود تگ را برابر منفی نصف اندازه ارتفاع تگ و مقدار top را برابر %50 قرار میدیم


البته روش های دیگه هم هست که توضیحش کمی سخته و بعدا اضافه میشه!

[rezakho]

مفاهیم block, inline, box

تگ ها از نظر فضا و موقعیت قرارگیری به سه دسته اصلی تقسیم می شوند(البته موارد دیگه ای هم وجود داره که کاربرد زیادی ندارند)، این سه دسته عبارتند از


box
به تگ هایی گفته میشه که دستورات width , height بر روی آنها تاثیر می گذاره و عرض و ارتفاع میگیرند
margin و padding بر روی این تگ ها در همه اطراف تاثیر دارد


inline
به تگ هایی که درون خط و میان متون قرار میگیرند گفته میشه، مثل تگ b, u, span ...
این تگ ها box نیستند و عرض و ارتفاع بر آنها اثری ندارد
margin و padding بالا و پایین نیز بر روی این تگ ها تاثیری ندارد


block
به تگ هایی که در بین متون قرار نمیگیرند و کل یک خط را اشغال می کنند گفته میشه، مثل تگ های div, p, h1, h2, ...
این تگ ها همگی از نوع box هم هستند، یعنی ارتفاع و عرض میگیرند
این تگ ها همیشه کل خط را اشغال میکنند حتی اگر عرضی برابر 5 پیکسل داشته!
margin بالا و پایین این نوع تگ ها اگر هم نوع باشند هم پوشانی پیدا میکند
padding در همه جهات اثر دارد


دستور display در css میتونه این نوع تگ ها را به هم تبدیل کند

display:inline
این دستور تگ رو از هر نوعی به نوع inline تبدیل میکنه

display:block
این دستور تگ رو از هر نوعی به نوع block تبدیل میکنه

display:inline-block
این دستور تگ رو از هر نوعی به نوع box و inline تبدیل میکنه


display:none
این دستور تگ رو مخفی می کنه به صورتی که تگ نه فضایی اشغال میکنه و نه اثری روی layout صفحه داره

[rezakho]

کاربرد تگ های div و span

این دو تگ در واقع تگ های خام html هستند که برای هر نوع کاری می تونند استفاده بشند
به خاطر داشته باشید از نظر css تگ ها با هم تفاوتی ندارند(در بیش از 95 درصد موارد یا شاید هم بیشتر) و css می تونه ماهیت و ظاهر تگ ها و تغییر بده، ولی از نظر موتور های جستجو و مبحث SEO، تگ ها با هم فرق میکنند و یه موتور جستجو بین div و h1 فرق بسیار زیادی قائل هست

div
این تگ یک تگ خام block هست، بیشتر برای layout و ساختمان و اسکلت سایت استفاده میشه، در صورتی که محتوا نداشته باشه ارتفاعی برابر صفر داره، بدون border , padding , margin , ... هست، مهمترین تگ در طراحی بدون جدول table-less، همین تگ هست

span
این تگ، یک تگ خام inline هست، عرض و ارتفاع بر روی آن تاثیری نداره، و به اندازه محتوا بزرگ میشه و محتوا اشغال میکنه، بیشتر برای قالب بندی متون استفاده میشه، گاهی هم برای نمایش آیکون ها و تصاویر کوچک مورد استفاده قرار میگیره که برای اینکار ابتدا باید بتونه عرض و ارتفاع بگیره(به box و یا block تبدیل بشه)

[rezakho]

border, padding, margin, outline, dimension

dimension


height که وظیفه ارتفاع تگ (تگ های box) را به عهده دارد
width که وظیفه عرض تگ (تگ های box) را به عهده دارد
min-height که حداقل ارتفاع برای یه تگ (تگ های box) را مشخص میکند، یعنی تگ می تواند از این ارتفاع بزرگتر شود ولی هرگز کوچکتر نخواهد شد
min-width که حداقل عرض برای یه تگ (تگ های box) را مشخص میکند، یعنی تگ می تواند از این عرض بزرگتر شود ولی هرگز کوچکتر نخواهد شد
max-height که حداکثر ارتفاع برای یه تگ (تگ های box) را مشخص میکند، یعنی تگ می تواند از این ارتفاع کوچکتر شود ولی هرگز بزرگتر نخواهد شد
max-height که حداکثر عرض برای یه تگ (تگ های box) را مشخص میکند، یعنی تگ می تواند از این عرض کوچکتر شود ولی هرگز بزرگتر نخواهد شد

دقت داشته باشید که در min و max ها نباید height یا width داده شود! وگر نه min و max ها کار نخواهند کرد!


border
برای ایجاد یک قاب به دور هر تگی می تواند استفاده شود، سه ویژگی color, style, width اجباری هستند و باید همگی ست شوند
انداره border های چپ و راست بر روی عرض اضافه می شوند و همچنین اندازه border های بالا و پایین بر روی ارتفاع تگ

padding
فاصله بین محتوای تگ تا border ها را padding می گویند که برای هر چهار طرف قابل تنظیم هست
padding فقط مقادیر مثبت میگیرد
padding نیز مانند border بر روی مساحت نهایی تگ تاثیر دارد

margin
فاصله بین border و محیط اطراف تگ را margin می گویند که برای هر چهار طرف قابل تنظیم هست (در مواردی برای بالا و پایین اعمال نمی شود)
margin علاوه بر مقادیر مثبت، می تواند مقادیر منفی نیز بگیرد که باعث می شود تگ در جهت خلاف مقدار مثبت جابجا شود، مقدار منفی در موارد کمی استفاده می شود و حتما باید بدانید که چطور از آن استفاده کنید

outline
outline در واقع border ای است بیرون از border عادی و روی margin (در صورت وجود margin) قرار میگیرد و بر خلاف border فضایی را اشغال نمیکند!
بیشتر برای نمایش دادن حالت focus تگ ها به کار میرود


http://www.w3schools.com/css/box-model.gif

[rezakho]

Gradient در css

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

یک راه حل استفاده از تصاویر با عرض بسیار کم و تکرار آن در راستای X یا Y است.

راه دیگر استفاده از رنگ پس زمینه طیفی است که خوشبختانه در تمام مرورگر ها حتی ie نسخه 6 هم پشتیبانی می شود.
به آدرس زیر رفته، طیف رنگی مورد نظر خود را ساخته و کد ایجاد شده رو به راحتب در css خود استفاده کنید
http://www.colorzilla.com/gradient-editor/

[refugee]

اموزش هایت جالب بود . ببخشید ارسال میدم . خواستم چند نگته رو بگم . شاید باعث پیشرفت شد .

1. شما که زحمت میکشید کاش مطالب را هنگام اموزش یه دمو انلاین هم درست کنید . بذارید بقیه هم فیض ببرند .
2. بیشتز مطالب تا الان تو بخش سی اس اس بود . ( البته نکات ریز است که بعضی هاش رو ادم باید تجبربه کنه )
3. ای کاش تو مباحث طراحی گرافیک هم میگفتید .

سپاس

[rezakho]

متشکر
1- دمو هم ایده خوبیه، دارم، میگذارم انشاالله
2- هدف تجمیع مطالب و همچنین نکات خاص و کاربردی هست
3- کار من گرافیک نیست، ولی تکنیک هایی هست که بجای گرافیک با همین css و ... قابل اجراست و اونها هم گفته میشه انشاالله

[rezakho]

خطوط فرورفته و برآمده

شاید در سایت های مختلف خطوطی را دیده باشید که به نظر فرورفته و یا برآمده اند، علت فرورفته و یا برآمده بودنشان قدرت انتزاعی بینایی است

هرگاه دو خط موازی افقی چسبیده به هم که خط بالایی از رنگ زمینه تیره تر و خط پایینی از رنگ زمینه روشن تر باشند وجود داشته باشد، این خط فرورفته به نظر میرسد
و
هرگاه دو خط موازی افقی چسبیده به هم که خط بالایی از رنگ زمینه روشن تر و خط پایینی از رنگ زمینهتیره تر باشند وجود داشته باشد، این خط برآمده به نظر میرسد که این یکی کم کاربردتر هست

برای ساختن این خطوط می توانید از هر تگی (hr و div مناسب ترند) و با استفاده از border بالا و پایین بهره بگیرید

[elena]

خطوط فرورفته و برآمده

شاید در سایت های مختلف خطوطی را دیده باشید که به نظر فرورفته و یا برآمده اند، علت فرورفته و یا برآمده بودنشان قدرت انتزاعی بینایی است

هرگاه دو خط موازی افقی چسبیده به هم که خط بالایی از رنگ زمینه تیره تر و خط پایینی از رنگ زمینه روشن تر باشند وجود داشته باشد، این خط فرورفته به نظر میرسد
و
هرگاه دو خط موازی افقی چسبیده به هم که خط بالایی از رنگ زمینه روشن تر و خط پایینی از رنگ زمینهتیره تر باشند وجود داشته باشد، این خط برآمده به نظر میرسد که این یکی کم کاربردتر هست

برای ساختن این خطوط می توانید از هر تگی (hr و div مناسب ترند) و با استفاده از border بالا و پایین بهره بگیریداگه امکان داره هر توضیحی رو با دمو بگین،متوجه نشدم:افسرده: