آموزش مقدماتیHTMLوCSS(جلسه۱۴:پشت زمینه و گرادینت–بخش۲)
1398/03/11 10:44 , میلاد صاحب نظر

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

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

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

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

طراحی پشت زمینه‌های گرادینت

پشت زمینه‌های گرادینت در CSS3 معرفی شدند و طراحان و توسعه‌دهندگان front-end در همه جای جهان بسیار از این کار خوشحال شدند. اگرچه پشت زمینه‌های گرادینت در مرورگرهای قدیمی کار نمی‌کنند، اما توسط تمام مرورگرهای مدرن پشتیبانی می‌شوند.

در CSS، پشت زمینه‌های گرادینت به عنوان تصاویر پشت زمینه در نظر گرفته می‌شوند. می‌توانیم با استفاده از ویژگی‌های background یا background-image یک گرادینت ایجاد کنیم، درست همانند یک تصویر پشت زمینه معمولی.

مقدار ویژگی برای یک پشت زمینه گرادینت بسته به اینکه چه نوع گرادینتی مد نظر ما است (خطی یا radial) متفاوت است.

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

در جلسات هفتم و هشتم، در مورد اضافه کردن پیشوندهای Vendor به ویژگی‌ها یا مقادیر جدید CSS صحبت کردیم و هدف این بود که مرورگرها بتوانند از ویژگی‌های جدیداً توسعه یافته CSS پشتیبانی کنند.

مقادیر پشت زمینه گرادینت یکی از مقادیری هستند که به استفاده از پیشوندهای Vendor نیاز دارند. خوشبختانه، اکثر مرورگرها نیاز به استفاده از یک پیشوند Vendor برای رندر کردن یک پشت زمینه گرادینت را از بین برده‌اند.

به هر حال، بهتر است هنوز هم از پیشوندهای Vendor استفاده کنیم تا مطمئن باشیم که بهترین پشتیبانی از پشت زمینه ما به عمل می‌آید.

در ابتدا، همین‌طور که در مورد پشت زمینه‌های گرادینت خطی صحبت می‌کنیم، هر کدام از پیشوندهای Vendor متفاوت را نیز درج خواهیم کرد. پس از آن، برای رعایت اختصار، پیشوندهای متفاوت مورد استفاده در قسمت توضیحات پشت زمینه‌های گرادینت Radial را حذف خواهیم کرد.

پشت زمینه گرادینت خطی

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

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

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

