آموزش مقدماتیHTMLوCSS(جلسه۱۳:پشت زمینه و گرادینت–بخش ۱)
1398/03/05 15:48 , میلاد صاحب نظر

آموزش مقدماتیHTMLوCSS(جلسه۱۳:پشت زمینه و گرادینت–بخش ۱)

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

۱- ساختن اولین صفحه وب قسمت اول ۷-باز کردن Box Model قسمت اول ۱۳-تنظیمات پشت زمینه قسمت اول ۱۹-ایجاد فرم‌ها قسمت اول
۲-ساختن اولین صفحه وب قسمت دوم ۸-باز کردن Box Model قسمت دوم ۱۴-تنظیمات پشت زمینه قسمت دوم ۲۰-ایجاد فرم‌ها قسمت دوم
۳-آشنایی با HTML  قسمت اول ۹-تنظیم موقعیت محتوا قسمت اول ۱۵-ایجاد لیست‌ها قسمت اول ۲۱-سازماندهی اطلاعات با جداول قسمت اول
۴-آشنایی با HTML قسمت دوم ۱۰-تنظیم موقعیت محتوا قسمت دوم ۱۶-ایجاد لیست‌ها قسمت دوم ۲۲-سازماندهی اطلاعات با جداول قسمت دوم
۵-آشنایی با CSS قسمت اول ۱۱-کار با Typography قسمت اول ۱۷-افزودن رسانه قسمت اول ۲۳-نوشتن بهترین کد
۶-آشنایی با CSS قسمت دوم ۱۲-کار با Typography قسمت دوم ۱۸-افزودن رسانه قسمت دوم  

در CSS، پشت زمینه‌های عنصر می‌توانند یک رنگ ثابت، یک تصویر، یک گرادینت یا ترکیبی از این‌ها باشند. همین‌طور که تصمیم می‌گیریم چگونه این پشت زمینه‌ها را پیاده‌سازی کنیم، همچنین باید به خاطر داشته باشیم که هر پشت زمینه با ظاهر کلی سایت در ارتباط است.

در این دو جلسه، قصد داریم نگاهی به چگونگی اختصاص دادن انواع مختلف پشت زمینه‌ها (به خصوص گرادینت‌ها) به عنصرها داشته باشیم. همچنین با تعدادی از property یا ویژگی‌های CSS3 مخصوص پشت زمینه نیز کار خواهیم کرد.

افزودن یک رنگ پشت زمینه

سریع‌ترین روش برای اضافه کردن پشت زمینه به یک عنصر این است که یک پشت زمینه تک رنگ را با استفاده از ویژگی‌های background یا background-color اضافه کنید.

ویژگی background رنگ‌ها و تصاویر را به شکل shorthand می‌پذیرد، در حالی که ویژگی background-color مخصوصاً برای تنظیم رنگ‌های یکنواخت پشت زمینه استفاده می‌شود.

هر دوی این ویژگی‌ها کارکرد خودشان را دارند و اینکه کدام را انتخاب کنید، به ترجیح و همچنین هدف شما بستگی دارد.

div {
background-color: #b2b2b2;
}

در هنگام اضافه کردن یک رنگ پشت زمینه، چند گزینه برای مقادیری که استفاده می‌کنیم در اختیار داریم. همانند دیگر مقادیر رنگ‌ها، می‌توانیم از کلیدواژه‌ها، کدهای هگزادسیمال و مقادیر HSL، RGBa، RGB و HSLa نیز استفاده کنیم.

در اکثر مواقع، مشاهده شده است که مقادیر هگزادسیمال مورد استفاده قرار گرفته‌اند. به هر حال، ممکن است هر از گاهی بخواهیم از مقادیر RGBa یا HSLa برای وضوح استفاده کنیم.

پشت زمینه‌های واضح

در هنگام استفاده از مقدار RGBa یا HSLa به عنوان یک رنگ پشت زمینه واضح، فکر خوبی است که یک رنگ عقب‌نشینی (fallback) هم فراهم کنید، چون همه مرورگرها مقادیر RGBa یا HSLa را نمی‌شناسند.

برای مثال در اینترنت اکسپلورر ۸ که از مقادیر RGBa و HSLa پشتیبانی نمی‌کند، با مشکل عدم پشتیبانی مرورگر مواجه خواهید شد. و وقتی مرورگری مانند اینترنت اکسپلورر ۸ به مقداری برمی‌خورد که آن را نمی‌شناسد، خیلی راحت آن را نادیده می‌گیرد.

