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

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

Border-radius:5px;

در این نمونه من برای مثال زاویه ۵ رو به تمام کوشه های کار دادم.
اگر میخواید زوایای مختلفی به لبه های مختلف بدید باید از کد زیر استفاده کنید که کامل تره، کد بالا برای اینکه تمام زوایا ۵ هستش به صورت خلاصه و یک جا نوشته شده است.

Border-radius: top-left top-right bottom-right bottom-left;

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

Border-radius:0px 7px 0px 7px;

آموزش ساده اما کاربردی هست، امیدوارم به کارتون بیاد.

25 پاسخ به “گرد کردن کوشه تصاویر و باکس ها به کمک CSS”

  1. حمیدرضا گفت:

    سلام . خسته نباشید. ممنون از آموزش های خوبتون
    لطفا منوی سایتتون هم آموزش بدید مثلا چگونه وقتی موس روی منو میره منو بیاد بالا. مثل منو سایت شما

    ممنون. از سایت خوبتون لطفا آموزش های CSS بیشتر بزارید.

  2. نام و نام خانوادگی گفت:

    ممنون
    اما مرورگر بدردنخور IE پشتیبانیش نمیکنه

  3. آرش گفت:

    بدون توضیح، کامل؛ جامع:

    .my_rounded_corners{
    border: 0px solid #ccc;

    /* each value for each corner clockwise starting from top left */
    -webkit-border-radius: 15px 15px 0 0px;
    border-radius: 15px 15px 0 0px;
    }

  4. راضيه وثوقي گفت:

    عالی بود ممنون
    موفق باشید

  5. مهدی گفت:

    سلام مرسی داداش عالی بود.

  6. main port گفت:

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

  7. راضیه وثوقی گفت:

    لطفا اموزش تولید محتوا الکترونیک را در صورت امکان یکبار نکات کلیدی را مرور کنید

  8. امیرمهرانفر گفت:

    ممنون بسیار عالی بود 🙂

  9. omid گفت:

    با سلام
    می خواستم برایم یک قالب وردپرسی طراحی کنید ممنون

  10. بنیامین گفت:

    مرسی عالی بود

  11. سمیه گفت:

    مرسی خوب بود

  12. فرزاد گفت:

    سلام
    من یه آیکون دارم واسه یه اپلیکیشن
    چجوری میتونم دورش رو گرد کنم؟ توی فتوشاپ وقتی دورشو گرد میکنم به علت اینکه پس زمینه ش سفیده و وقتی برای حذف اون اضافات (به روش Smooth) دکمه Delete رو میزنم، مشخص نمیشه که گرد شده چون وقتی دیلیت میکنیم زیر اونجایی که دلیت شده سفید میشه :((

  13. احسان دادرس گفت:

    با سلام، اگر بخوام به تصاویری که فقط در محتوای وبسایت استفاده کردم استایل بدم چطوری باید اینکار رو انجام بدم؟

    شکل زیر صحیح نیست؟
    img {
    margin: 0 auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    padding-top: 30px 0 30px 0;
    border-radius: 8px;
    }

    • علی گفت:

      سلام. احسان جان این کد تمام تصاویری که در سایتتون هست رو به این استایل درمیاره.

      • احسان دادرس گفت:

        ممنون از پاسخ شما، اگر بخوام فقط تصاویر درون محتوا رو استایل دهی کنم. چکار کنم، وردپرس – قالب صحیفه
        استایل دهی به تصاویر با کد
        .attachment img
        {
        }
        در فایل استایل خط ۴۰۹۰

      • علی گفت:

        من که قالب شما رو ندیدم. لطف کنید آدرس سایتتون رو اعلام کنید تا بررسی کنم.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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