انتخاب بهترین رنگ در طراحی‌وب

هميشه يكي از مشكلاتي كه هر طراح وب با آن مواجه است مشكل انتخاب رنگ براي المان‌هاي طراحي‌اش است. اينكه رنگ لينك‌ها، دكمه‌ها، متن‌ها، بخش‌هاي مختلف سايت را چه چيزي قرار دهيم تاثير بسيار زيادي بر روي نظر كاربر نسبت به طرح ما ميگذارد. هرچه رنگ‌هاي انتخاب ما حرفه‌اي تر و قشنگ تر باشند و با فكر بيشتري طبق استانداردها انتخاب شوند كاربر حس بهتري به طراحي ما پيدا ميكند و ارتباط بهتري با آن ميگيرد.

برعكس اگر از رنگ‌هاي غير حرفه‌اي استفاده كنيم چشم كاربر به زودي خسته ميشود و صفحه‌ي سايت ما را فورا ميبندد.

در اين آموزش باهم نحوه‌ي انتخاب بهترين رنگ‌ها را ياد ميگيريم و با 3 سايت فوق‌العاده كه در انتخاب رنگ‌ها به ما كمك ميكنند آشنا مي‌شويم.

دانلود فيلم آموزشي با كيفيت بالا و حجم 11 مگ

سايت‌هاي براي انتخاب بهترين رنگ‌ها

براي راهنمايي گرفتن درباره‌ي بهترين رنگ‌ها ميتوانيد از اين سه سايت فوق‌العاده استفاده كنيد (در فيلم آموزشي بالا بيشتر درباره‌ي آن‌ها توضيح داده‌ايم) :

flatuicolors.com
flatcolors.net
flatcolorsui.com

طراحی یکسان در مرورگرهای مختلف با CSS Reset ها

حتما برای شما هم پیش آمده که وب سایتی را با HTML و CSS طراحی کرده‌اید ولی بعد از تست های مخلف متوجه تفاوت‌هایی بین نمایش آن در بین مرورگرهای مختلف شده‌اید.کار CSS Reset ها دقیقا همین است. یک CSS Reset چیزی جز چند خط کد CSS ساده نیست که کارش این است که استایل های پیش‌فرضی که هر مرورگر به المان‌های HTML می‌دهد را بصورت کامل غیرفعال و خنثی کند تا در پایان طراحی، طرح ما در مرورگرهای مختلف یک شکل تقریبا یکسان نمایش داده شود.در ویدئوی زیر بصورت کامل کار CSS Reset ها را یاد خواهید گرفت :

dl-btnدانلود فیلم آموزشی معرفی و کار با CSS Reset ها با کیفیت بالا (با حجم 15 مگ)dl-btn
dl-btnدانلود فایل reset.cssdl-btn

آموزش متنی

برای کار با CSS Reset ها فقط کافی است کدهای CSS Reset  را از لینک بالا دانلود کنید و آنرا با دستور import@ در اول فایل CSS اصلی خودتان لود کنید :

@import "reset.css";

CSS Reset خودتان را همچنین میتوانید در اول فایل HTML خود با دستور link لود کنید ولی در دنیای طراحان وب مرسوم است که CSS Reset خود را در فایلی جداگانه با اسم reset.css ذخیره میکنند و بعد آن فایل را در ابتدای فایل استایل اصلی خودشان با دستور بالا وارد میکنند.

توجه کنید که شما میتوانید CSS Reset را با توجه به نیاز و پروژه خودتان دست‌کاری کنید و قسمت‌هایی از آن که کار شما را خراب میکنند حذف و یا قسمت‌های جدید که کار شما را توسعه می‌دهند به آن اضافه کنید.

خمیده کردن گوشه‌ی المان‌ها با CSS

خمیده کردن گوشه‌ی المان‌ها با CSS

شاید گاهی برای شما هم پیش آمده باشد که المانی در صفحه‌ی وب داشته باشید و بخواهید گوشه‌های آن‌را گرد کنید و به آن ظاهر چشم نوازتری ببخشید. برای اینکار باید از CSS استفاده کنید. آموزش ویدئویی زیر روش اینکار را به شما توضیح داده است :

dl-btnدانلود ویدئوی آموزشی با کیفیت بالا و کاملا واضح (با حجم ۱2 مگ)dl-btn

border radius چیست؟

حتما دیده‌اید که بعضی المان‌ها در سایت‌ها مانند تصاویر، جعبه‌ها و… دارای گوشه‌هایی گرد و خمیده‌ میباشد.

قبل از بوجود آمدن نسخه‌ی جدید css یعنی همان css3 اینکار با نرم‌افزارهایی مانند فتوشاپ و… انجام میشد. اما الان در css3 این امکان وجود دارد که با یک خط کد ساده گوشه‌ی المان‌ها را به اندازه دلخواه گرد و خمیده کنیم.

border radius در css

برای گرد کردن گوشه‌ی المان ها با استفاده از CSS فقط کافی است که در استایل دهی CSS مربوط به آن المان از دستور border-redius به این شکل استفاده کنیم :

.element{
     border-radius:5px;
}

مقداری که روبروی border-radius وارد می‌شود میتواند به هر واحدی باشد ولی در دنیای وب واحد پیکسل (px) رایج است و هرچه مقدار این عدد بیشتر باشد گوشه‌های المان ما بیشتر خمیده خواهد شد.