اگر پشتیبانی اینترنت اکسپلورر ۸ برای شما به یک مشکل تبدیل شده است، خوشبختانه یک روش آسان برای فراهم کردن رنگ عقب‌نشینی وجود دارد. CSS فایل را از بالا به پایین رندر می‌کند. بنابراین، می‌توانیم از دو ویژگی background-color درون یک مجموعه قانون استفاده کنیم.

اولین ویژگی background-color از یک رنگ پشت زمینه “safe” (مانند یک مقدار هگزادسیمال) استفاده می‌کند و دومین ویژگی background-color از یک مقدار RGBa و HSLa استفاده خواهد کرد.

در اینجا، اگر یک مرورگر مقادیر RGBa یا HSLa را بشناسد آن را رندر می‌کند و اگر نشناسد، به عقب بازمی‌گردد (fallback می‌کند)و مقدار هگزادسیمال بالا را می‌خواند.

div {
  background-color: #b2b2b2;
  background-color: rgba(0, 0, 0, .3);
}

اضافه کردن یک تصویر پشت زمینه

علاوه بر اضافه کردن یک رنگ پشت زمینه به یک عنصر، می‌توانیم همچنین یک تصویر پشت زمینه نیز اضافه کنیم.

تصاویر پشت زمینه درست همانند رنگ‌های پشت زمینه عمل می‌کنند. به هر حال، آن‌ها چند ویژگی بیشتر نیز ارائه می‌دهند تا تصاویر را آراسته‌تر کنید.

همانند قبل، می‌توانیم از ویژگی background با یک مقدار shorthand استفاده کنیم، یا می‌توانیم از مستقیماً از ویژگی background-image استفاده کنیم. مهم نیست از کدام ویژگی استفاده می‌کنیم، در هر حال باید یک منبع تصویر وجود داشته باشد و این منبع با تابع ()url مشخص می‌شود.

مقدار تابع ()url مسیر تصویر پشت زمینه خواهد بود  همان قوانینی که برای ایجاد مسیرهای هایپرلینک صدق می‌کردند، در اینجا هم صدق می‌کنند. مراقب دیگر مسیرهای متفاوت باشد و حتماً دقیق مشخص کنید که تصویر در کجا قرار دارد.

مسیر داخل پرانتزها و در بین علائم دبل کوتیشن قرار می‌گیرد.

div {
  background-image: url("alert.png");
}

اضافه کردن یک تصویر پشت زمینه به تنهایی با استفاده از یک مقدار rl ممکن است نتایج نامطلوبی به وجود آورد، چون به صورت پیش‌فرض تصویر پشت زمینه به صورت افقی و عمودی از بالا سمت چپ عنصر مورد نظر تکرار می‌شود تا اینکه پشت زمینه عنصر را کاملاً پر کند.

خوشبختانه می‌توانیم از ویژگی‌های background-repeat و background-position برای کنترل چگونگی تکرار شدن تصویر یا اینکه اصلاً تصویر تکرار بشود یا نه، استفاده کنیم.

Background Repeat

به طور پیش‌فرض، تصویر پشت زمینه بدون محدودیت تکرار خواهد شد، هم به صورت افقی و هم عمودی، مگر اینکه دستوری غیر از این حالت نوشته شده باشد.

می‌توانیم از ویژگی background-repeat برای تغییر مسیری که به واسطه آن تصویر پشت زمینه تکرار می‌شود، استفاده کنیم (البته اگر اصلاً تصویر تکرار بشود).

div {
  background-image: url("alert.png");
  background-repeat: no-repeat;
}

ویژگی background-repeat چهار مقدار مختلف می‌پذیرد: repeat-y، repeat-x، repeat و no-repeat. مقدار repeat یک مقدار پیش‌فرض است و تصویر پشت زمینه را در هر دو حالت افقی و عمودی تکرار می‌کند.

مقدار repeat-x تصویر پشت زمینه را به صورت افقی تکرار می‌کند، در حالی که مقدار repeat-y تصویر پشت زمینه را به صورت عمودی تکرار می‌کند. در آخر، مقدار no-repeat به مرورگر می‌گوید تصویر پشت زمینه را یک بار نمایش بده – همین، یعنی اصلاً آن را تکرار نکن.

Background Position

به طور پیش‌فرض، تصاویر پشت زمینه در گوشه بالا سمت چپ یک عنصر قرار می‌گیرند. به هر حال، با استفاده از ویژگی background-position، می‌توانیم کنترل کنیم که تصویر پشت زمینه بر اساس آن گوشه، دقیقاً در کجا قرار بگیرد.

