دستور Border radius در CSS3

اختصاصی از یارا فایل دستور Border radius در CSS3 دانلود با لینک مستقیم و پرسرعت .

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

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

.selector {<br /> border-radius:10px;<br /> -moz-border-radius:10px;<br /> -webkit-border-radius:10px;<br /> -o-border-radius:10px;<br /> -ms-border-radius:10px;<br /> }

1

2

3

4

5

6

7

.selector {

border-radius:10px;

-moz-border-radius:10px;

-webkit-border-radius:10px;

-o-border-radius:10px;

-ms-border-radius:10px;

}

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

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

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

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

.selector {<br /> border-radius:1 2 3 4;<br /> }

1

2

3

.selector {

border-radius:1 2 3 4;

}

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

.selector {<br /> border-radius:10px 5px 10px 5px;<br /> }

1

2

3

.selector {

border-radius:10px 5px 10px 5px;

}

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

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

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

ماشین حساب مهندسی: HTML5 و CSS3

اختصاصی از یارا فایل ماشین حساب مهندسی: HTML5 و CSS3 دانلود با لینک مستقیم و پرسرعت .

 شرح پروژه

ماشین حساب علمی آنلاین پیاده سازی شدن ویژگی های موجود در HTML 5، CSS 3 و jQuery.it نشان می دهد بهترین روش برنامه نویسی و شیوه های برنامه نویسی؛ هیچ فایل های تصویری نیاز ندارد.

پروژه شامل 3 فایل در دایرکتوری مجازی همان قرار داده می شود:

1. فایل اصلی: Calculator.htm (فایل حاوی پیوند پویا به کتابخانه جی کوئری آنلاین)
2. CSS فایل: Calculator.css
3. فایل جاوا اسکریپت: Calculator.js