انداختن حاشیه و کادرهای ساده و شیک برای عکس ها بوسیله 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 */

}

منبع:websiteha.com


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