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

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

Border-radius:5px;

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

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

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

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

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

21 پاسخ به “گرد کردن کوشه تصاویر و باکس ها به کمک 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 رو میزنم، مشخص نمیشه که گرد شده چون وقتی دیلیت میکنیم زیر اونجایی که دلیت شده سفید میشه :((

پاسخ دهید

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

آخرین محصولات فروشگاه
برخی مطالب تصادفی مای دیزاین
حاشیه بیرونی یا Outline در CSS3
استایل نویسی حالت های مختلف لینک ها
important! در سی اس اس چیست؟
تغییر رنگ به کمک ترفند ساده فتوشاپ (سینمایی)
طرح لایه باز مانیتور به سبک تخت (flat)
قالب های وردپرس را قورت دهید!