آموزش جامع زیبا سازی کادر ها در css

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

بی مقدمه شروع میکنیم:

مقدمه

خب این قسمت طبق معمول برای مبتدی هاست:

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

دقیقا مثل همین عنوان پستی که میبینید ، من کادر سمت راست بهش دادم!

مثال کادر از سمت راست
مثال کادر از سمت راست

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

پس تعریف کادر ها بسیار سادست! چون تو همه جا وجود دارند! توی برنامه هایی مثل Office ، فتوشاپ حتی paint ویندوز! و خلاصه همه جا.

برای معرفی کادر به اجزامون توی CSS به این شکل عمل میکنیم:(به جای کلمه “اندازه” یک عدد قرار میدیم!)

شروع کار

خب طبق معمول ما ۲ روش برای نوشتن کد های css داریم.

روش خلاصه و روش ابتدایی.البته خودم نامگذاری کردمشون 🙂

این ۳تا ، مقادیر مهم خاصیت کادر هستند ، اندازه کادر ، نوع کادر ، رنگ کادر.

شروع کد نویسی

رنگ کادر

برای رنگ میتونیم از همه جور رنگی استفاده کنیم ولی رنگ های HEX طرفدار بیشتری داره ، هم خلاصه هستن و هم کامل.

کد اصلی برای رنگ کادر:

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

کادر چند رنگ

توی یک مربع یا مستطیل ما ۴ سمت داریم که میشه بهشون کادر اضافه کرد ، بالا پایین چپ راست!

حتما ببینید:   معرفی تگ پرکاربرد پس زمینه در css

توی css این قابلیت رو داریم که هر کادر رو یه رنگ خاص بدیم! مثلا کادر سمت چپ قرمز باشه ، سمت راست آبی.

کدش رو اینطور مینویسیم:

چهار جهت رو براتون نوشتم که متوجه بشید ، کافیه مثلا بجای top یه کد رنگ بزارید تا کادر بالا اون رنگی بشه.

اینم یه توضیح:

  • TOP » بالا
  • RIGHT » راست
  • BOTTOM » پایین
  • LEFT » چپ

مشاهده کد به صورت زنده و آزمایش

انواع کادر

کادر ها توی طراحی وب ۸ نوع حالت دارن ولی ۳ موردش برای ما کاربردی و مهمه.

شامل Dashed , Dotted , Solid ، که براتون توضیح میدیم.

کد نوشتن حالت کادر:

  • Solid کادر خطی و ساده
  • Dashed کادر به صورت خط چین
  • Dotted کادر به صورت نقطه چین

یکی از ۳ حالت بالارو قرار میدیم فقط.

مشاهده کد زنده و آزمایش

 

اندازه کادر

این مورد سادست! کافیه عدد اندازه رو بر حسب پیکسل PX وارد کنیم.

کد:

و درواقع ضخامت کادر اینگونه مشخص میشه.

نوبت میرسه به کد خلاصه:

کافیه مقادیر رو به ترتیب به این صورت تنظیم کنیم:

  1. اندازه
  2. رنگ
  3. نوع

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

کد مثال:

 

جهات کادر

این بخش هم خیلی سادست.

کافیه یکی از مقادیر top , bottom , right , left رو قرار بدیم.

کد مثال:

امیدوارم از مقاله آموزش جامع زیبا سازی کادر ها در css لذت برده باشید.

حتما ببینید:   کد آماده منوی کشویی وبلاگ و سایت

با آرزوی بهترین ها ، محمد آریا مقصودی /.

اشتراک این مطلب در تلگرام.

نظر بدهید

ایمیل شما منتشر نمیشود

نام خود را بنویسید

مثال: example@gmail.com

مثال: www.apci.ir

در اینجا پیام خود را بنوسید