div {
  background: #466368;
  background: -webkit-linear-gradient(#648880, #293f50);
  background:    -moz-linear-gradient(#648880, #293f50);
  background:         linear-gradient(#648880, #293f50);
}

گرادینت‌های خطی با استفاده از تابع ()linear-gradient درون ویژگی background یا background-image مشخص می‌شوند. تابع ()linear-gradient باید شامل دو مقدار رنگ باشد که اولین مقدار رنگ آغازین و دومین مقدار، رنگ پایانی می‌باشد.

سپس مرورگر فرآیند انتقال بین دو رنگ را انجام می‌دهد.

قبل از اینکه پشت زمینه گرادینت مشخص شود، همچنین یک ویژگی background با یک رنگ ثابت نیز اضافه می‌شود. در صورتی که یک مرورگر از پشت زمینه‌های گرادینت پشتیبانی نکند، رنگ ثابت به عنوان یک رنگ fallback یا عقب‌نشینی در نظر گرفته خواهد شد.

تغییر جهت یک پشت زمینه گرادینت

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

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

اگر می‌خواهیم گرادینت از گوشه بالا سمت چپ به گوشه پایین سمت راست یک عنصر حرکت کند، می‌توانیم از مقدار کلیدواژه‌ای to right bottom استفاده کنیم.

div {
  background: #466368;
  background: linear-gradient(to right bottom, #648880, #293f50);
}

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

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

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

در کنار کلیدواژه‌ها، مقادیر درجه‌ای نیز قابل قبول هستند.

اگر بخواهیم گرادینتمان به سمت گوشه بالا سمت چپ یک عنصر حرکت کند، می‌توانیم از مقدار درجه‌ای 315deg استفاده کنیم، یا اگر بخواهیم گرادینتمان به سمت گوشه پایین سمت راست یک عنصر حرکت کند، می‌توانیم از مقدار درجه‌ای 135deg استفاده کنیم.

همین مفهوم برای هر مقدار درجه‌ای از ۰ تا ۳۶۰ صدق می‌کند.

پشت زمینه گرادینت Radial

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

برای گرادینت‌های شعاعی؛ به جای استفاده از تابع ()linear-gradient درون ویژگی background یا background-image، از تابع ()radial-gradient استفاده می‌کنیم.

div {
  background: #466368;
  background: radial-gradient(#648880, #293f50);
}

گرادینت‌های شعاعی از داخل به خارجی یک عنصر عمل می‌کنند. بنابراین، اولین رنگ مشخص شده درون تابع ()radial-gradient در مرکز مطلق عنصر قرار می‌گیرد و دومین رنگ در خارج از یک عنصر قرار دارد. سپس مرورگر فرآیند انتقال بین دو رنگ را انجام می‌دهد.

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

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

تولید‌کننده پشت زمینه گرادینت CSS3

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

اگر علاقه‌مند هستید، توصیه می‌کنم کمی تحقیق کنید تا تولید‌کننده مناسب نیازهایتان را بیابید.

ایستگاه‌های رنگ گرادینت

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

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

div {
  background: #648880;
  background: linear-gradient(to right, #f6f1d3, #648880, #293f50);
}

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

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

div {
  background: #648880;
  background: linear-gradient(to right, #f6f1d3, #648880 85%, #293f50);
}

اولین ایستگاه رنگ در 0% قرار می‌گیرد و آخرین ایستگاه رنگ در 100%، مگر اینکه غیر از این مشخص شده باشد.

مثال پشت زمینه گرادینت

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

برای این منظور، دو ویژگی background اضافه می‌کنیم. اولین ویژگی background یک مقدار هگزادسیمال رنگ ثابت را مشخص می‌کند که اگر یک مرورگر از پشت زمینه‌های گرادینت خطی پشتیبانی نکند، به عنوان یک Fallback عمل خواهد کرد.

دومین ویژگی background شامل تابع ()linear-gradient است که یک پشت زمینه گرادینت سبز رنگ مشخص می‌کند که از بالای عنصر به سمت پایین عنصر حرکت می‌کند.

HTML

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

CSS

.notice-success {
  background: #67b11c;
  background: linear-gradient(#72c41f, #5c9e19);
  border: 2px solid #467813;
  border-radius: 5px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 15px 20px;
}

تمرین

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

  1. با استفاده از کلاس row-alt یک ردیف جدید با یک پشت زمینه گرادینت ایجاد می‌کنیم. چون ردیف جدید همان ویژگی و مقدار min-width یکسان را به عنوان selector کلاس row به اشتراک می‌گذارد، ما این دو selector را با هم ترکیب می‌کنیم.
    .row,
    .row-alt {
      min-width: 960px;
    }
    ​

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

    با استفاده از تابع ()linear-gradient با مقادیر مناسب و پیشوندهای vendor، می‌توانیم background گرادینت را به مجموعه قوانین کلاس row-alt اضافه کنیم.

    همچنین می‌توانیم یک رنگ Background را نیز قبل از background گرادینت به عنوان یک Fallback اضافه کنیم، فقط محض اینکه اگر زمانی یک مرورگر از پشت زمینه‌های گرادینت پشتیبانی نکند.

    در آخر، همچنین چند padding عمودی نیز اضافه می‌کنیم. بخش ردیف به روز رسانی شده ما حالا به این شکل است:
    .row,
    .row-alt{
      min-width: 960px;
    }
    .row {
      background: #fff;
      padding: 66px 0 44px 0;
    }
    .row-alt {
       background: #cbe2c1;
       background: -webkit-linear-gradient(to right, #a1d3b0, #f6f1d3);
       background: -moz-linear-gradient(to right, #a1d3b0, #f6f1d3);
       background: linear-gradient(to right, #a1d3b0, #f6f1d3);
       padding: 44px 0 22px 0;
     }
    ​
  2. حالا که استایل‌های row-alt در جای خودشان قرار گرفتند، اجازه دهید از آن‌ها برای تمام صفحات داخلی سایت استفاده کنیم. در حال حاضر، همه صفحات داخلی ما دارای یک عنصر <section> با کلاس container هستند.

    سپس، درون هر عنصر <section> یک عنصر <h1> قرار دارد که شامل هدینگ صفحه است.

    قصد داریم این عنصرهای <section> را درست همانند عنصر <section> بخش تیزر در صفحه خانه تغییر دهیم. هر عنصر <section> با کلاس container را در یک عنصر <section> با کلاس row-alt قرار می‌دهیم.

    سپس هر عنصر <section> دارای کلاس container را به یک عنصر <div> برای قرارگیری بهتر semantic تغییر می‌دهیم.

    هر کدام از صفحات داخلی ما حالا باید شما کدهای زیر باشند:
    <section class="row-alt">
      <div class="container">
    
        <h1>...</h1>
    
      </div>
    </section>
    ​
  3. چون در حال به روز رسانی صفحات داخلی هستیم، اجازه دهید معرفی یا سرنخ‌های آن‌ها را نیز کمی زیباتر کنیم.

    کارمان را با اضافه کردن یک پاراگراف که هر صفحه را معرفی می‌کند و قرار دادن آن دقیقاً در زیر عنصر <h1> در هر عنصر <section> با یک کلاس row-alt شروع می‌کنیم. برای مثال، صفحه html، حالا می‌تواند شامل بخش lead زیر باشد:
    <section class="row-alt">
      <div class="container">
    
        <h1>Speakers</h1>
    
        <p>We&#8217;re happy to welcome over twenty speakers to present on the industry&#8217;s latest technologies. Prepare for an inspiration extravaganza.</p>
      
      </div>
    </section>​
  4. علاوه بر وارد کردن پاراگراف، اجازه دهید همچنین برخی از استایل‌های درون بخش lead را نیز تغییر دهیم. برای این منظور، یک کلاس lead به عنصر <div> که از قبل دارای کلاس container است اضافه می‌کنیم.

    این عنصر را می‌توانید در داخل عنصر <section> دارای کلاس row-alt بیابید. بخش lead ما برای هر صفحه داخلی حالا شبیه به کد زیر است:
    <section class="row-alt">
      <div class="lead container">
        
        ...
    
      </div>
    </section>
    ​
  5. وقتی کلاس lead در جایش قرار گرفت، تمام متن داخلی این عنصرهای <div> را در مرکز قرار می‌دهیم. همچنین font-size و line0height همه پاراگراف‌های داخل این عنصرهای <div> را افزایش می‌دهیم.

    سپس یک بخش جدید برای lead یا سرنخ‌ها درون فایل css درست در زیر بخش تایپوگرافی ایجاد می‌کنیم و استایل‌های زیر را اضافه می‌کنیم:
    /*
      ========================================
      Leads
      ========================================
    */
    
    .lead {
      text-align: center;
    }
    .lead p {
      font-size: 21px;
      line-height: 33px;
    }
    ​

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

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

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

دمو و کد منبع

در زیر، می‌توانید وبسایت Styles Conference را در وضعیت فعلی‌اش مشاهده کنید و همچنین می‌توانید کد منبع وضعیت فعلی وبسایت را نیز دانلود کنید.

لینک مشاهده وبسایت Styles Conference                  کد منبع وبسایت Styles Conference

استفاده از چندین تصویر پشت زمینه

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

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

مقدار تصویر پشت زمینه که در ابتدا می‌آید، اولین تصویر پشت زمینه و تصویر پشت ‌زمینه‌ای که در آخر کار لیست شده است، آخرین تصویر پشت زمینه خواهند بود. هر مقدار بین اولین و آخرین تصویر پشت زمینه به ترتیب از اول به آخر ظاهر خواهند شد.

در زیر یک مثال از CSS برای یک عنصر <div> مشاهده می‌کنید که از سه تصویر پشت زمینه استفاده می‌کند:

div {
  background:  url("foreground.png") 0 0 no-repeat, url("middle-ground.png") 0 0 no-repeat, url("background.png") 0 0 no-repeat;
}

کد قبلی از یک مقدار shorthand برای ویژگی background استفاده کرده و چندین مقدار تصویر پشت زمینه را با هم تغییر می‌دهد.

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

مثال چندین تصویر پشت زمینه

اجازه دهید یک بار دیگر به سراغ مثال پیغام هشدار موفقیت برگردیم تا هر دو تصویر پشت زمینه tick و تصویر پشت زمینه گرادینت خطی را با هم ترکیب کنیم.

برای این منظور، دو مقدار درون دومین ویژگی background قرار می‌دهیم. اولین مقدار، یعنی اولین تصویر، تصویر tick خواهد بود. دومین مقدار، یعنی آخرین تصویر، گرادینت خطی خواهد بود. دو مقدار با ویرگول از هم جدا شده‌اند.

HTML

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

CSS

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

امتحان ویژگی‌های background جدید

علاوه بر پشت زمینه‌های گرادینت و چندین تصویر پشت زمینه، CSS3 همچنین سه ویژگی CSS جدید نیز معرفی کرده‌ است: background-clip، background-size و background-origin.

ویژگی background-size به ما اجازه می‌دهد تا سایز یک تصویر پشت زمینه را تغییر دهیم، در حالی که ویژگی‌های background-clip و background-origin به ما اجازه می‌دهند تا محل اصلاح شدن یک تصویر پشت زمینه و محل قرار گرفتن یک تصویر پشت زمینه درون عنصر را کنترل کنیم (برای مثال درون مرز یا درون padding).

Background-size در CSS3

ویژگی background-size به ما امکان می‌دهد تا یک سایز برای تصویر پشت زمینه مشخص کنیم. این ویژگی چند مقدار مختلف از جمله مقادیر طولی و کلیدواژه‌ای را می‌پذیرد.

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

مهم است دقت کنید که مقادیر درصدی مرتبط با سایز عنصر هستند، نه سایز اورجینال تصویر پشت زمینه.

در نتیجه، مشخص کردن یک ویژگی background-size با طول 100% باعث می‌شود تصویر پشت زمینه کل عرض عنصر را اشغال کند.

اگر یک مقدار دوم پس از عرض مشخص نشده باشد، مقدار ارتفاع به طور خودکار به گونه‌ای مشخص می‌شود که نسبت تناسب (Aspect ratio)تصویر پشت زمینه حفظ شود.

مقدار کلیدواژه‌ای auto را می‌توان یا به عنوان مقدار عرض یا طول استفاده کرد (بستگی به این دارد که کدام یک نسبت تناسب تصویر پشت زمینه را حفظ می‌کنند).

برای مثال، اگر بخواهیم ارتفاع تصویر پشت زمینه را روی 75% از ارتفاع عنصر مشخص کنیم و در عین حال نسبت تناسب تصویر را نیز حفظ کنیم، می‌توانیم از ویژگی background-size با مقدار auto 75% استفاده کنیم.

div {
  background: url("shay.jpg") 0 0 no-repeat;
  background-size: auto 75%;
  border: 2px dashed #9799a7;
  height: 240px;
  width: 200px;
}

مقادیر کلیدواژه‌ای Cover و Contain

علاوه بر مقادیر طولی برای ویژگی background-size، مقادیر کلیدواژه‌ای cover و contain نیز برای این ویژگی قابل استفاده هستند.

مقدار کلیدواژه‌ای cover مشخص می‌کند که تصویر پشت زمینه مجدداً سایز بندی خواهد شد تا کاملاً عرض و ارتفاع یک عنصر را بپوشاند. نسبت تناسب اورجینال تصویر پشت زمینه حفظ شده و در عین حال تصویر در صورت نیاز کشیده یا کوچک می‌شود تا کل عنصر را بپوشاند.

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

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

برای این منظور، نسبت تناسب اورجینال تصویر پشت زمینه حفظ خواهد شد، اما تصویر در صورت نیاز کشیده یا کوچک می‌شود تا درون عرض و ارتفاع عنصر باقی بماند. بر خلاف مقدار کلیدواژه‌ای cover، کلیدواژه contain همیشه کل تصویر پشت زمینه را نمایش می‌دهد.

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

هر دو مقدار کلیدواژه‌ای cover و contain ممکن است در نهایت تصاویر پشت زمینه کمی مختل شده فراهم کنند، به خصوص وقتی تصاویر ورای ابعاد اورجینالشان کشیده می‌شوند.

باید در زمان استفاده از این مقادیر حواسمان به این مسئله باشد، تا مطمئن شویم که استایل‌های به دست آمده نهایی رضایت بخش و مورد قبول باشند.

Background-clip و background-origin در CSS3

ویژگی background-clip منطقه سطحی که یک تصویر پشت زمینه آن را پوشش می‌دهد را مشخص می‌کند و ویژگی background-origin مشخص می‌کند که ویژگی background-position باید در کجا قرار داشته باشد.

معرفی این دو ویژگی جدید برابر با معرفی سه مقدار کلیدواژه‌ای جدید است که عبارت‌اند از: padding-box، border-box و content-box. هر کدام از این سه مقدار را می‌توان برای ویژگی‌های background-clip و background-origin به کار برد.

div {
  background: url("shay.jpg") 0 0 no-repeat;
  background-clip: padding-box;
  background-origin: border-box;
}

مقدار ویژگی background-clip به صورت پیش‌فرض روی border-box تنظیم شده است و به یک تصویر پشت زمینه امکان گسترش یافتن به همان منطقه به سمت هر کدام از مرزها را فراهم می‌کند.

در عین حال، مقدار ویژگی background-origin به طور پیش‌فرض روی padding-box تنظیم شده است و به ابتدای یک تصویر پشت زمینه اجازه می‌دهد تا به سمت padding یک عنصر گسترش یابد.

مقدار border-box پشت زمینه را به سمت مرز یک عنصر گسترش می‌دهد

تصویر ۱۴.۲. مقدار border-box پشت زمینه را به سمت مرز یک عنصر گسترش می‌دهد.

مقدار padding-box پشت زمینه را به سمت padding یک عنصر گسترش می‌دهد، اما پشت زمینه درون مرزها محدود یا contained شده است

تصویر ۱۴.۳. مقدار padding-box پشت زمینه را به سمت padding یک عنصر گسترش می‌دهد، اما پشت زمینه درون مرزها محدود یا contained شده است.

مقدار content-box پشت زمینه را درون مرز و padding یک عنصر قرار می‌دهد

تصویر ۱۴.۴. مقدار content-box پشت زمینه را درون مرز و padding یک عنصر قرار می‌دهد.

اولین باری که در مورد این مقادیر کلیدواژه‌ای صحبت کردیم، زمانی بود که ویژگی box-sizing را در جلسات هفتم و هشتم توضیح دادیم. مقادیر به خودی خود از لحاظ معنایی تغییر نمی‌کنند، اما کاربرد‌های آن‌ها با استفاده از ویژگی‌های پشت زمینه مختلف تغییر می‌کنند.

خلاصه

افزودن پشت زمینه‌ها و گرادینت‌ها به صفحات، به ما اجازه می‌دهد تا به طراحی ظاهری سایتمان کمی رنگ و لعاب بدهیم. این ویژگی‌ها همچنین به تعریف چگونگی گروه‌بندی محتوا و به بهبود و پیشرفت layout و طراحی صفحات ما به طور کلی کمک می‌کنند.

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

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

  • گرادینت‌های CSS، هم خطی و هم radial‌ یا شعاعی و چگونگی سفارشی‌سازی آن‌ها

  • چگونگی اعمال چند تصویر پشت زمینه به یک عنصر

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

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

اما قبل از آن، به بررسی چگونگی ایجاد لیست‌ها از لحاظ معنایی خواهیم پرداخت.

با 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 در جلسه قبلی بررسی شد. این مبحث که ...

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

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

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