آموزش css3 : خاصیت border-image در خطوط حاشیه
منظور از تبلیغات اینترنتی بنری چیست؟
2015-11-01آپدیت های الگوریتم پنگوئن ۲۰۱۵
2015-11-02آموزش css3 : خاصیت border-image در خطوط حاشیه
خاصیت border-image در خطوط حاشیه :
به وسیله این خاصیت می توان یک عکس را به عنوان خطوط حاشیه برای یک عنصر به کار برد . شکل کلی استفاده از این خاصیت به شرح زیر است :
این خاصیت یک خاصیت چند مقداری بوده و حالت کوتاه و خلاصه شده چندین خاصیت است .
border-image-source, border-image-width, border-image-outset و border-image-repeat
برای تعیین خواص فوق دو راه وجود دارد :
- تعیین مقدار کلیه خواص در خاصیت چند مقداری border-image .
- تعیین هر کدام از خواص به صورت جداگانه .
راه اول راهی بهتر و متداول است. زیرا حجم کدنویسی را کاهش داده و نظم بهتری به کد نویسی می دهد.
در روش اول در واقع باید مقدار هر کدام از خاصیت های border را به ترتیب قرار داد . در جداول زیر به توضیح هر یک موارد بالا می پردازیم و سپس با ارایه چند مثال آنها را در عمل به شما نمایش می دهیم :
- مقدار عددی بر حسب pixel یا pt مثلا px 10 .
- مقدار بر حسب درصد مثلا % ۱۰ .
- قردادن مقدار برابر با auto . که باعث می شود مقدار خود را از عنصر مادر به ارث ببرد .
border-image-widthwidth : این شاخصه میزان فاصله محتویات درون عنصر با خطوط حاشیه را تعیین می کند.
border-image-outsetoutset : این خصیصه تعیین می کند که اگر عکس مورد نظر برای خطوط حاشیه کوچکتر از مقدار لازم بود ، آیا برای پوشش کل ناحیه خطوط حاشیه ، تکرار ( repeat ) یا بزرگنمایی ( stretch ) شود . این خصیصه می تواند با یکی از ۳ حالت زیر مقدار دهی شود :
- stretch : این مقدار باعث می شود تا عکس برای پوشاندن کل ناحیه خطوط نمایش ، بزرگنمایی و کشیده تر از حالت معمولی شود .
- repeat : این مقدار باعث می شود تا عکس برای پوشاندن کلیه ناحیه خطوط نمایش ، به دفعات لازم تکرار شود .
- round : این مقدار باعث می شود تا عکس برای پوشاندن کل ناحیه خطوط نمایش ، به صورت کاشی وار ( tile ) در تمام ناحیه قرار بگیرد . به عبارت دیگر با تکرار در ۲ جهت عمودی و افقی کل فضا را پوشش خواهد داد.
پشتیانی در مرورگر های مختلف :
متاسفانه این خاصیت به صورت عادی توسط هیچ یک از مرورگر های مطرح پشتیانی نمی شود . برای پشتیبانی در مرورگرهای مختلف باید برای هر کدام ، کد لازم آنها که در جدول زیر آمده را استفاده نمود :
۱٫موزیلا فایرفاکس
مرورگر فایرفاکس با اعمال یک تغییر در کد خصیصه از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خصیصه را به صورت moz-border-image- بنویسید.
۲٫اپرا
مرورگر اپرا با اعمال یک تغییر در کد خصیصه از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خصیصه را به صورت o-border-image- بنویسید .
۳٫اینترنت اکسپلورر
این خصیصه در مرورگر اینترنت اکسپلورر پشتیبانی نمی شود .
۴٫گوگل کروم
مرورگر کروم با اعمال یک تغییر در کد خصیصه از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خصیصه را به صورت webkit-border-image- بنویسید.
مثال های عملی :
پس از توضیح روش استفاده از خصیصه و نحوه سازگاری آن با انواع مرورگر ها ، کاربرد آن را چند مثال به صورت عملی به شما نمایش می دهیم . دقت کنید که اگر مرورگر شما IE باشد ، به علت عدم پشتیبانی این مرورگر از خاصیت border-image ، خروجی ها به صورت صحیح نمایش داده نخواهند شد :
مثال ۱ : در مثال اول یک عکس را به عنوان خط حاشیه برای یک تگ < div > به کار برده و کد اصلی و کد متناسب برای هر نوع مرورگر را به شما نمایش داده ایم . در کد خاصیت ابتدا آدرس کامل عکس را تعیین کرده و سپس مقدار پارامترهای width و outset را به ترتیب برابر با ۳۰ و ۳۰ قرار داده ایم . همچنین برای نحوه تکرار عکس گزینه round برای تکرار ،انتخاب شده است :
< html >
< head >
< style >
div
{
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round; /* کد اصلی */
}
< /style >
</head>
<body>
< div > border image example < /div >
</body>
</html>
مثال ۲ : در مثال دوم ، کد بالا را بازنویسی کرده و در آن مقدار پارامتر repeat را برابر با stretch قرار داده ایم . تفاوت را در خروجی مثال ها مقایسه نمایید :
< html >
< head >
< style >
div
{
-moz-border-image:url(border.png) 30 30 stretch; /* Firefox */
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch; /* کد اصلی */
}
< /style >
</head>
<body>
< div > border image example < /div >
</body>
</html>