div {
  background-image: url("alert.png");
  background-position: 20px 10px;
  background-repeat: no-repeat;
}

ویژگی background-position به دو مقدار نیاز دارد: یک افست افقی (اولین مقدار) و یک افست عمودی (مقدار دوم). اگر فقط یک مقدار مشخص شده باشد، آن مقدار برای افست افقی است و مقدار افست عمودی مقدار پیش‌فرض 50% خواهد بود.

چون قصد داریم تصویر پشت زمینه را از گوشه بالا سمت چپ عنصر جا‌به‌جا کنیم، مقادیر طولی دقیقاً مرتبط با آن گوشه خواهند بود.

برای تنظیم مقدار background-position، می‌توانیم از کلیدواژه‌های left، bottom، right، top و center و همچنین از پیکسل‌ها، درصدها یا هرگونه معیار طولی استفاده کنیم.

کلیدواژه‌ها و درصدها خیلی شبیه به یکدیگر عمل می‌کنند. مقدار کلیدواژه left top دقیقاً مشابه مقدار درصد 0   0 است، که موقعیت تصویر را در گوشه بالا سمت چپ عنصر نگه می‌دارد.

مقدار کلیدواژه right bottom دقیقاً شبیه به مقدار درصد 100%   100% است، که یک تصویر را در گوشه بالا سمت راست عنصر نگه می‌دارد.

صاویر پشت زمینه در گوشه بالا سمت چپ عنصر قرار می‌گیرند

شکل ۱۳.۱. تصاویر پشت زمینه در گوشه بالا سمت چپ عنصر قرار می‌گیرند.

استفاده از پیکسل‌ها برای یک background-position نیز مرسوم است، چون پیکسل‌ها برای ما کنترل دقیق و کاملی روی محل قرارگیری تصویر پشت زمینه فراهم می‌کنند.

مقادیر تصویر پشت زمینه shorthand

ویژگی‌های background-position، background-image، background-color و background-repeat می‌توانند به صورت یک مقدار shorthand برای فقط ویژگی background، مختصر شوند.

ترتیب این ویژگی‌ها به عنوان یک ویژگی background (پشت زمینه) shorthand می‌تواند متفاوت باشد، به هر حال معمولاً ترتیب آن‌ها به این شکل است:

Background-position، background-image، background-color و سپس background-repeat.

div {
  background: #b2b2b2 url("alert.png") 20px 10px no-repeat;
}
مثال Background Image

در مثال زیر، ما از ویژگی background با یک مقدار shorthand استفاده می‌کنیم که شامل background-position، background-image، background-color و background-repeat است.

لطفاً توجه کنید که داخل مقدار background-position هم یک مقدار نسبی و هم یک مقدار مطلق قرار دارد. اولین مقدار (یعنی ۲۰ پیکسل) مقدار افقی است که  موقعیت background-image را در فاصله ۲۰ پیکسل از سمت چپ عنصر قرار می‌دهد.

دومین مقدار، یعنی 50%، یک مقدار عمودی است که در محور عمودی، background-image را در مرکز قرار می‌دهد.

چند ویژگی و مقدار دیگر نیز درون مجموعه قوانین کلاس notice-success قرار دارند که کارشان استایل دادن به پیغام هشدار است.

HTML

<div class="notice-success">
  Woo hoo! Congratulations, you did it!
</div>

CSS

.notice-success {
  background: #67b11c url("tick.png") 20px 50% no-repeat;
  border: 2px solid #467813;
  border-radius: 5px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 15px 20px 15px 50px;
}

تمرین

