رسم وجه الإنسان باستخدام CSS
CSS Drawing
رسم وجه الإنسان باستخدام CSS :

الرسم باستخدام css من أفضل الطرق لفهم عميق لخواص css المختلفة 💪🏼.
في هذا الثريد طريقه رسم Human face
باستخدام html and css 😎
الخطوة رقم 1 وهي البنيه الأساسية / الخلفية:

CSS
/* Start Variables */
:root {
--hair-color: #424b54;
--skin-color: #f0beaf;
}
/* End Variables */
/* Start Global Rules */
body {
background-color: #ebd8d0;
}
.human {
margin: auto;
background-color: #f0beaf;
width: 220px;
height: 220px;
border: 3px solid #fff;
border-radius: 50%;
position: relative;
overflow: hidden;
}
HTML
<body>
<div class="human">
</div>
</body>
الخطوة رقم 2 رسم الشعر :

CSS
.hair {
background-color: var(--hair-color);
width: 120px;
height: 180px;
position: absolute;
top: 40px;
left: 110px;
transform: translateX(-50%);
border-top-right-radius: 80px;
border-top-left-radius: 80px;
z-index: 1;
}
HTML
<div class="human">
<div class="hair"></div>
</div>
الخطوة رقم 3 رسم الوجه :

CSS
.face {
background-color: var(--skin-color);
width: 70px;
height: 80px;
position: absolute;
top: 80px;
left: 50px;
transform: translateX(35%);
z-index: 3;
border-radius: 0 0 80px 80px;
}
HTML
<div class="hair"></div>
<div class="face">
</div>
الخطوة رقم 4 إضافة تفاصيل أكثر إلى الشعر :

CSS
.napkin {
content: "";
background-color: var(--hair-color);
width: 60px;
height: 40px;
position: absolute;
top: -24px;
left: -5px;
box-shadow: 40px 10px 0 -8px var(--hair-color);
border-radius: 50%;
}
HTML
<div class="face">
<div class="napkin"></div>
</div>
الخطوة رقم 5 رسم العيون :

CSS
.eye {
background-color: var(--hair-color);
width: 10px;
height: 10px;
position: absolute;
top: 27px;
left: 8px;
box-shadow: 42px 0 0 var(--hair-color);
border-radius: 50%;
}
HTML
<div class="face">
<div class="napkin"></div>
<div class="eye">
</div>
</div>
الخطوة رقم 6 رسم الحاجبين :

CSS
.brow {
position: absolute;
top: -5px;
left: -1px;
width: 12px;
height: 2px;
background: #626f7d;
box-shadow: 42px 0 0 #626f7d;
border-radius: 10px;
}
HTML
<div class="face">
<div class="napkin"></div>
<div class="eye">
<div class="brow"></div>
</div>
</div>
الخطوة رقم 7 رسم الأنف :

CSS
.nose {
background-color: #db9b99;
width: 8px;
height: 16px;
position: absolute;
top: 28px;
left: 50%;
transform: translateX(-50%);
border-radius: 12px;
}
HTML
<div class="human">
<div class="hair"></div>
<div class="face">
<div class="napkin"></div>
<div class="eye">
<div class="brow"></div>
</div>
<div class="nose"></div>
</div>
</div>
الخطوة رقم 8 رسم الخدود :

CSS
.cheek {
position: absolute;
bottom: 30px;
left: 5px;
width: 10px;
height: 7px;
border-radius: 50%;
background-color: #eba8a8;
box-shadow: 48px 0 0 #eba8a8;
}
HTML
<div class="face">
<div class="napkin"></div>
<div class="eye">
<div class="brow"></div>
</div>
<div class="nose"></div>
<div class="cheek"></div>
</div>
الخطوة رقم 9 رسم الفم :

CSS
.mouth {
position: absolute;
top: 52px;
left: 50%;
transform: translateX(-50%);
width: 28px;
height: 14px;
background-color: var(--hair-color);
border-radius: 0 0 20px 20px;
overflow: hidden;
}
HTML
<div class="face">
<div class="napkin"></div>
<div class="eye">
<div class="brow"></div>
</div>
<div class="nose"></div>
<div class="cheek"></div>
<div class="mouth">
</div>
</div>
الخطوة رقم 10 رسم الأسنان :
CSS
.teeth {
background-color: #fff;
width: 25px;
height: 2px;
position: absolute;
top: 0px;
left: 50%;
transform: translateX(-50%);
border-radius: 10px;
}
HTML
<div class="face">
<div class="napkin"></div>
<div class="eye">
<div class="brow"></div>
</div>
<div class="nose"></div>
<div class="cheek"></div>
<div class="mouth">
<div class="teeth"></div>
</div>
</div>
الخطوة رقم 11 رسم اللسان :
CSS
.tongue{
background-color: red;
width: 18px;
height: 8px;
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
border-radius: 10px;
}
HTML
<div class="face">
<div class="napkin"></div>
<div class="eye">
<div class="brow"></div>
</div>
<div class="nose"></div>
<div class="cheek"></div>
<div class="mouth">
<div class="teeth"></div>
<div class="tongue"></div>
</div>
</div>
الخطوة رقم 12 رسم الرقبة :

CSS
.neck {
background-color: var(--skin-color);
width: 27px;
height: 25px;
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
border-radius: 50px;
}
HTML
<div class="face">
<div class="napkin"></div>
<div class="eye">
<div class="brow"></div>
</div>
<div class="nose"></div>
<div class="cheek"></div>
<div class="mouth">
<div class="teeth"></div>
<div class="tongue"></div>
</div>
<div class="neck"></div>
</div>
الخطوة رقم 13 رسم الجسم :

CSS
.body {
background-color: #bb004f;
width: 98px;
height: 80px;
position: absolute;
bottom: -22px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}
/* End Drawing */
HTML
<body>
<div class="human">
<div class="hair"></div>
<div class="face">
<div class="napkin"></div>
<div class="eye">
<div class="brow"></div>
</div>
<div class="nose"></div>
<div class="cheek"></div>
<div class="mouth">
<div class="teeth"></div>
<div class="tongue"></div>
</div>
<div class="neck"></div>
</div>
<div class="body"></div>
</div>
</body>
نقلاً عن الأخ المبدع :
Naif Sameer
لتحميل الكود والمشاركة
صانع المجد
