Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing

CSSعناصر النماذج

  • تحسين تصميم النماذج
  • تحديد حجم عناصر النموذج
  • تحسين هوامش عناصر النموذج
  • تحسين تصميم حدود عناصر النموذج
  • تحسين لون عناصر النموذج
  • إضافة أيقونة لعناصر النموذج
  • تغيير لون حدود العنصر المحدد
  • إضافة مؤثرات لعناصر النموذج
  • ضبط حجم مربع النص المتعدد الأسطر

تحسين تصميم النماذج

عناصر النماذج يمكن تحسين تصميمها و إظهارها بشكل رائع و كذلك يمكن إضافة أيقونات و مؤثرات بصرية لها لتبدو أكثر جاذبية.

Avatar

في هذا الدرس ستتعرف على الخصائص التي تُستعمل لتحسين تصميم عناصر النماذج.

تحديد حجم عناصر النموذج

عند تحديد حجم العنصر لا تنسى إعطاؤه الخاصية box-sizing: border-box; لكي يتم احتساب الهوامش و حدوده ضمن حجمه الذي يمكنك تحديده بواسطة الخاصية width و الخاصية height.

في المثال التالي قمنا بجعل العناصر تظهر على كامل عرض النموذج.

مثال

input {
width: 100%;
}
input { width: 100%; }
جرب الكود

الإستفادة من نوعية العناصر

في المثال السابق سيتم تحديد الخصائص لجميع وسوم <input> مهما كان نوعها، في حال كان النموذج يحتوي على عدة وسوم و تريد إضافة خصائص مختلفة لها على أساس نوعها فتذكر أنه يمكنك تحديد العناصر بناءاً على أنواعها على النحو التالي:

  • input[type=text] لتحديد مربعات النصوص فقط.
  • input[type=password] لتحديد مربعات كلمات المرور فقط.
  • input[type=button] لتحديد الأزرار العادية فقط.
  • input[type=submit] لتحديد أزرار إرسال البيانات فقط و هكذا..

تحسين هوامش عناصر النموذج

بشكل عام، قم دائماً بضبط الهوامش الداخلية للعناصر padding لكي يكون التعامل معها أسلس و تكون سهلة النقر على الهواتف و شاشات اللمس و كذلك قم بضبط الهوامش الخارجية لها margin بشكل مناسب حتى لا تظهر العناصر بشكل متلاصق.

في المثال التالي قمنا بإضافة هامش داخلي للعناصر حتى نبعد النص الداخلي فيها عن الحدود و كذلك قمنا بإضافة هامش خارجي من الأعلى بمقدار 10 بكسل و من الأسفل بمقدار 20 بكسل لكي تظهر عناوين مربعات الإدخال قريبةً منها و لتظهر العناصر بعيدة عن بعضها بشكل أفضل.

مثال

input {
padding: 10px 15px;
margin-top: 8px;
margin-bottom: 20px;
}
input { padding: 10px 15px; margin-top: 8px; margin-bottom: 20px; }
جرب الكود

تحسين تصميم حدود عناصر النموذج

يمكنك إظهار لون و شكل و سمك حدود العناصر بواسطة الخاصية border و كذلك يمكنك تحديد شكل زوايا العناصر بواسطة الخاصية border-radius لتظهر بالشكل الذي تريده.


في المثال التالي قمنا بإظهار حدود مربع النص بلون أزرق مع جعل زوايه مائلة بنسبة 4 بكسل.

المثال الأول

input {
border: 2px solid dodgerblue;
border-radius: 4px;
}
input { border: 2px solid dodgerblue; border-radius: 4px; }
جرب الكود

في المثال التالي قمنا بإخفاء حدود مربع النص الأربعة و إظهار حدوده السفلية فقط و بلون أزرق.

المثال الثاني

input {
border: none;
border-bottom: 2px solid dodgerblue;
}
input { border: none; border-bottom: 2px solid dodgerblue; }
جرب الكود

تحسين لون عناصر النموذج

يمكنك تحديد لون خط العناصر بواسطة الخاصية color و كذلك يمكنك تحديد خلفيتها بواسطة الخاصية background-color لتظهر بالشكل الذي تريده.


في المثال التالي قمنا بتحديد لون خلفية مربع النص، لون خطه و لون حدوده.

المثال الأول

input {
border: 1px solid darkgray;
color: brown;
background: linen;
padding: 10px 15px;
border-radius: 4px;
}
input { border: 1px solid darkgray; color: brown; background: linen; padding: 10px 15px; border-radius: 4px; }
جرب الكود

