أتش تي أم أل هي لغة ترميز تستخدم لإنشاء بنية صفحات الويب. ولكن في الوقت نفسه ، تسمح لك قدراته بإنشاء بعض التأثيرات الرسومية. أحد هذه التأثيرات هو دائرة مظللة.
إنشاء دائرة مظللة في هتمل قد يبدو وكأنه قليلا من التحدي للمبتدئين ، لكنه في الواقع بسيط جدا. هناك طرق مختلفة لتحقيق هذا التأثير ، وسنلقي نظرة على عدد قليل منها هنا.
طريقة واحدة لإنشاء دائرة مظللة هي استخدام كس وخاصية نصف قطر الحدود. يمكنك أيضا استخدام سفغ وعنصر الدائرة ، مما يجعل من السهل جدا لرسم الكائنات الرسومية المختلفة ، بما في ذلك الدوائر المظللة.
في هذا الدليل ، سوف نلقي نظرة مفصلة على كل من هذه الطرق وإعطاء أمثلة التعليمات البرمجية التي سوف تساعدك على إنشاء دائرة مظللة في هتمل. سننظر أيضا في بعض الخيارات لضبط لون وحجم الدائرة ، بالإضافة إلى خيارات إنشاء الرسوم المتحركة أو التفاعل باستخدام جافا سكريبت.
- دائرة في هتمل: إنشاء دائرة مظللة باستخدام كس
- ما هي دائرة مظللة في أتش تي أم أل?
- الأدوات المستخدمة لإنشاء دائرة في هتمل
- خطوات إنشاء دائرة مظللة في هتمل
- أمثلة ورمز لدائرة مظللة في هتمل
- مثال 1: استخدام علامة
- مثال 2: استخدام علامة
- مثال 3: استخدام علامة
- سؤال وجواب
- كيف يمكنني إنشاء دائرة مظللة في أتش تي أم أل?
- كيف يمكنني استخدام المغلق لإنشاء دائرة مظللة?
- كيف يمكنني تغيير لون دائرة شغل?
- هل من الممكن إضافة الحدود حول دائرة مظللة?
- كيف يمكنني وضع دائرة مظللة في وسط الصفحة?
هل من الممكن إنشاء الرسوم المتحركة لدائرة مظللة?
دائرة في هتمل: إنشاء دائرة مظللة باستخدام كس
في هتمل ، يمكنك إنشاء شكل دائري باستخدام كس. تتمثل إحدى الطرق في استخدام خصائص العرض والارتفاع لإنشاء عنصر مربع ، ثم استخدام خاصية نصف قطر الحدود لجعلها مستديرة.
لملء الدائرة ، يمكننا استخدام خاصية لون الخلفية لتعيين لون خلفية العنصر.
- هنا مثال رمز:
- وإعطائها فئة أو معرف:
- دائرة نصف قطرها الحدود: 50%;
| إنشاء عنصر باستخدام علامة |
| إضافة أنماط داخل العلامة أو في ملف كس منفصل: |
| .دائرة { |
| العرض: 100 بكسل; |
| الارتفاع: 100 بكسل; |
| لون الخلفية: أحمر; |
}
أغلق العلامة
:
هذا مثال بسيط ينشئ عنصرا دائريا أحمر. يمكنك تغيير الحجم واللون وغيرها من الخصائص لإنشاء دائرة ترضيك.
وبالتالي ، فإن إنشاء دائرة مظللة في هتمل باستخدام كس بسيط للغاية. يمكن أن يكون هذا مفيدا للعديد من مهام التصميم وتطوير الويب حيث تحتاج إلى إنشاء شكل دائري.
ما هي دائرة مظللة في أتش تي أم أل?
في هتمل ، دائرة مظللة هي عنصر من صفحة ويب التي هي دائرة مليئة لون واحد أو نمط. يمكن استخدام الدوائر الملونة لأغراض مختلفة ، بما في ذلك إنشاء الشعارات أو الرموز أو الأزرار أو عناصر التصميم الزخرفية.
يتم إنشاء الدوائر المملوءة باستخدام عنصر
- يمكنك أيضا استخدام عنصر (رسومات متجهة قابلة للتطوير) لإنشاء دائرة مظللة في هتمل. تسمح لك الرسومات المتجهة بإنشاء دوائر مظللة بأشكال وقدرات رسوم متحركة أكثر تعقيدا.
، وهو أحد عناصر الكتلة الرئيسية ويمكن استخدامه لإنشاء أشكال مختلفة.
كحاوية ، قمنا بتعيين نصف قطر حدود الدائرة باستخدام الخاصية
دائرة نصف قطرها الحدود
. ثم نقوم بتعيين أبعاد الدائرة باستخدام الخصائص
العرض
و
الارتفاع
. أخيرا ، قمنا بتعيين لون خلفية الدائرة باستخدام الخاصية
لون الخلفية
- خطوات إنشاء دائرة مظللة في هتمل
إنشاء دائرة مظللة في هتمل يمكن أن يتحقق باستخدام مزيج من علامات هتمل وخصائص كس. هنا دليل خطوة بخطوة:
قم بإنشاء الحاوية الرئيسية باستخدام العلامة
:
تطبيق أنماط لتحديد حجم وشكل الحاوية:
املأ الحاوية باللون أو الصورة المحددة باستخدام خاصية خلفية كس:
أدخل الحاوية في صفحة الويب باستخدام العلامة :
الآن قمت بإنشاء دائرة مظللة في أتش تي أم أل! يمكنك تغيير الحجم والشكل واللون عن طريق تغيير قيم الخصائص في أنماط كس. يمكنك أيضا إضافة أنماط وعناصر إضافية إلى الصفحة بحيث تلبي الدائرة متطلباتك.
أمثلة ورمز لدائرة مظللة في هتمل
وفيما يلي بعض الأمثلة البسيطة ورمز لإنشاء دائرة مظللة باستخدام هتمل و كس.
مثال 1: استخدام علامة
يمكنك إضافة فئة "دائرة" إلى عنصر
وتطبيق أنماط كس لتعيين الحجم واللون:
.دائرة {
العرض: 100 بكسل;
الارتفاع: 100 بكسل;
دائرة نصف قطرها الحدود: 50%;
لون الخلفية: # ف 0000;
}
مثال 2: استخدام علامة
يمكنك استخدام العنصر وضبط سمات سك (س تنسيق مركز الدائرة) ، قبرصي (ص تنسيق مركز الدائرة) و ص (دائرة نصف قطرها من الدائرة) لإنشاء دائرة مظللة:
دائرة {
مثال 3: استخدام علامة
يمكنك استخدام العنصر وجافا سكريبت لإنشاء دائرة مظللة.:
فار سنتركس = قماش.العرض / 2;
فار سنتري = قماش.الارتفاع / 2;
السياق.قوس (سنتركس ، سنتري ، دائرة نصف قطرها ، 0 ، 2 * الرياضيات.بي ، خطأ);
السياق.فيلستيل = "#0000 وما يليها";
في الأمثلة أعلاه ، يتم استخدام طرق مختلفة لإنشاء دائرة مظللة في هتمل. يمكنك اختيار الطريقة التي تناسب متطلباتك وتفضيلاتك.
سؤال وجواب
لتعيين نصف قطر الحدود إلى 50٪.
كيف يمكنني تغيير لون دائرة شغل?
في المغلق. مجرد تحديد اللون المطلوب في عرافة ، رغب أو شكل اسم اللون.