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

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

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

انداختن فریم و حاشیه دور عکس با css

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

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

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

 

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

می توانید با کمی تغییر به راحتی استایل های مورد علاقه و مناسب برای قالب وبسایت خود را نیز ایجاد کنید.

نظرات (7) -

  • محمد

    09/14/1390 11:54:15 ب.ظ | پاسخ به این نظر

    سلام
    باز هم یک مورد حرفه ای رو آموزش دادی
    ممنون و سپاسگزاریم
    استاد بزرگ
    متاسفانه یا خوشبختانه با جوملا کار می کنیم و نمی دونم چطور باید این کدها رو تنظیم کنم که از آموزشت کمال استفاده رو ببرم
    اگر مقدرو شد بفرمائید تا ما هم استفاده کنیم
    سپاس

  • Admin

    09/15/1390 12:14:55 ق.ظ | پاسخ به این نظر

    سلام محمد جان، امیدوارم جوابم به نظری که توش گفته بودی گوشه چشمی به ما جوملا کارها داشته باش و ... رو خونده باشی.
    اما در مورد این سئوالات بگم، هر CMS یه فولدر theme داره، تو اون فولدر تم، یه فایل css هست که استایل سایت رو ایجاد میکنه، شما کافیه محتویات داخل بلاک div.shadow img رو ببری داخل اون css و در بلاکی که به عناصر داخل پست ها و صفحه ها استایل میده، کپی کنی. اونوقت این استایل به عکس های درون سایت شما اعمال خواهد شد.

  • محمد

    09/15/1390 10:03:11 ق.ظ | پاسخ به این نظر

    سلام
    حامد عزیز
    ممنونم از توجهت
    بله مطالعه کردم
    فقط شاید برخورد کرده باشیم که بعضی اوقات ای کیو ما پایین میاد و همین بلا سر من اومده.
    من با فایل css جوملا زیاد کار کردم فقط جالب اینه که وقتی به موضوع جدیدی می رسیم انتظارمون رفته بالا ، دوست داریم آموزش دهنده دوباره خیلی روون از اول توضیحش بده.
    من تا بلاک div.shadow img گرفتم اما بقیش رو نگرفتم اگه لطف کنی

  • هانی

    07/27/1391 01:33:33 ب.ظ | پاسخ به این نظر

    سلام و خسته نباشید شدید!!!
    واقعا عالیه مرسی مرسی مرسی
    من که دارم از مطالب این سایت لذت میبرم
    امیدوارم همیشه موفق باشی
    بازم تشکر

  • goodarzi

    02/28/1392 07:39:11 ب.ظ | پاسخ به این نظر

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

Loading