CSS3 واجهة المستخدم
CSS3 على ميزات جديدة واجهة المستخدم مثل عناصر تغيير الحجم، الخطوط العريضة، وصندوق التحجيم.
في هذا الفصل سوف تتعلم حول خصائص واجهة المستخدم التالية:
-
resize -
outline-offset
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
أرقام تليها -webkit- أو -moz- تحدد النسخة الأولى التي عملت مع بادئة.
| الملكية | |||||
|---|---|---|---|---|---|
| resize | 4.0 | غير معتمد | 5.0 4.0 -moz- | 4.0 | 15.0 |
| outline-offset | 4.0 | غير معتمد | 5.0 4.0 -moz- | 4.0 | 9.5 |
CSS3 تغيير الحجم
ل resize الخاصية تحديد ما إذا كان أو لم يكن عنصرا قابلا للتحجيم من قبل المستخدم.
المثال التالي يتيح للمستخدم تغيير حجم فقط من عرض <div> العنصر:
المثال التالي يتيح للمستخدم تغيير حجم فقط ذروة <div> العنصر:
المثال التالي يتيح للمستخدم تغيير حجم كل من الطول والعرض ل <div> العنصر:
CSS3 المخطط إزاحة
ل outline-offset الملكية يضيف المسافة بين الخطوط العريضة، وعلى حافة الحدود أو عنصر.
الخطوط تختلف من الحدود في ثلاث طرق:
- مخطط هو الخط الذي رسمته حول العناصر، خارج حافة الحدود
- مخطط لا يأخذ مساحة
- قد يكون مخططا غير مستطيلة
يستخدم المثال التالي الخاصية إزاحة الخطوط العريضة لإضافة مسافة 15px بين الحدود والخطوط العريضة:
مثال
div
{
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
انها محاولة لنفسك » خصائص واجهة المستخدم CSS3
يسرد الجدول التالي جميع خصائص واجهة المستخدم:
| الملكية | وصف |
|---|---|
| box-sizing | يسمح لك لتشمل الحشو والحدود في العرض الكلي للعناصر مع ارتفاع |
| nav-down | تحدد مكان للتنقل عند استخدام مفتاح التنقل السهم لأسفل |
| nav-index | يحدد ترتيب الجدولة للعنصر |
| nav-left | تحدد مكان للتنقل عند استخدام مفتاح التنقل يسار السهم |
| nav-right | تحدد مكان للتنقل عند استخدام مفتاح الملاحة السهم الأيمن |
| nav-up | تحدد مكان للتنقل عند استخدام مفتاح التنقل السهم حتى |
| outline-offset | ويضيف المسافة بين الخطوط العريضة، وعلى حافة الحدود أو عنصر |
| resize | تحديد ما إذا كان أو لم يكن العنصر يمكن تغيير حجم من قبل المستخدم |