مهمان عزیز خوش آمدید. ورود ثبت نام



امتیاز موضوع:
  • 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5

[-]
کلمات کلیدی
آموزش کامل border radius

آموزش کامل Border-Radius
سلام به همه ی دوستان عزیز. امروز می خوام به شما نحوه کامل کار کردن با border-radius یکی از خاصیت های اصلی css رو به شما اموزش بدم.
تصویر: http://iranian-web.ir/images/paperclip.gifکار: ساخت انحنا و گردی در اطراف div و عکس و....(منظور از اطراف در 4 گوشه)
تصویر: http://iranian-web.ir/images/paperclip.gifسازگاری:
   
توضیحات اضافه: قبلا که این خاصیت وجود نداشت طراحان وب مجبور بودند با ابزار هایی(معمولا فتوشاپ) برای چهار گوشه جسم شکل(انحنا) درست کنند و اون رو به چهار طرف آدرس بدن که کار واقعا سختی بود ولی خدا را شکر W3C عزیز این خاصیت رو هم اضافه کرد تا ما نو پا ها خسته نشیم همین اول راه!:KSQ:
خب با بسم الله الرحمن الرحیم کارمون رو شروع می کنیم:
نحوه کلی نوشتن استاندارد به 2 صورت هست:
1-
کد:
.mesal {
    border-radius: 10px;
}

که .mesal اسم کلاس ماست. به جای 10 می تونید هر عددی که می خواین بزارید و به جای px می تونید از دیگر واحد ها مانند em و یا حنی درصد % هم استفاده کنید.
این کد در اصل میگه که از همه طرف 10 پیکسل میزان درجه و انحنا داشته باشه. حالا ما شاید بخواهیم به هر طرف یه انحنا بدیم که شکل جالب تری درست بشه! بنظورتون چیکار باید بکنیم....
راهکار خیلی سادس باید به سراغ استاندارد دوم بریم:
کد:
.mesal2 {
    border-radius: 10px 0 10px 0;
}

این کد خیلی سادس ک با استفاده از این توضیح متوجه می شد:
کد:
.tozih-mesal {
    border-radius:  (میزان چپ پایین) (میزان راست پایین) (میزان راست بالا) (میزان چپ بالا) ;
}

البته جای خالی نمونه یک نوع دیگه هم دارید که به این صورته ولی روش بالا خیلی بهتره و استاندارد تر:
کد:
border-top-left-radius : 25px ;
border-top-right-radius : 20px ;
border-bottom-right-radius : 25px ;
border-bottom-left-radius : 20px ;

که توضیحش میشه:
کد:
.tozih-mesal {
    border-top-left-radius : میزان چپ بالا ;
    border-top-right-radius : میزان راست بالا ;
    border-bottom-right-radius : میزان راست پایین ;
    border-bottom-left-radius : میزان چپ پایین ;
}

امیدوارم از این آموزش لذت برده باشید.
تصویر: http://iranian-web.ir/images/paperclip.gif منبع: ایرانیان وب
 


به مدیر ، پاسخگو و عضو فعال نیازمندیم....

در زمینه های مختلف

هم اکنون ثبت نام کنید

ایرانیان وب
پاسخ


موضوعات مشابه ...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  آموزش ساخت گالری با css ERFAN-DESIGN 10 1,058 ۲۶ بهمن ۱۳۹۴، ۰۱:۲۳ ق.ظ
آخرین ارسال: Tofighi
Thumbs Up آموزش گردکردن عکس behnam 1 1,115 ۲۲ شهریور ۱۳۹۲، ۱۲:۵۰ ب.ظ
آخرین ارسال: rahnamafard
  آموزش بکگراند متحرک (انیمیشن با CSS) ••CentOS•• 0 1,514 ۲۱ شهریور ۱۳۹۲، ۱۰:۰۹ ب.ظ
آخرین ارسال: ••CentOS••
  آموزش انیمیشن در CSS سری 2 ••CentOS•• 0 951 ۱۹ شهریور ۱۳۹۲، ۰۷:۲۱ ب.ظ
آخرین ارسال: ••CentOS••
  آموزش انیمیشن در CSS ••CentOS•• 2 1,707 ۱۹ شهریور ۱۳۹۲، ۰۷:۰۸ ب.ظ
آخرین ارسال: ••CentOS••
Star آموزش گرد کردن تصاویر با استفاده از css KoG 0 2,109 ۰۹ تير ۱۳۹۲، ۰۴:۵۶ ب.ظ
آخرین ارسال: KoG
  آموزش Blur کردن متن با css KoG 0 1,428 ۰۹ تير ۱۳۹۲، ۰۴:۴۳ ب.ظ
آخرین ارسال: KoG

پرش به انجمن:


کاربران در حال بازدید این موضوع:

1 مهمان


درباره‌ی ما

گروه پشتیبانی فارسی مای بی بی My-BB.Ir در واپسین روزهای پاییز 1391 کار خود را در زمینه مای بی بی آغاز کرد. این گروه با توکل بر خدای منان و دانش فنی خود در تلاش است فعالیتی هرچند ناچیز در زمینه ارتقا و پشتیبانی مای بی بی انجام دهد.
تمامی حقوق برای وب‌سایت پشتیبانی فارسی مای بی‌بی (My-BB.Ir) محفوظ می‌باشد و هرگونه کپی‌برداری از آن شرعا حرام و قانونا غیرمجاز می‌باشد.
قدرت گرفته از مای بی‌بی - فارسی‌ساز: My-BB.Ir و IORA.Ir