تصميم نموذج شفاف

في المثال التالي قمنا بجعل خلفية الصفحة سوداء و من ثم قمنا بجعل لون خلفية مربع النص شفافة و لون خطه و لون حدوده أزرق.

المثال الثاني

input {
border: 2px solid deepskyblue;
color: deepskyblue;
background: transparent;
}
input { border: 2px solid deepskyblue; color: deepskyblue; background: transparent; }
جرب الكود

إضافة أيقونة لعناصر النموذج

إضافة أيقونة في بداية مربع النص يجعله يظهر بشكل مميز جداً و هذا الأمر يمكنك فعله من خلال إضافة هامش داخل في الجهة التي ستضيف فيها الأيقونة padding و من ثم عرض صورة الأيقونة كخلفية له من تلك الجهة.

في المثال التالي قمنا بإظهار أيقونة بحث في بداية مربع النص.

مثال

input[type=text] {
background-image: url('search-icon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
}
input[type=text] { background-image: url('search-icon.png'); background-position: 10px 10px; background-repeat: no-repeat; }
جرب الكود

تغيير لون حدود العنصر المحدد

عند الإنتقال أو النقر على أي عنصر من عناصر النموذج سواء مربع نص، زر عادي، قائمة منسدلة إلخ.. يصبح العنصر في حالة :focus فتلاحظ ظهور حدود خارجية outline لونها أزرق و هذا الأمر يفعله المتصفح لكي يساعد المستخدم في معرفة المكان الذي يقف عنده.

تستطيع استغلال الحالة :focus لإضافة المؤثرات التي تريدها للعنصر، فمثلاً يمكنك إخفاء الحدود الخارجية التي تظهر عند الوقوف على العناصر أو تغيير لونها أو تغيير لون خلفية العنصر بما يتناسب مع تصميمك.

في المثال التالي عند الوقوف على عناصر النموذج لن تظهر حدود خارجية لونها أزرق، بل ستصبح حدود العناصر نفسها سوداء.

مثال

input {
outline: none;
border: 2px solid darkgray;
}
input:focus {
border-color: black;
}
input { outline: none; border: 2px solid darkgray; } input:focus { border-color: black; }
جرب الكود

إضافة مؤثرات لعناصر النموذج

لإضافة مؤثرات للعناصر نحتاج أن تكون العناصر في حالة :focus لكي تظهر المؤثرات عند الوقوف عندها. و لتحديد المدة التي سيتطلبها إكتمال التأثير نستخدم الخاصية transition و نمرر لها عدد الثواني كقيمة.


في المثال التالي عند الوقوف على عناصر النموذج ستصبح حدود العناصر سوداء خلال 0.4 ثانية.

المثال الأول

input {
transition: 0.4s;
}
input:focus {
border-color: black;
}
input { transition: 0.4s; } input:focus { border-color: black; }
جرب الكود

في المثال التالي قمنا بتصميم مربع بحث حجمه يتمدد عند النقر عليه خلال نصف ثانية.

المثال الثاني

input[type=text] {
width: 140px;
transition: 0.5s;
}
input[type=text]:focus {
width: 100%;
}
input[type=text] { width: 140px; transition: 0.5s; } input[type=text]:focus { width: 100%; }
جرب الكود

ضبط حجم مربع النص المتعدد الأسطر

مربع النص المتعدد الأسطر الذي نحصل عليه بواسطة الوسم <textarea> يمكن تحديد حجمه بواسطة الخاصيّتين width و height و لكن هذا الأمر لا يمنع المستخدم من إمكانية تغيير حجم العنصر بنفسه بالنقر على زاويته.

لتحديد ما إن كان المستخدم سيكون قادر على تغيير حجم مربع النص المتعدد الأسطر يمكنك استخدام الخاصية resize و من ثم تمرير إحدى القيم التالية لها.

القيمة معناها
horizontal لجعل حجمه قابل للتغيير أفقياً و لكنه ثابت عمودياً.
vertical لجعل حجمه قابل للتغيير عمودياً و لكنه ثابت أفقياً.
none لجعل حجمه غير قابل للتغيير أفقياً و عمودياً.

في المثال التالي قمنا بتحديد طول و عرض الوسم <textarea> مع جعل حجمه قابل للتغيير عمودياً و لكنه ثابت أفقياً.

مثال

textarea {
width: 100%;
height: 150px;
resize: vertical;
}
textarea { width: 100%; height: 150px; resize: vertical; }
جرب الكود