افزودن قاب و حاشیه (border) زیبا به عکس ها و تصاویر در وبسایتها، جلوه پیج ها را تغییر می دهد. روش های مختلفی برای انداختن کادر در اطراف عکس ها و یا سایر عناصر HTML وجود دارد، اما استایل های پیش فرض برای ایجاد حاشیه چندان زیبا نیستند. در این ارسال با ترکیب دستورات مختلف در CSS حاشیه ای ساده و زیبا در اطراف عکس های مورد استفاده در صفحات وب ایجاد خواهیم کرد.
توسط این کدها، دیگر نیازی نیست که هر بار که میخواهید تصویری در وب سایت خود قرار دهید، به فتوشاپ رفته و حاشیه را بر روی عکس اعمال کنید. کافیست یکبار این کد را نوشته و آن را بر روی صفحات وب سایت خود اعمال کنید. در اینجا تصویری را قبل و بعد از اعمال این افکت مشاهده میکنید:
مشاهده میکنید که چطور یک تصویر بسیار معمولی و تخت، تنها با استفاده از دستورات 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 */ } |
می توانید با کمی تغییر به راحتی استایل های مورد علاقه و مناسب برای قالب وبسایت خود را نیز ایجاد کنید.
,Photos Css,Cssra Photos,Cssra Photos 2014,Csshl Photos
,Css Photos Gallery,Cssra Photos 2015,Cssra Photos 2013,Css Photos Grid,Css