کاربرد border-image در CSS

تبدیل عکس به شکل تمبر با استفاده از خاصیت border-image

مقالات آنلاین زیادی در مورد border-image وجود دارد، اما من متوجه شده ام که تعداد کمی از آنها کاربردی هستند.

اما ما دراین مقاله سعی داریم تا یکی از کاربردی ترین مثال های border-image را به شما نشان دهیم، یعنی ایجاد یک تمبر پستی از یک عکس ساده.

چرا ما این کار را انجام می دهیم؟

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

تبدیل عکس به تمبر پستی با استفاده از تکنیک های فتوشاپ
و یا اضافه کردن Border به عکس با استفاده از CSS

به نظر من روش دوم از انعطاف پذیری بیشتری برای طراح وب برخوردار است.

در مرحله اول باید Border مورد نظرمان را ایجاد کنیم. راه های زیادی برای ایجاد آن وجود دارد، اما من از یک صفحه با ابعاد 30*30 پیکسل با یک ماسک ساده (چهار نیم دایره) که هر کدام دریک لبه قرار می گیرند استفاده می کنم.

اکنون از عکس png به عنوان border-image استفاده می کنیم:

.stamp { width: 200px; height: 148px; border-image: url(stamp-border.png) 8; border-width: 8px; }

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

.stamp { width: 200px; height: 148px; border-image: url(stamp-border.png) 8 round; border-width: 8px; border-style: solid}

برای اینکه کد بالا در فایرفاکس اجرا شود هم باید border-width تعریف شود و هم border-style. حتی اگر width از قبل وجود داشته باشد و style توسط عکس تعیین شده باشد.

اکنون می توانیم این کلاس را روی هر عکسی که می خواهیم اعمال کنیم تا آن را به شکل تمبر پستی در بیاوریم.