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

نشرت من قبل administration_admin في 2021-08-212021-08-21

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 Drawing

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 Drawing

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

لتحميل الكود والمشاركة

https://twitter.com/Glorymaker9/status/1429085732975620100

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

CSS Drawing