محبوب ترین ها    | استان زنجان | مپ زنجان          موضوعات داغ    | کلینیک شفیعیه زنجان | استان زنجان افراد آنلاین : ۷۱     تبلیغات | درباره سایت |
Loading...
دما هم اکنون ۴ °C
دمای زنجان در ساعات آینده

تبليغات A
محبوب ترین ها

در اینترنت هدفمند وارد شوید و اصولی استفاده کنید


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

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

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

 
HTML

<div class="shadow">

   <img alt="توضیح مربوط به تصویر" src="/آدرس تصویر">

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

}

منبع:websiteha.com

پایان مطلب درباره رازهای جذاب اینترنت/ هدفمند باشید...

برچسب ها  


دیدگاه های شما - رازهای جذاب اینترنت : انداختن حاشیه و کادرهای ساده و شیک برای عکس ها بوسیله CSS +(آموزش)


نام شما


آدرس ایمیل


آدرس وب سایت


متن نظر




لطفا کد مشاهده شد در تصویر را وارد نمایید







تبليغات B
آخرین مطالب سایت استان زنجان

اوقات شرعی به وقت زنجان
اذان صبح۰۵:۰۵
طلوع خورشید ۰۶:۳۶
اذان ظهر۱۳:۱۵
غروب خورشید ۱۹:۵۵
اذان مغرب ۲۰:۱۴
نیمه شب شرعی ۰۰:۳۰
بازدیدها
بازديد امروز :4600
بازديد ديروز :19619
بازديد کل :12595329