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

: مجموعه: ترفندهای اینترنتی

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

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

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

HTML

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 */

}