برگردیم به سراغ وبسایت Styles Conference خودمان. اجازه دهید چند رنگ پشت زمینه اضافه کنیم. وقتی این کار را می‌کنیم، در عین حال چند استایل دیگر را نیز تغییر خواهیم داد تا کاری کنیم که همچنان تمام استایل‌های ما با هم هماهنگ باشند و همه محتوای ما خوانا باقی بمانند.

  1. کار را با برداشتن یک قدم بزرگ و ایجاد یک پشت زمینه آبی رنگ برای عنصر <body> در کنار ویژگی‌های color و font موجود آغاز می‌کنیم. تمام استایل‌ها برای مجموعه قوانین عنصر <body> حالا در کد زیر قرار گرفته‌اند:
    body {
      background: #293f50;
      color: #888;
      font: 300 16px/22px "Lato", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    ​

    ما یک پشت زمینه آبی رنگ را از عمد برای عنصر <body> قرار داده‌ایم، چون وبسایت ما دارای چند ردیف مختلف از رنگ‌های پشت زمینه خواهد بود و معمول‌ترین رنگ پشت زمینه، رنگ آبی است.
  2. حالا که هر صفحه در وبسایت Styles Conference ما شامل یک پشت زمینه آبی است، اجازه دهید تغییراتی در چند محل ایجاد کنیم که موجب زیباتر شدن پشت زمینه آبی رنگ ما می‌شوند.

    در تمام صفحات، عنصرهای <header> و <footer> و همچنین بخش hero در صفحه اصلی سایت نیز آبی رنگ هستند.

    درون عنصرهای <header> و <footer> اجازه دهید تمام رنگ‌های لینک‌ها را در ابتدا سفید کنیم و سپس، وقتی موس روی آن‌ها آمد، همانند هدینگ‌ها سبز رنگ شوند.

    کار را با عنصر <header>‌شروع می‌کنیم. برای انتخاب تمام عنصرهای <a> درون عنصر <header>، یک کلاس به نام primary-header به عنصر <hjeader> اضافه می‌کنیم (علاوه بر کلاس‌های container و group که از قبل موجود هستند).

    فراموش نکنید، باید این کلاس را به عنصرهای <header> تمام صفحاتمان اضافه کنیم.
    <header class="primary-header container group">
      ...
    </header>
    ​

    با قرار گرفتن کلاس primary-header در عنصر <header> و کلاس primary-footer که از قبل در عنصر <footer> قرار داشت، می‌توانیم دو مجموعه قوانین جدید به آخر بخش لینک‌ها در فایل css اضافه کنیم.

    اولین مجموعه قانون تمام عنصرهای <a> داخل یک عنصر که دارای مقدار اتریبیوت کلاس primary-header یا primary-footer هستند را انتخاب کرده و رنگ آن‌ها را سفید می‌کند، همان‌طور که قبلاً گفته شد، selectorهای متفاوتی که دارای ویژگی و مقدار یکسان هستند با ویرگول از هم جدا می‌شوند.

    دومین مجموعه قانون همان عنصرهای <a> را انتخاب می‌کند، اما وقتی کاربر موس را روی آن‌ها می‌آورد، رنگ آن‌ها را به سبز تغییر می‌دهد.
    .primary-header a,
    .primary-footer a {
      color: #fff;
    }
    .primary-header a:hover,
    .primary-footer a:hover {
      color: #648880;
    }
    ​
  3. حالا که برخی از قسمت‌های متن را سفید کردیم، اجازه دهید که داخل بخش hero از صفحه اصلی را نیز سفید رنگ کنیم، چون به پشت زمینه آبی‌رنگ خیلی می‌آید. از قبل مجموعه قانون کلاس hero را داریم و می‌توانیم به آن استایل اضافه کنیم، بنابراین اجازه دهید متن سفید رنگمان را آنجا اضافه کنیم.

    در کل، مجموعه قانون کلاس hero باید به شکل زیر تغییر یابد:
    .hero {
      color: #fff;
      line-height: 44px;
      padding: 22px 80px 66px 80px;
      text-align: center;
    }
    ​
  4. همچنین درون بخش hero در صفحه اصلی، اجازه دهید برخی از استایل‌های کلیدها را حذف کنیم. کار را با اضافه کردن چند ویژگی جدید به مجموعه قانون کلاس btn که در بخش کلید‌ها از فایل css قرار گرفته است، شروع می‌کنیم.

    به خصوص، اجازه دهید رنگ متن کلید را سفید کنیم، اطمینان حاصل کنیم که کرسر موس همیشه یک pointer باشد، font-weight را افزایش دهیم، کمی letter-spacing اضافه کنیم و text-transform را به uppercase تغییر دهیم.

    در کل، مجموعه قانون کلاس btn جدید ما باید به این شکل باشد:
    .btn {
      border-radius: 5px;
      color: #fff;
      cursor: pointer;
      display: inline-block;
      font-weight: 400;
      letter-spacing: .5px;
      margin: 0;
      text-transform: uppercase;
    }
    ​

    همچنین برخی از استایل‌های کلید جایگزین را به وسیله مجموعه قانون کلاس btn-alt حذف می‌کنیم. به خصوص، اجازه دهید مرزهای کلید را سفید کنیم برای استایل‌ها یک پشت زمینه سفید و یک رنگ متن آبی ایجاد کنیم.

    در نتیجه، مجموعه قانون btn-alt جدید ما به این شکل خواهد بود:
    .btn-alt {
      border: 1px solid #fff;
      padding: 10px 30px;
    }
    .btn-alt:hover {
      background: #fff;
      color: #648880;
    }​
  5. حالا که تمام محل‌های دارای پشت زمینه آبی را تمیز و مرتب کردیم، اجازه دهید برای ردیف‌هایی که دارای پشت زمینه سفید هستند نیز استایل اضافه کنیم. اجازه دهید یک بخش جدید درون فایل css دقیقاً در زیر بخش clearfix برای ردیف‌ها ایجاد کنیم.

    درون این بخش ردیف‌های جدید، یک selector کلاس جدید به نام row ایجاد می‌کنیم.

    درون مجموعه قانون کلاس row جدیدمان، یک پشت زمینه سفید، یک عرض حداقل ۹۶۰ پیکسلی(برای اطمینان از اینکه عنصرهای ردیفمان همیشه بزرگ‌تر از عرض عنصرهای container یا grid باشند) و چند padding عمودی اضافه می‌کنیم.

    در کل، بخش row جدید درون فایل main.css باید به این شکل باشد:
    /*
      ========================================
      Rows
      ========================================
    */
    
    .row {
      background: #fff;
      min-width: 960px;
      padding: 66px 0 44px 0;
    }
    ​
  6. حالا که استایل‌های کلاس row در جای خود قرار گرفتند، اجازه دهید یک ردیف با پشت زمینه سفید به صفحه اصلی خود اضافه کنیم. این کار را برای بخش تیزرها انجام می‌دهیم.

    در حال حاضر، این محل دارای یک عنصر <section> با کلاس grid است که سه عنصر <section> دیگر که دارای کلاس‌های تیزر و col-1-3 هستند را احاطه می‌کند.

    برای اضافه کردن یک پشت زمینه سفید به این بخش، قصد داریم تمام این عنصرها را در یک عنصر دارای کلاس row قرار دهیم.

    چون می‌خواهیم کل بخش تیزرها در یک عنصر <section>‌قرار بگیرند، پس یک عنصر <section> جدید با کلاس row ایجاد می‌کنیم که عنصر <section> موجود که دارای کلاس Grid است را احاطه کند.

    با داشتن دو عنصر <section> که دقیقاً یک محتوای یکسان را پوشش می‌دهند، مقدار معنایی آن‌ها از بین می‌رود. برای تصحیح این وضعیت، عنصر <section> دوم (یعنی همان که دارای کلاس grid است) را به یک عنصر <div> تغییر می‌دهیم.

    به هر حال، در این نقطه این عنصر فقط استایل اضافه می‌کند، نه معنای کلامی و معنایی و بهتر است که یک عنصر <div> باشد.

    ساختار عنصر تیزرهای جدید ما باید به این شکل باشد:
    <section class="row">
      <div class="grid">
    
        <!-- Speakers -->
        
        <section class="teaser col-1-3">
          ...
        </section><!--
        
        Schedule
      
        --><section class="teaser col-1-3">
          ...
        </section><!--
        
        Venue
        
        --><section class="teaser col-1-3">
          ...
        </section>
    
      </div>
    </section>
    ​

فوق‌العاده است که چند رنگ پشت زمینه می‌توانند چنین تأثیری بر طراحی یک وبسایت بگذارند. وبسایت Styles Conference ما دیگر خیلی زیبا شده است و صفحه اصلی آن یک دلیل بر این مدعا است.

 صفحه اصلی وبسایت Styles Conference پس از اضافه کردن چند رنگ پشت زمینه

شکل ۱۳.۲. صفحه اصلی وبسایت Styles Conference پس از اضافه کردن چند رنگ پشت زمینه

خلاصه

در این جلسه، توضیح دادیم که چگونه می‌توان رنگ پشت زمینه، تصویر پشت زمینه و رنگ متون را مطابق آن‌ها تغییر داد.

در یک تمرین کامل و جامع تمام تغییرات ممکن در پشت زمینه را برای سایت تمرینی Styles Conference اعمال کردیم و در جلسه آینده نیز در مورد گرادینت پشت زمینه صحبت خواهیم کرد.

با MUG همراه باشید!

منبع: learn.shayhowe

جلسه بعد                                                     جلسه قبل

 مطالب مرتبط

تعامل با فایل‌ها در HTML5
ایجاد یک فرم HTML و قابلیت تکمیل خودکار فرم‌ها
 بهترین قالب‌های رایگان HTML5 و CSS3
۹ چیز که باید در مورد HTML5 بدانید
آموزش گام به گام #C
برنامه نویسی شیءگرا چیست؟

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

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

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

دیدگاه خود را درباره این پست بنویسید

فرم ارسال نظرات