آموزش زیبا کردن تصاویر و گرد کردن گوشه های آن در وبلاگ یا وبسایت

آموزش زیبا کردن تصاویر موجود در وبلاگ و یا وبسایت به کمک CSS

برای انجام این کار لازم است که کد زیر را در قالب وبلاگ و یا وبسیات خود (در وردپرس بهتر است که این کد را در فایل header.php کپی کنید) قرار دهید. این کد باعث می شود که گوشه کلیه تصاویر موجود در سایت گرد (منحنی) شود و هنگامی که موس را روی تصاویر قرار می دهید ، تصاویر کمی پررنگ تر شود و در کل جلوه خاصی به وب شما می بخشد :

<style> img { border: 1px solid #737373; filter:alpha(opacity=80); opacity:0.8; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; -o-transition:all 0.3s ease-in; transition:all 0.3s ease-in; background-color: #C3C3C3; } img:hover { border: 1px solid #464646; filter:alpha(opacity=100); opacity:1.0; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #ccc; } </style>

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

برای انجام این کار ابتدا کد زیر را در فایل css قالب خود (مثلا : style.css) قرار داده و سپس به جای ” yourclass ” کلاس مورد نظر خود را وارد نمایید :

در صورت داشتن هر گونه سوال یا مشکل از بخش نظرات همین مطلب ما را مطلع سازید.