۱۱
تیر

جلسه ۴۰ : حاشیه تصویری ( border-image ) در CSS

دسته‌بندی‌ها :

جزئیات
نوع مطلبآموزشی

مقدمه

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

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

در پست های آموزشی قبلی css ، ما آموزشهای کاربردی با موضوعات ایجاد نوار منو navigation در css ، ایجاد گالری تصاویر در css ، معرفی واحدهای تنظیم اندازه در css و … ارائه کردیم.

همچنین برای کار با فضای خالی بین عناصر html و منظم کردن. ترتیب قراری گیری عناصر در قالب وب سایت، آموزشهای کار با فضای بین عناصر html در css ، مدیریت فضای خالی داخل عناصر html در css را نیز ارائه کردیم.

در ادامه این پست آموزشی نیز به آموزش چگونگی استفاده از تصویر به عنوان کادر تزیینی دور عناصر در css می پردازیم.

کادر تزیینی دور عناصر در css

استفاده از تصویر به عنوان کادر تزیینی دور عناصر در css

در css شما می توانید. با استفاده از ویژگی border-image ، یک کادر زیبا و کاربر پسند را در اطراف عناصر html موجود در صفحه وب خود قرار دهید. این ویژگی این اجازه را به شما می دهد که از یک تصویر به عنوان یک کادر تزیینی در اطراف عناصر html موجود در صفحه وب خود استفاده کنید.

ویژگی border-image دارای سه قسمت است:

۱- تصویری که قرار است به عنوان کادر تزیین استفاده شود.

۲- آدرس تصویر مربوطه

۳- اینکه بخش وسط تصویر در زمان تبدیل شدن به کادر، به همان صورت تکرار شود یا کش داده شود.

مثال ۱:

در کد زیر، تصویر مشخص شده مانند کادر در اطراف عنصر html قرار گرفته و بخش میانی تصویر تکرار می شود:

مثال :

#borderimg {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(border.png) 30 round;
}

#borderimg {

border: 10px solid transparent;

padding: 15px;

border-image: url(border.png) 30 round;

}

مثال ۲:

در کد زیر، تصویر مشخص شده مانند کادر در اطراف عنصر html قرار گرفته و بخش میانی تصویر کش داده می شود:

مثال :

#borderimg {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(border.png) 30 stretch;
}

#borderimg {

border: 10px solid transparent;

padding: 15px;

border-image: url(border.png) 30 stretch;

}

منظم کردن و جلوه دادن به کادر در اطراف عناصر html

با کدهای css می توانید کادر ایجاد شده را منظم تر کرده و جلوه های خاصی به آن بدهید.

مثال:

مثال :

#borderimg1 {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(border.png) 50 round;
}

#borderimg2 {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(border.png) 20% round;
}

#borderimg3 {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(border.png) 30% round;
}

#borderimg1 {

border: 10px solid transparent;

padding: 15px;

border-image: url(border.png) 50 round;

}

#borderimg2 {

border: 10px solid transparent;

padding: 15px;

border-image: url(border.png) 20% round;

}

#borderimg3 {

border: 10px solid transparent;

padding: 15px;

border-image: url(border.png) 30% round;

}

QR: جلسه ۴۰ : حاشیه تصویری ( border-image ) در CSS

به اشتراک بگذارید

آموزش border در css ,آموزش استفاده از تصویر به عنوان کادر دور عناصر در css ,آموزش ایجاد کادر دور عناصر html در css ,استفاده از تصویر به عنوان کادر تزیینی دور عناصر در CSS ,استفاده از تصویر به عنوان کادر دور عناصر در CSS ,کار با border ,ویژگی border- image

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۴۰ : حاشیه تصویری ( border-image ) در CSS

مقدمه

استفاده از تصویر به عنوان کادر تزیینی دور عناصر در css

منظم کردن و جلوه دادن به کادر در اطراف عناصر html

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