انداختن حاشیه و کادرهای ساده و عالی به تصاویر

افزودن قاب و حاشیه (border) زیبا به عکس ها و تصاویر در وبسایتها، جلوه پیج ها را تغییر می دهد. روش های مختلفی برای انداختن کادر در اطراف عکس ها و یا سایر عناصر HTML وجود دارد، اما استایل های پیش فرض برای ایجاد حاشیه چندان زیبا نیستند. در این ارسال با ترکیب دستورات مختلف در CSS حاشیه ای ساده و زیبا در اطراف عکس های مورد استفاده در صفحات وب ایجاد خواهیم کرد.

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

image.axd?picture=2011%2f12%2fbordering انداختن حاشیه و کادرهای ساده و عالی به تصاویر

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

Image Bordering-websiteha.com.rar (42.49 kb)

رمز فایل فشرده: www.websiteha.com
حجم فایل فشرده: ۴۲ کیلوبایت

HTML

<div class="shadow">
<img src="shadowimg.jpg" alt="تصویر مورد نظر">
</div>

CSS

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

body
{
margin:40px 40px; /* top,left margins to display the image*/
}
div.shadow
{
float: left; /* Align the div(container of the image) left */
padding: 0 5px 5px 0;
}
div.shadow img
{
display: block; /* Set the display type of the div(image) */
position: relative; /* Attributes which is used for positioning the image(relative,obsulte,..) */
top: -2px; /* Position the image from the top */
left:-2px;/* Position the image from the left */
padding:8px; /* Main attribute of this css, which will specify the border size of the image*/
background:#FFF; /* Attribute used to specify the color of the image border */
border:1px solid; /* Specify the image border(can specify the different styles)*/
border-color: #ccc #666 #666 #ccc /* specify the left,right,top,bottom color of the border */
}