طراحی و بهینه سازیمشاهده

درگاه پرداخت
درگاه پرداخت

دستور Border radius در CSS3

CSS / HTML , آموزش طراحی
دستور Border radius در CSS3Reviewed by جواد on Nov 2Rating: 5.0دستور Border radius در CSS3در این قسمت از سری آموزش های دوران طراحی وب به موضوع زیبا سازی تگ های درون صفحه می رسیم . در این قسمت دستور border radius در زبان css3 مورد بررسی قرار می دهیم

در این قسمت از سری آموزش های دوران طراحی وب به موضوع زیبا سازی تگ های درون صفحه می رسیم . در این قسمت دستور border radius در زبان css3 مورد بررسی قرار می دهیم .دستور border radius که در ورژن 3 از نسخه زبان css معرفی شد برای گرد کردن اشیاء درون صفحه استفاده می شود البته این دستور از مرورگر های IE ورژن 9 به بالا و اکثر مرورگر های دیگر پشتیبانی می شود . در ادامه نحوه استفاده از این دستور را بررسی می کنیم .

نحوه استفاده از این دستور در زبان CSS به صورت زیر می باشد :

 

دستور بالا تگی با خاصیت کلاس selector را گوشه های این المنت رو به میزان 10 پیکسل گرد خواهد کرد . توجه داشته باشید که در خط های بعدی دستور border radius دستوراتی برای اعمال این دستور در مرورگر های مختلف می باشد که اگر حتما می خواهید صفحه شما در تمامی مرورگر ها به یک شکل باشند باید از این دستور ها استفاده کنید .

توجه داشته باشید که مقدار دستور border radius می تواند به صورت واحد های مختلف زبان css مانند em , percent , px,… باشد

حتما بخوانید  چهارمین شماره ماهنامه طراحی وب

تغییر جز به جزء گوشه ها

جهت تغییر هر یک از گوشه های المنت در این دستور به صورت زیر تنظیم می شود :

در دستور بالا با توجه به شکل ترتیب گرد کردن گوشه اشیاء مشخص شده است که در واقع عدد هایی که در دستور border radius به کار رفته اند دقیقا باید مطابق شکل تنظیم شوند مانند دستور زیر :

 

نکته : برای گرد کردن شئ و تبدیل آن به یک دایره باید میزان border radius را برابر %100 قرار دهیم

 

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

موفق و پیروز و سربلند باشید.


به کانال تلگرام بیست اسکریپت بپیوندید !

دانلود

خرید هاست حرفه ای سازگار با انواع اسکریپت همراه با نصب رایگان

مطلب مفیدی بود ؟
نویسنده : admin تاریخ : 1392/08/11 4 CSS / HTML , آموزش طراحی

لینک کوتاه مطلب : http://www.20script.ir/?p=1240

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
1,186افزونه وردپرسی نمایش هشدار در پنجره پاپ آپ برای ویژوال کامپوسر نسخه 1.2.1 تاریخ : 1394/08/7
2,323صفحه 404 بسیار زیبا Spotlook به صورت HTML5 تاریخ : 1392/09/19
3,136اجرای موسیقی آنلاین در وردپرس با افزونه HTML5 Music Player تاریخ : 1393/06/25
1,771منوی اجتماعی بسیار زیبای CSS3 تاریخ : 1392/08/6
3,935دکمه‌های CSS3 متحرک زیبا با آیکون تاریخ : 1392/08/4
3,991دانلود قالب چندمنظوره Salient برای وردپرس تاریخ : 1394/02/28
1,780اسکریپت بازی جذاب زامبی ها به صورت HTML5 تاریخ : 1392/10/29
3,271جدول قیمت گذاری آماده Pricing Table تاریخ : 1393/04/22
2,760دانلود قالب تک صفحه ای اپ AppStack نسخه 1.2.8 تاریخ : 1394/12/28
2,263افزونه سفارشی سازی استایل ابزارک های وردپرس Widget CSS Classes تاریخ : 1394/12/9
4,714منوی بسیار زیبای آبشاری به صورت CSS3 تاریخ : 1393/02/22
1,807دانلود قالب زیبا مشکی در دست ساخت تاریخ : 1392/08/25
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب