وقتشه که از بعضی دستورالعمل‌هایی
که درباره رنگ‌ها یاد گرفتیم استفاده کنیم و تمرین کنیم
و این خیلی سرگرم‌کننده میشه پس شروع کنیم
بیاید سریع یه رنگ پایه انتخاب کنیم
برای طراحی‌مون
البته تو دنیای واقعی
خیلی باید روی این تصمیم فکر کرد
ولی اینجا ما خیلی سریع یه رنگ انتخاب می‌کنیم
فقط برای اینکه ببینیم چطور کار می‌کنه
خب توی عکس‌ها اینجا کلی رنگ سبز هست
مثل اینجا
اینجا هم یه سبز قشنگ توی گیاه‌ها هست همین‌طور اینجا
و کل این صندلی یا مبل هم در واقع سبزه
همچنین این فروشگاه کوچیک خیلی روی سلامتی تمرکز داره
مثل اینجا یا اینجا
و اگه یادتون باشه
رنگ سبز نماد طبیعت رشد و سلامتیه
پس بهتره با رنگ سبز پیش بریم
یه چیزی مثل این
خب من از یکی از ابزارهایی که
توی جلسه قبل معرفی کردم استفاده می‌کنم
اون هم Open Color هست
آدرس سایتش اینه که دوباره
می‌تونید توی صفحه منابع من پیدا کنید
اینجا کلی رنگ داریم
با کد hex مربوط بهشون
مثل رنگ خاکستری که بعداً بهش می‌رسیم
ولی الان دنبال رنگ سبزیم
اینجا هم teal داریم هم green و هم lime
خب من دنبال این یکی نیستم
در واقع فکر کنم اون چیزی که من دوست دارم همین teal باشه
اگه اینجا به این عکس‌ها نگاه کنید
می‌بینید که teal بیشتر شبیه رنگیه
که همین الان توی تصاویر داریم
پس می‌تونیم هرکدوم از اینا رو انتخاب کنیم
ولی این تیره‌تره به نظرم قشنگ‌تره
پس این کد hex رو برمی‌دارم
و اینجا توی کامنت‌ها
بیایید سیستم رنگ‌مون رو بنویسیم
پس رنگ اصلی
همین هست
و حتی توی کامنت‌ها هم قشنگ هایلایت میشه
به خاطر اون افزونه VS Code که نصب کرده بودیم
و یادتون باشه برای پالت رنگ دنیای واقعی
باید بریم جلو
و برای این رنگ شید و تینت تولید کنیم
ولی اینجا در واقع تینت‌ها از قبل وجود دارن
یعنی نسخه‌های روشن‌تر
پس اگه لازم شد
می‌تونیم یکی از همینا رو برداریم
خب حالا بریم سراغ رنگ خاکستری
اینجا فقط یه رنگ خاکستری هست پس همونو انتخاب می‌کنیم
این خاکستری باید برای متن استفاده بشه
پس من این یکی رو انتخاب می‌کنم
می‌تونستم این یکی رو هم بگیرم
ولی خب بذارید همینو انتخاب کنیم
اون یکی شاید زیادی روشن باشه
خب همین شد
و از روی کد hex
می‌تونید بفهمید که اینا خاکستری واقعی نیستن
چون اگه بودن
اون دو رقم اول باید مثل دوتای دوم
و دوتای سوم می‌بود
یادتونه؟
خب به هر حال بیاید حالا واقعاً از این رنگ‌ها استفاده کنیم
و اولین کاری که می‌کنم اینه که
همه متن‌های صفحه رو خاکستری کنم
پس این رنگ خاکستری رو دوباره کپی می‌کنم
و یادتون باشه ویژگی color
یک ویژگی ارث‌بریه
پس می‌تونیم خیلی راحت بذاریمش روی body
پس color خب Caps Lock روشن بود
پس color
سیو می‌کنم و خب آماده‌ست
خب اینجوری خیلی بیشتر شبیه یه طراحی حرفه‌ای شد
درسته؟
خیلی عالی شد
پس مطمئناً داریم به یه جای خوب می‌رسیم با طراحی‌مون
و حالا وقتشه این رنگ رو برداریم
و روی این لینک استفاده کنیم
پس این لینکو می‌خوایم مثل یه دکمه استایل بدیم
خب کجاست؟
آهان اینجاست توی button
و همین‌طور یه کلاس button-big هم داره
ولی بیاید از همون button شروع کنیم
و این باید قابل استفاده مجدد باشه
پس بیاید بذاریمش این بالا
و یادتون باشه همیشه باید
از pseudo-classهای link و visited استفاده کنیم
چون در واقع این یه لینکه نه یه المنت button
و دکمه نیست
چون قراره یه لینک باشه
که واقعاً ما رو یه جایی ببره
پس Shop chairs احتمالاً ما رو می‌بره به یه صفحه دیگه
که فروشگاه آنلاینشونه
پس این دکمه نیست
چون کاری انجام نمیده
پس اگه جایی می‌بره باید لینک باشه
و اگه کاری انجام بده اون موقع باید دکمه باشهمثل مثلاً باز کردن یه پنجره modal
اما درباره‌ی این موضوع بعدتر در پروژه‌ی اصلی بیشتر صحبت می‌کنیم
حالا بیاییم اینجا رنگ پس‌زمینه‌مون رو استفاده کنیم
خب این درست نیست
الان باید دوباره اینجا بگیریمش
خوب و حالا بیایید استایل‌های واقعی رو بهش بدیم
اول از همه رنگ باید سفید باشه
پس رنگ fff
نمی‌خوایم زیرخط برای متن داشته باشیم
پس این مربوط به text-decoration میشه یادتونه؟
و در حال حاضر به‌صورت پیش‌فرض زیرخط داره
ولی ما می‌خوایمش none باشه
خب همین الان هم بهتر شد
و حالا بیایید کاری کنیم که متن بزرگ نوشته بشه
این چیزی هست که معمولاً توی دکمه‌ها می‌بینیم
و یادتون باشه این با text-transform به uppercase تنظیم میشه درسته؟
و در نهایت بیایید بهش کمی padding بدیم
پس بالا و پایین 16 پیکسل بدیم
و چپ و راست 32 پیکسل
و این مقادیر دارن از سیستم فاصله‌گذاری من این بالا میان
ولی هنوز وارد توضیح اون سیستم نمی‌شم باشه؟
پس اینجا یه مقداری فضا ایجاد شد
ولی این المنت به پایین حرکت نکرد
پس عملاً فاصله اینجا
بین این متن و اون یکی تغییری نکرد
و می‌دونین چرا اینطوریه؟
خب چون این المنت a یک المنت inline هست
و روی المنت‌های inline مدل جعبه‌ای
اون‌طور که انتظار داریم کار نمی‌کنه
یادتونه؟
پس عملاً فاصله‌گذاری عمودی
واقعاً فضای جدیدی ایجاد نمی‌کنه
ولی این همون چیزیه که ما می‌خوایم
پس می‌تونیم تنظیمش کنیم به inline-block درسته؟
نه block
چون اون‌وقت تمام فضای ممکن رو اشغال می‌کنه
مثل این درسته؟
خب این چیزی نیست که ما بخوایم ما inline-block می‌خوایم
و حالا اونجا کمی فضای بیشتر ایجاد شد درسته؟
حالا در نهایت بیایید متن رو bold کنیم
و برای اون font-weight رو روی 500 قرار می‌دیم فکر کنم
اینجا توی URL خیلی خوب می‌تونیم ببینیمش
ما 400500 و 700 رو انتخاب کردیم
و در واقع اگه بخوایم 600 هم داشته باشیم
نیازی نیست دوباره به Google Fonts برگردیم
فقط می‌تونیم اینجا 600 اضافه کنیم
بعد یه نقطه‌ویرگول بذاریم و اونم لود میشه
خب؟
ولی ما فقط همون 500 رو می‌خوایم
که این متن کمی پررنگ‌تر بشه
پس font-weight روی 500 و خب این خیلی بهتر شد
و بعداً هم اینو گرد می‌کنیم
ولی فعلاً هنوز نمی‌دونیم چطور انجام میشه
عالیه
حالا بریم سراغ اندازه‌ی فونت
ولی بعدش می‌خوام درباره‌ی حالت hover هم حرف بزنم
معمولاً وقتی روی یه دکمه مثل این hover می‌کنیم
ممکنه رنگش تغییر کنه
ممکنه روشن‌تر یا تیره‌تر بشه
پس اینجا بذارید روشن‌ترش کنیم
چون این یکی از اون رنگ‌هایی هست
که می‌تونیم از Open Color اینجا برداریم
ولی اول بیاییم متن رو کمی بزرگ‌تر کنیم
این ویژگی‌ها رو هم کنار تنظیمات فونت نگه داریم
پس font-size روی 18 پیکسل
خیلی خوب
و حالا بیاییم اون رنگ روشن‌تر رو از Open Color بگیریم
خب این رنگ معمولی ماست
و وقتی روی دکمه hover کنیم
می‌خوایم رنگش رو به این تغییر بدیم
یه افکت ظریف ولی بیاییم اینجا کپی‌ش کنیم
و بعد بگیم button: Hover
و button: Active
و همیشه به همین ترتیب باشه باشه؟
پس background-color
و خب اینم از این
بذارید تست کنیم
و خیلی قشنگ شده
واقعاً عالیه
حالا فقط یه چیز مونده که باید اینجا انجام بدیم
اونم چک کردن کنتراست هست
بین رنگ پس‌زمینه و رنگ متن
یادتون باشه این فوق‌العاده مهمه
تا متن برای همه قابل دسترسی باشه
پس این کد hex رو اینجا کپی می‌کنم
و بعد می‌رم سراغ اون ابزاری که معرفی کردم
که اسمش Coolors هست
و یک بار دیگه تا زمانی که شما دارید اینو می‌بینید
ممکنه ظاهر اون ابزار فرق کرده باشه
ولی یه جایی باید این contrast checker وجود داشته باشه
باشه؟
و اگه به هر دلیلی کار نکرد
کافیه توی گوگل contrast checker بزنید
و مطمئناً یکی از ابزارهای بی‌شمار رو پیدا می‌کنید
که این کارو انجام بده
خب contrast checker بیایید رنگ متن رو سفید کنیم
یعنی fff
و بعد اینجا کد رو paste کنیم
و می‌بینین که کنتراست روی عدد پنج هست
این کامل نیست اما برای ما به اندازه کافی خوبه
خب درسته
و البته می‌تونیم همین کار رو با رنگ متن هم تست کنیم
خب اینجا پس یک پس‌زمینه سفید داریم
و راستی
می‌بینید که سفید روی سفید همون معنای کنتراست ۱ هست
یعنی بدترین حالت ممکن
و بله پس کنتراست ما اینجا در واقع خیلی خوبه ۱۱۵
خب در هر حال
این فقط برای نشون دادن طرز کار این ابزار بود
خیلی خب حالا بریم پایین‌تر
چون اینجا چند تا دکمه دیگه داریم
و اینا چندان خوب به نظر نمی‌رسن
پس بیایم اون رو تغییر بدیم
شاید یادتون باشه که اینجا ما کلاس دکمه داشتیم
ولی همچنین دکمه بزرگ هم داشتیم
و این در اصل مثل یک نسخه متفاوت از همین دکمه است
که می‌تونیم حالا متفاوت استایلش کنیم
پس ما دکمه بزرگ داریم بیایم ببینیم
و اون پایین‌تر اینجا دکمه کوچک داریم
خب این یک تکنیک خیلی رایج هست
که وقتی CSS می‌نویسیم استفاده می‌کنیم
که اساساً همه استایل‌های مشترک رو
می‌ریزیم توی یک المان
یا یک کلاس که اینجا همون button هست
و بعد استایل‌هایی که متفاوتن
می‌ذاریم توی یکی از این حالت‌های متغیر
پس بیایم اینارو بسازیم
پس این شد button small
و
دکمه فکر کنم big بود
و من دوست دارم اینجا از دو تا dash استفاده کنم
ولی خب این واقعاً قانون سختی نیست
پس چیزی که اینجا تغییر می‌کنه
بین دکمه بزرگ و کوچیک سایز فونت هست
و همچنین اندازه کلی
و این اندازه توسط padding اینجا تعریف می‌شه
پس بیایم این دوتا رو برداریم
چون این دوتا در واقع برای دکمه بزرگ هستن
و بعد برای دکمه کوچیک یه چیز دیگه بزنیم
پس فعلاً اینو ذخیره کنیم
و می‌بینید که دکمه بزرگ ما اینجا هنوز همون شکله
و دکمه کوچیک الان اینجوریه
پس بیایم یک سایز فونت دیگه هم بهش بدیم
و یادتون باشه به طور پیش‌فرض ۱۶ هست
ولی این واقعاً زیادی بزرگ به نظر میاد
پس بیایم یکم بیاریم پایین‌تر بذاریم روی ۱۴
عالیه
و حالا یکم padding هم بهش بدیم
ولی کمتر از دکمه بزرگ
پس ۸ بالا و پایین و ۱۲ چپ و راست
خوبه
این واقعاً خیلی خوب به نظر میاد
پس اینجا با رنگ کارمون تموم شد
ولی حالا که اینجاییم
بیایم رنگ این فوتر رو هم تغییر بدیم
یادتون هست که چطوری این متن رو کوچیک‌تر کردیم
چون خیلی کم‌اهمیت‌تر بود
نسبت به بقیه متن
پس بیایم این کارو ادامه بدیم
با این که متنش رو روشن‌تر هم بکنیم
پس دوباره بریم سراغ Open colors
و یادتون هست که رنگی که انتخاب کردیم این یکی بود؟
پس حالا بیایم این یکی رو امتحان کنیم
خب من کپی‌ش می‌کنم
و حالا اولین کاری که می‌کنم
اینه که کنتراست رنگ رو بررسی کنم
خب این یکی اوه اینجا فقط ۳۳ داریم که ضعیفه
پس نمی‌تونیم از این استفاده کنیم
بیایم اینجا کلیک کنیم
فقط رنگ متن ولی این خیلی تیره‌ست
پس بیایم رنگ بعدی رو انتخاب کنیم
خب این شاید اونقدری روشن نباشه که بخوایم
و بعضی وقتا ممکنه بتونیم
این قوانین رو یک ذره بشکنیم
ولی اینجا بیایم خیلی سختگیرانه به قوانین پایبند باشیم
و خب همین شد
تقریباً مثل همون قبلی به نظر میاد
ولی در هر حال بذاریم همینی بمونه
تا قوانین دسترس‌پذیری رو نقض نکنیم
عالیه
حالا یادتون باشه یک کار دیگه‌ای که می‌تونستیم با رنگ‌ها بکنیم
اینه که کل یک بخش رو برجسته کنیم درسته؟
پس این چیزی هست که خیلی رایجه و با رنگ‌ها انجام می‌دیم
و خب الان می‌خوام این کارو انجام بدم
روی این بخش testimonial اینجا
و تقریباً مطمئنم که خیلی عالی می‌شه
پس بیایم امتحانش کنیم
اول می‌خوام بدونم اسم این المان چیه
خب اسمش testimonial section هست
پس
آره همینه
خب پس background color
و الان VS Code واقعاً خوب به نظر میرسه
چون همین‌جا به ما نشون می‌ده
رنگ‌هایی که بیشتر استفاده شدن
پس توی این فایل CSS فعلی ما این چهار رنگ رو استفاده کردیم
و اینجا کمکمون می‌کنه دوباره همونا رو انتخاب کنیم
خب این همون رنگ سبز ماست
خیلی خب عالیه
خب حداقلش شروع خوبیه
ولی حالا باید متن رو سفید کنیم
خب حالا باید این کارو چطوری انجام بدیم؟
باید همه این سه‌تا رو انتخاب کنیم؟
خب فکر نمی‌کنم این درست باشه
در عوض باید خیلی ساده رنگ رو
روی این المان والد سفید کنیم
و بعد همه المان‌های دیگه
بتونن اون رو به ارث ببرن
پس بیایم این کارو انجام بدیم
رنگ رو بذاریم روی سفید یعنی fff
و خب این خیلی خواناتر شد درسته؟
الان یکم عجیب به نظر می‌رسه
که رنگ پس‌زمینه اطراف این تصویر نیست
پس بیایم یک مقدار padding (پرکننده)اینجا بدیم
پس padding (پرکننده)برای کل این بخش
که در واقع همه‌چیز رو کمی به داخل میاره
و با این کار ظاهرش خیلی بهتر شد
و دوباره بعداً کمی گردی هم بهش اضافه می‌کنیم
وقتی یاد گرفتیم دقیقاً چطوری کار می‌کنه
خب و حالا در نهایت به‌عنوان یک تاکید دیگه
کاری که می‌تونم بکنم اینه که یک لمس نهایی اضافه کنم
و اون اینه که یک خط سبز اینجا اضافه کنم
در انتهای کل صفحه
که از چپ تا راست کل صفحه کشیده بشه
و اگه بخوام این کارو بکنم باید روی body ستش کنم
پس همینجا
خب border-bottom
فکر کنم در پروژه دیگه‌مون هم اینو انجام داده بودیم
توی پروژه وب مگزین
خب solid و بعد دوباره رنگ اصلی‌مون
و خب خیلی قشنگ شد
این یه تاکید نهایی خوب برای صفحه‌ست
و همچنین یک تاکید نهایی برای این جلسه
چون با این فعلاً کارمون تمومه
پس حالا می‌تونیم بریم سراغ جلسه بعدی
که درباره تصاویر خواهد بود