استایل بندی تصاویر

ممکنه تا به حال واستون این مسئله یا این سوال پیش اومده باشه که چجوری بعضی از سایت ها کاری می کنند که موقعی که موس روی یک عکس میره حاشیه دور عکس رنگش عوض میشه. توی اسکرین شات دارین یکی از پست های من رو می بینید که با رفتن موس روی اون رنگ حاشیه عکس عوض میشه… اگه واستون جذاب بود و دوس دارین این آموزش رو دنبال کنید با ما در ادامه مطلب همراه باشید…

اولین قدم آشنایی خیلی کوچیک با سی اس اس هست. حالا لازمه که فایل استایل قالبتون رو باز کنید و قسمتی رو که برای چارچوب پست هست رو پیدا کنید. مثلا توی استایل قالب ما آی دی پست (post#) برای پست هامون در نظر گرفته شده. خوب حالا کدهای پایین رو به زیر استایل پستتون منتقل می کنید. (توصیه میشه که تک به تک کدها رو بنویسید)

#post img {
border: 2px solid #d3d3d3;
padding: 4px;
max-width: 600px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
}#post a:hover img, #post img:hover {
background-color: #f5f5f5;
}
#post img.no-border, #post img.no-border:hover, #post a:hover img.no-border {
border: 1px solid #fff;
background-color: #fff;
}


حالا به توضیح کدهای بالا می پردازیم…

قسمت اول : همونطور که توی بخش اول می بینید ما اومدیم تمام تصاویری رو که توی آی دی پست قرار گرفته اند رو انتخاب کردیم و یه حاشیه با سایز ۲ پیکسل و رنگ #d3d3d3 بهشون دادیم.
خط ۲ گفته که از هر ۴ طرف به اندازه ۴ پیکسل فاصله بگیر.
خط ۳ گفته بیشترین پهنای عکس رو ۶۰۰ پیکسل قرار بده که شما می تونید از این برای مواقعی استفاده کنید که با بزرگ شدن پهنا از یه اندازه با به هم ریزی قالب مواجه میشین.
خط ۴ و ۵ و ۶ برای گرد کردن گوشه های حاشیه هست. هرچی عدد زیادتر بشه به دایره نزدیک میشیم.

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

قسمت سوم: قسمت سوم برای کسانی هست که میخوان بعضی از مطالبشون حاشیه داشته باشه؛ بعضی هاش نداشته باشه. توی این قسمت تعریف می کنیم که اگه کلاس (div class) عکس ما no-border قرار گرفت عکس یه حاشیه به اندازه ۱ پیکسل و با رنگ سفید داشته باشه. همچنین توی خط دوم پشت زمینه عکس رو هم سفید (#ffffff) قرار دادیم.
پاورقی: راستی یه چیز رو یادم رفت بگم؛ لازمه شما آی دی (id) یا کلاس (class) پستتون رو بجای #post قرار بدید.
کار راحتی بود!!! نه؟؟؟