freeCodeCamp

5.0 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78a6367417b2b2512ade	Create a More Complex Shape Using CSS and HTML	0		إنشاء شكل أكثر تعقيدًا باستخدام CSS و HTML

Description

واحدة من أكثر الأشكال شعبية في العالم هي شكل القلب ، وفي هذا التحدي عليك إنشاء واحد باستخدام CSS النقي. ولكن أولا ، تحتاج إلى فهم ::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

5.0 KiB Raw Blame History