آموزش های حرفه ای
مای دیزاین به عنوان یکی از تولید کنندگان محتوای آموزشی در زمینه طراحی وب و گرافیک به صورت تصویری، با کیفیت و اختصاصی در خدمت شما کاربران عزیز می باشد!
نرم افزار آندروید
طراحی و ساخت نرم افزار آندروید خدمت جدیدی است که در مای دیزاین ارائه میشود. داشتن نرم افزار برای گوشی های هوشمند امری جدید و هیجان انگیز می باشد!
طراحی وب و گرافیک
یکی از خدمات ما طراحی سایت های ایستا و پویا با جدید ترین متد های روز دنیاست. ساخت قالب هایی سبک و در عین حال زیبا، با استفاده از وردپرس، تخصص ماست!
گرد کردن کوشه تصاویر و باکس ها به کمک 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 رو میزنم، مشخص نمیشه که گرد شده چون وقتی دیلیت میکنیم زیر اونجایی که دلیت شده سفید میشه :((

پاسخ دهید

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

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