5.0 KiB
5.0 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d78a6367417b2b2512ade | Create a More Complex Shape Using CSS and HTML | 0 | إنشاء شكل أكثر تعقيدًا باستخدام CSS و HTML |
Description
::before
و ::after
pseudo-elements. يتم استخدام هذه العناصر الزائفة لإضافة شيء ما قبل أو بعد عنصر محدد. في المثال التالي ، يتم استخدام العنصر ::before
pseudo-element لإضافة مستطيل إلى عنصر به heart
الفئة: .heart :: before {بالنسبة لـ
يحتوى: ""؛
لون الخلفية: أصفر.
نصف قطر الحدود: 25٪ ؛
الموقع: مطلقة
الارتفاع: 50 بكسل ؛
العرض: 70 بكسل
أعلى: - 50 بكسل
اليسار: 5 بكسل ؛
}
::before
و ::after
pseudo-elements لتعمل بشكل صحيح ، يجب أن يكون لها خاصية content
محددة. يتم استخدام هذه الخاصية عادةً لإضافة أشياء مثل صورة أو نص إلى العنصر المحدد. عندما يتم استخدام الـ ::before
و ::after
pseudo-elements لجعل الأشكال ، فإن خاصية content
لا تزال مطلوبة ، لكن يتم ضبطها على سلسلة فارغة. في المثال أعلاه، عنصر مع فئة من heart
لديه ::before
الزائفة العنصر الذي ينتج مستطيل أصفر مع height
و width
من 50px 70px و، على التوالي. يحتوي هذا المستطيل على زوايا دائرية نظرًا لنصف قطره 25٪ ويتم وضعه تمامًا عند 5 بكسل من left
و 50 بكسل فوق الجزء top
من العنصر. Instructions
heart::after
الاختيار ، قم بتغيير background-color
الوردي و border-radius
إلى 50٪. بعد ذلك ، استهدف العنصر heart
الطبقة ( heart
فقط) واملأ خاصية transform
. استخدم وظيفة rotate()
مع -45 درجة. (يعمل rotate()
بنفس الطريقة التي يعمل بها skewX()
و skewY()
). وأخيراً ، في heart::before
selector ، قم بتعيين خاصية content
الخاصة به إلى سلسلة فارغة. Tests
tests:
- text: 'يجب أن تكون الخاصية <code>background-color</code> <code>heart::after</code> محدد الوردي.'
testString: 'assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), "The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.");'
- text: 'يجب أن يكون <code>border-radius</code> الحد <code>heart::after</code> محدد 50 ٪.'
testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, "The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.");'
- text: يجب أن تستخدم خاصية <code>transform</code> لفئة <code>heart</code> الدالة <code>rotate()</code> إلى -45 درجة.
testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), "The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.");'
- text: 'يجب أن يكون <code>content</code> <code>heart::before</code> محدد سلسلة فارغة.'
testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|")\1\s*?;/gi), "The <code>content</code> of the <code>heart::before</code> selector should be an empty string.");'
Challenge Seed
<style>
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: ;
}
.heart::after {
background-color: blue;
content: "";
border-radius: 25%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart::before {
content: ;
background-color: pink;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
</style>
<div class = "heart"></div>
Solution
// solution required