کد گرد شدن گوشه تصاویر

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

کد گرد شدن گوشه تصاویر

کد گرد شدن گوشه تصاویر

نیاز هستش که چند تا کد ساده رو به style.css قالبتون اضافه کنید اما نیاز به کمی دقت هستش.ما مثلا می خواهیم که فقط گوشه تصاویر یک قسمت سایت فقط اینطوری گرد باشند شما باید اون “کلاس” مورد نظر رو پیدا کنید تو قالب . مثلا تصاویر یا لوگوهایی که تو کلاس image-radius هستند . بعد شما باید به تصاویر مربوط به این کلاس یک استایل خاص مثلا گرد شدن گوشه تصاویر یا چرخش تصاویر رو با اضافه کردن یک img به اون کلاس اضافه کنید.برای مثال…


.image-radius{
}
.image-radius img{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}

همونطور که دیدید ما یک کلاس image-radius داشتیم حالا یک img بهش اضافه کردیم و توی اون کدهای مربوط به گرد شدن تصاویر رو قرار دادیم.

نکته : اینجا شعاش گردن شدن روی ۱۰ پیکسل تنظیم شده ، شما در صورت تمایل متناسب با سلیقه خودتون تغییرش بدید.

ساخت آنلاین استایل گرد شدن تصاویر

وب سایت www.border-radius.com این امکان رو برای شما فراهم کرده ، فقط به نکته بالا برای اضافه کردن کدها به محل مورد نظر دقت کنید.

پیش نمایش و دانلود کدها گرد شدن گوشه عکس ها

لینک دانلود

پیش نمایش

همچنین در مطالب قبلی سایت استایل چرخش ۳۶۰ درجه لوگو و تصاویر رو آموزش داده بودیم که با این مطلب تقریبا مشابه هستش ، می تونید از اون هم استفاده کنید.

یا حق

امتیاز شما برای این مقاله
6 نظرات
  1. محمدرضا می گوید

    با سلام.
    کد گردکرن تصاویر رو هم بگذارید(توجه داشته باشید گرد کردن کل تصویر نه گوشه ها)
    مرسی

  2. ƁƛƝƠƠƠ می گوید

    سلام وب خوبی دارین ممنونم…

  3. ماهان دانش می گوید

    بسیار از گروه دکتر وردپرس تشکر میکنیم من از این کد ها در قالبم استفاده کردم خیلی تشکر میکنم ازتون

  4. علی می گوید

    با تشکر عالی بود

  5. javad می گوید

    سلام دکی…این دمو که گذاشتی اصلا گرد نمیشه چک کن..این قالب رو هم برام ادیت نکردی دی:

    1. آرش حیدری می گوید

      چرا درسته ، فقط روی ie اجرا نمیشه … اندازم روی 10 گذاشتم ولی درسته کدها مشکلی نداره…
      اونم به روی چشم

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.