امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش لبه گرد کردن کادر ها
نویسنده پیام
King Server آفلاین
سپهر مهدیپور
عضو


ارسال‌ها:
223
تاریخ عضویت:
Jan 2013
اعتبار:
23
تشکر ها: 398
367 تشکر شده در 158 ارسال
ارسال: #1
آموزش لبه گرد کردن کادر ها
سلام و درود به تمام دوستان ارجمند انجمن
به درخواست یکی از دوستان که می خواستش خواستش لبه گرد کردن باکس(کادر) رو در سی اس اس یاد بدم منم حرفش رو زمین ننداختم و سریع یه آموزش زدم

خب آغاز : ما میخوایم چی بسازیم
ما میخوایم لبه گرد یا گوشه گرد کردن ، دایره ای کردن رو بهتون آموزش بدیم که خیلی ساده است.

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

کد php:
.border{
borderthin dotted #ff;
background#000;
width:200;
height:200;


حالا ما میخوایم یه شکل لبه گرد به شعاع 50 px بزنیم از پس در نتیجه از کد radius که به فارسی به معنی شعاع میشه استفاده میکنیم
کدش هم اینه دقت کنید:
کد php:
border-radius100px
دقت داشته باشید که این کد رو خالی بذارید هیچ تاثیری نداره یعنی باید با کد بالا استفاده بشه ی چیزی تو مایه های این
کد php:
.border{
borderthin dotted #ff;
background#000;
width:200;
height:200;
border-radius100px;

خب دوستان این یک ردیوس (شعاع ساده بود) حالا میخوایم یک ردیوس به شکل سایر محصولات سایتم در بیاریم iranahosting.ir
نکته: میتوانید بجای 50 پیکسل عدد دلخواه خود را قرار دهید

فقط کافیه بجای ردیوس خالی اینو اضافه کنیم:
کد php:
border-top-left-radius50px;
border-bottom-right-radius50px
خب اینم تموم شد حالا میخوایم یه دایره مانند درست کنیم خیلی ساده است فقط کافیه بجای 50 پیکسل 100 رو قرار بدیم میشه این
کد php:
border-radius100px
وبسایت جستجو پاسخ با نقل قول
 تشکر شده توسط: Hooman , AmirHossain , exaayaa , rangi , Mehr@ban
AmirHossain آفلاین
اگر انجمن یوهاستینگ نبود...
*
عضو VIP


ارسال‌ها:
1,452
تاریخ عضویت:
Oct 2011
اعتبار:
110
تشکر ها: 1801
1908 تشکر شده در 988 ارسال
ارسال: #2
RE: آموزش لبه گرد کردن کادر ها
فکر کنم بجای کد زیر :
کد:
border-top-left-radius: 50px
border-bottom-right-radius: 50px;
این هم بشه گذاشت
کد:
;border-radius: 50px 50px 50px 50px

امتحان نکردم لطفاً امتحان کنید.

فروش انواع هاستینگ و نمایندگی هاستینگ
SimaWebHost.iR
وبسایت جستجو پاسخ با نقل قول
 تشکر شده توسط: Hooman , exaayaa , rangi , King Server
exaayaa غایب
کاربر حرفه ای
*
کاربر حرفه ای


ارسال‌ها:
216
تاریخ عضویت:
Jan 2012
اعتبار:
20
تشکر ها: 506
419 تشکر شده در 165 ارسال
ارسال: #3
RE: آموزش لبه گرد کردن کادر ها
(08-11-2013، 17:40)Sachme نوشته است:  فکر کنم بجای کد زیر :
کد:
border-top-left-radius: 50px
border-bottom-right-radius: 50px;
این هم بشه گذاشت
کد:
;border-radius: 50px 50px 50px 50px

امتحان نکردم لطفاً امتحان کنید.

این چیزی که شما میگی کل گوشه هارو 50پیکسل گرد میکنه البته فقط گذاشتن یکی از مقادیر کافیه نیاز به 4تا نیست
ولی چیزی که سپهر جان گفت فقط دوتا گوشه رو گرد میکنه (گوشه بالا چپ و پایین راست)


البته چیزیکه شما گفتی هم جواب میده ولی به این صورت

کد:
border-radius: 50px 0px 50px 0px;
(آخرین ویرایش در این ارسال: 08-11-2013، 17:56، توسط exaayaa.)
جستجو پاسخ با نقل قول
 تشکر شده توسط: AmirHossain , rangi , Hooman , Mehr@ban , King Server
King Server آفلاین
سپهر مهدیپور
عضو


ارسال‌ها:
223
تاریخ عضویت:
Jan 2013
اعتبار:
23
تشکر ها: 398
367 تشکر شده در 158 ارسال
ارسال: #4
RE: آموزش لبه گرد کردن کادر ها
بچه ها درخواست آموزش بعدی رو بدید چی بذارم گیج شدم دیگه چی بذارم
وبسایت جستجو پاسخ با نقل قول


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  آموزش HTML5 و CSS3 در قالب پروژه - PDF AmirHossain 0 1,644 04-11-2014، 18:22
آخرین ارسال: AmirHossain
  نخستين جلسه آموزش css3 - گرد كردن گوشه هاي اشياء صفحه MONA 1 2,448 01-12-2014، 14:21
آخرین ارسال: AmirHossain
  آموزش گام به گام css2.0 (سطح مبتدی) MONA 0 1,825 01-11-2014، 18:35
آخرین ارسال: MONA
  آموزش های مختلف و کوتاه King Server 2 2,821 09-15-2013، 03:47
آخرین ارسال: Mehr@ban
  [درخواست]آموزش قرار دادن منوی css T@H@76 1 2,260 09-09-2013، 14:25
آخرین ارسال: exaayaa
Heart درخواست آموزش قراردادن بکگراند برای پست ها rayanehfarda 13 8,355 05-13-2013، 18:09
آخرین ارسال: rayanehfarda
  آموزش وسط چین کردن style.css افزونه mingle forum rayanehfarda 3 4,288 08-25-2012، 19:43
آخرین ارسال: rayanehfarda
  آموزش ویرایش قالب به زبان css TaninHost 3 3,022 06-24-2012، 00:07
آخرین ارسال: sampash
  سایتی برای آموزش css و html kaya 1 2,616 03-17-2012، 10:01
آخرین ارسال: irantechnic

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان
یوهاستینگ در بهمن سال 1389 با هدف ارائه خدمات میزبانی وب تاسیس گردید که در مدت زمانی نچندان کوتاه توانست در چهارمین جشنواره وب ایران سال 1390 عنوان هاستینگ برگزیده را به دست آورد.