محبوب ترین نوشته ها
استان زنجان
دیوار زنجان
ساختمان پزشکان زنجان
پورتال استان زنجان
طراحی سایت در زنجان
هوای زنجان
تبلیغات در سایت زنجان
کانال تلگرام استان زنجان
مرکز خرید و فروش خودرو زنجان
اطلاعات عمومی استان زنجان
بانک کوثر زنجان
مشاهده ترافیک زنجان
سایت پزشکان زنجان
تبلیغات در زنجان
درباره سایت استان زنجان
ترافیک آنلاین استان زنجان
مساحت استان زنجان
مساحت شهر زنجان
نام دیگر شهر زنجان
شهرهای زنجان
اخبار استان زنجان
بانک انصار زنجان
اذان صبح به افق زنجان
جاهای دیدنی زنجان
استان زنجان.pdf
بیمه پاسارگاد نمایندگی زنجان
فروشگاه اینترنتی زنجان
بانک اطلاعات پزشکان استان زنجان
سایت خبری زنجان
بازار خودرو زنجان
خرید بلیط زنجان
آژانس مسافرتی زنجان
کاملترین مقاله گنبد سلطانیه زنجان
آشنایی کامل با اقلیم آب و هوای استان زنجان
آموزش پرورش زنجان
نقشه کامل استان زنجان
دیوارزنجان
شهرک خودرو زنجان
پرواز زنجان به مشهد
سوالات مذهبی : احکام صیغه - پاسخ به سوالات شرعی
بازار آنلاین زنجان
کد پستی استان زنجان و شهرهای زنجان
هلال احمر زنجان
مجوز پورتال استان زنجان
جمعیت استان زنجان
جمعیت شهر زنجان
زبان مردم زنجان
بانک استان زنجان
بانک مهر اقتصاد زنجان
تفرجگاه های زنجان
تبلیغات اینترنتی در استان زنجان
فروشگاه اینترنتی کتاب زنجان
نرخ کرایه تاکسی ها در زنجان
فروشگاه صنایع دستی زنجان
نقشه آنلاین ترافیک+زنجان
استان زنجان و وجود ۱۷۰۰ اثر تاریخی در آن
زنجان دومین تولید کننده گوشت بوقلمون در ایران
سینما بهمن زنجان
مواد مخدر گل تهدیدی برای بانوان و جوانان استان زنجان
زنجان جز استان های کم حاشیه کشور است
شایعه کودک ربایی در زنجان و قتل در زنجان
ترفندهای کامپیوتر: چگونه یک رمز عبور ایمن انتخاب کنیم؟
ترفندهای کامپیوتر: استخراج صوت از ویدئو با VLC
پیوندها
بازدیدها
بازديد امروز :3258
بازديد ديروز :6885
بازديد کل :2902122
RSS

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


اضافه کردن قاب و حاشیه (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 +(آموزش)


نام شما


آدرس ایمیل


آدرس وب سایت


متن نظر




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





Loading...
دما هم اکنون ۲۵ °C
دمای زنجان در ساعات آینده


آخرین مطالب
شهردار زنجان: هیچ ترسی در بازدید خبرنگاران از پروژه‌ها نداریم
مدیرکل امور اجتماعی و فرهنگی استانداری زنجان: بازنمایی واقعه غدیر باید با محتوا برگزار شود
مدیرکل میراث فرهنگی استان زنجان:استان زنجان ۵۸۳ جاذبه تاریخی و دیدنی دارد
شایعه کودک ربایی در زنجان و قتل در زنجان
زنجان جز استان های کم حاشیه کشور است
بانک اطلاعات پزشکان استان زنجان
پرواز زنجان به مشهد
شهرک خودرو زنجان
دیوارزنجان
ساختمان پزشکان زنجان
سایت پزشکان زنجان
مواد مخدر گل تهدیدی برای بانوان و جوانان استان زنجان
نقشه آنلاین ترافیک+زنجان
نرخ کرایه تاکسی ها در زنجان
دیوار زنجان
مدیر کل میراث فرهنگی صنایع دستی و گردشگری استان زنجان:صنایع دستی بازوی توانمند اقتصاد مقاومتی
مشاهده ترافیک زنجان
فروشگاه صنایع دستی زنجان
سایت خبری زنجان
بازار خودرو زنجان
مرکز خرید و فروش خودرو زنجان
آغاز به کار طرح سیماک در استان زنجان
آژانس مسافرتی زنجان
مبلغ فطریه و کفاره بنا بر نظر آیت الله حسینی زنجانی اعلام شد
خرید بلیط زنجان
کاملترین مقاله گنبد سلطانیه زنجان
مبلغ فطریه و کفاره بنا بر نظر آیت الله شبیری زنجانی اعلام شد
پروژه هایی که در زنجان نیمه کاره مانده اند
استان زنجان و وجود ۱۷۰۰ اثر تاریخی در آن
سیرک بین المللی آفتاب
رئیس سازمان صنعت معدن و تجارت استان زنجان: کاریابی‌ ها به وظایف قانونی خود در استان زنجان عمل نمی کنند
آشنایی کامل با اقلیم آب و هوای استان زنجان
زنجان دومین تولید کننده گوشت بوقلمون در ایران
آموزش پرورش زنجان
حسن عباس نژاد مدیر کل حفاظت محیط زیست استان زنجان
کلینیک شفیعیه زنجان
سینما بهمن زنجان
نقشه کامل استان زنجان
دکتر : عوارض کولیت اولسراتیو +متن
دکتر : ارتودنسی و عوارض درمان ارتودنسی +متن
keyboard_arrow_up