در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش گام به گام CSS3 بخش دوم: حاشیه های تصویری و پشت زمینه

با بخش دوم از سری آموزش های CSS3 در خدمت شما دوستان عزیز آی تی پرو هستم، در این بخش به حاشیه های تصویری می پردازیم. خب در دوره آموزشی قبلی با حاشیه ها آشنا شدید و دانستید که برای تعیین یک حاشیه (border) باید از خاصیت border استفاده کنید.

یادآوری: به مثال زیر توجه کنید:

p
        {
            text-align: center;
            border:2px solid #ffaaee;
            padding: 12px;      
        }

خب در CSS ورژن قبلی امکان انتخاب تصویر به عنوان حاشیه وجود نداشت اما در CSS3 این امکان به راحتی امکان پذیر است، کافی است که تصویر مورد نظر کمی هوشمندانه انتخاب شده باشد. برای انتخاب تصویر به عنوان حاشیه باید از border-image استفاده کنید. به مثال زیر توجه کنید:

p
        {
            text-align: center;
            border:10px solid transparent;
            border-image: url(img/bg.png);
        }

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

نکته: border-image کوچک شده چندین خاصیت دیگر از جمله border-image-source ، border-image-width ، border-image-repeat و... است. البته در حالت عادی تنها از دو خاصیت url() و repeat استفاده می شود.

مقادیر خاصیت repeat» برای تکرار کردن تصویر می توانید از دو مقدار round , Stretch استفاده کنید، این خاصیت زمانی استفاده می شود که تصویر مورد نظر تمام حاشیه را در برگیرد. به مثال زیر توجه کنید:

  p
        {
            text-align: center;
            border:100px solid transparent;
            border-image: url(img/bg.png) 30 round;
        }

یکی دیگر از خاصیت های اصلی border-image، خاصیت slice است که با یک عدد طبیعی یا درصدی مقداردهی می شود. در مثال بالا عدد 30 نشانه تعداد تکه یا slice ها است.

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

در نسخه های قبلی CSS مستقیما امکان تعیین اندازه پشت زمینه وجود نداشت مگر آنکه پشت زمینه تون رو داخل یک بلاک قرار داده و سپس اندازه مورد نظر مقداردهی شود. اما در CSS3 این حالت به صورت مستقیم امکان پذیر است، کافی است تا از خاصیت background-size استفاده کنید. دو مقدار دریافتی از این خاصیت مربوط به عرض و سپس ارتفاع است. به مثال زیر توجه کنید.

body
        {
          background: url(img/bg.png);
          background-size: 80px 100px;
          background-repeat:no-repeat;
        }

نکته: خاصیت background-size علاوه بر مقدار عددی می تواند دو مقدار contain , cover را نیز دریافت کند.

Cover: اگر می خواهید تصویر مورد نظر کل صفحه را در برگیرد باید کل از این خاصیت استفاده شود.

Contain: خود را به اندازه محتویات صفحه تغییر اندازه می دهد.

مکان شروع پشت زمینه هم تا حدی مهم است این حالت توسط خاصیت background-clip امکان پذیر است، سه مقدار این خاصیت عبارت است از:

• :border-box این مقدار حالت پیش فرض خاصیت است، از قسمت خروجی حاشیه در قسمت بالا سمت چپ شروع می شود.

• padding-box: از قسمت خروجی حاشیه هایی که با padding همراه است.

• content-box: معمولا از قسمتی که محتویات شروع می شود پشت زمینه دریافت می کند.

شاید جالب باشد که بتوان دو تصویر یا رنگ را به عنوان پشت زمینه انتخاب کنید. این حالت در CSS3 امکان پذیر است. کافی است که دو تصویر را با یک علامت کاما از هم جدا کنید. به مثال زیر توجه کنید:

    body
        {
           background-image: url(img/bg.png) , url(img/bg1.png);
            background-size: 80px 100px , 200px 300px;
            background-position: right top , top left;
            background-repeat:no-repeat;
        }

اگر دقت کنید، در مثال بالا دو تصویر مورد نظر آدرس دهی شده و با کاما از هم جدا شدند، اما نکته جالب در خاصیت های background-size , background-position است، هر کدام از مقادیری که با کاما از هم جدا شده مربوط به یکی از تصاویر است.

حالا که کلا با بحث پشت زمینه آشنا شدید باید در نظر بگیریم که یک وبسایت واقعی چه نوع پشت زمینه احتیاج دارد؟! در سایت های واقعی پشت زمینه در وسط صفحه قرار می گیرد، موقعیت آن همواره ثابت است و اندازه آن باید Cover باشد. مثال زیر پشت زمینه کاملی از صفحه وب است.

body
{
    background: url(img/bg.png) center;
    background-position: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

جمع بندی: خب در این قسمت دانستیم که با خاصیت border-image می توانید حاشیه های تصویری بسازید همچنین با چندین خاصیت جدید Background آشنا شدیم.

نویسنده : ارسطو عباسی

منبع : انجمن تخصصی فناوری اطلاعات ایران

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

#دوره_مقدماتی_css3 #آموزش_css3 #‌آشنایی_با_کاربردهای_css3 #طراحی_وب_با_css3
عنوان
1 آموزش گام به گام CSS3 بخش اول: مقدمات، مرورگر ها و گوشه های گرد رایگان
2 آموزش گام به گام CSS3 بخش دوم: حاشیه های تصویری و پشت زمینه رایگان
3 آموزش گام به گام CSS3 بخش سوم: رنگ ها و سایه ها رایگان
زمان و قیمت کل 0″ 0
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

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