بخش tagline سایت مشکل خاصی ندارد اما اندکی زشت و ساده به نظر می رسد، پیشنهاد ما افزودن نواری مشابه به عکس زیر به عنوان پسزمینه این بخش است.
پسزمینه در نظر گرفته شده برای tagline
برای رسیدن به افکتی که در نظر داریم باید تصویر بالا را به گوشه راست tagline قفل کنیم. کاری که در CSS برای رسیدن به این هدف لازم است به شرح زیر است:
#tagline p {
font-style: italic;
font-family: Georgia, Times, serif;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .8em;
margin: 0;
background: #bed8f3 url(backgrounds/tagline-fade.jpg) repeat-y
right;
}
کلمه کلیدی right تمامی آن چیزی است که برای قرار دادن تصویر پسزمینه، در جایی که در نظر داریم لازم است، repeat-y نیز برای تضمین تکرار تصویر در صورت بزرگتر شدن اندازه tagline در آینده می باشد، برای مثال در صورت بزرگ کردن فونت tagline تصویر پشت آن به طور خودکار آنقدر تکرار می شود تا فضای خالی باقی نگذارد.
اندکی نقاشی در عنوان اولیه سایت
و حالا به شما نشان خواهیم داد که چگونه عنوان h1 سایت را اندکی پویاتر نماییم، آن هم با استفاده از تکنیکی که در مثال قبل استفاده کردیم. این بار نیز می خواهیم تصویر به گوشه راست صفحه قفل شود، البته تنها بخشی از این عکس دیده خواهد شد، لازم به ذکر است که دیگر نیازی به تکرار خودکار تصویر نیست.
تصویر در نظر گرفته شده به عنوان پسزمینه عنوان سایت
تصویر در نظر گرفته شده تونالیته ای تاریک داشته و به بهترین شکل ممکن عنوان سفید رنگ ما را به کاربر نشان می دهد، گوشه سمت چپ تصویر نیز همانطور که می بینید به راحتی درون رنگ آبی قسمت چپ صفحه محو می شود، ابعاد تصویر اندکی بزرگ تر از آن چیزی است که در سایت دیده خواهد شد، دلیل این امر اطمینان حاصل کردن از این است که در صورت تنظیمات شخصی کاربر در راستای بزرگ تر کردن فونت های مرورگر مشکلی در ظاهر سایت ما پیش نیاید، شاید عجیب باشد اما شما باید به فکر تنظیمات شخصی مرورگر کاربران سایت خود نیز باشید!
کد زیر را بعد از قوانین مربوط به h1، h2 و h3 وارد کنید، می خواهیم کد مربوط به رنگ پشتیِ آبی را که در فصل چهارم تعریف کرده بودیم اندکی تغییر داده و کار را زیباتر نماییم:
h1{
font-size: x-large;
color: white;
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
margin: 0;
background: navy url(backgrounds/header-bg.jpg) repeat-y right;
}
پس زمینه عنوان سایت، تغییر نهایی سایت در این فصل
