! Сегодня

Главная » Web и Технологии » Хеллуинское лицо на CSS

Хеллуинское лицо на CSS

Заведите себе «идиотскую» привычку радоваться неудачам. Это гораздо веселей, чем раздражаться и ныть по любому поводу.

18-октября-2023, 21:40   1   0

Хеллуинское лицо на CSS

Вот такая вот страшненькая украшалка  в виде лица для сайта, сделанная при помощи CSS. Возможно кто и найдёт применение в преддверии тематического праздника Хэллуина. Ниже приведу код.

HTML

    <div class="minifig_face">
    <div class="eyes_pair">
        <div class="eye_socket">
            <div class="eyes">          
                <div class="pupil">
                    <div class="catchlight"></div>
                </div>
            </div>
            <div class="eyes">
                <div class="pupil">
                    <div class="catchlight">
                </div>
            </div>
            </div>
        </div>              
    </div>


CSS

.pupil {
    width: 50px;
    height: 50px;
    margin-top: 50px;
    background: red;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

.catchlight {
    width: 4px;
    height: 4px;
    margin-top: 25px;
    background: rgb(26 23 23);
    border-radius: 100%;
    display: flex;
    justify-content: center;
} 
.mouth {
    width: 200px;
    height: 80px;
    background: rgb(51 51 51);
    margin-top: 90px;
    border-radius: 100px;
    border: 4px solid black;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.fangs {
    width: 5px;
    height: 65px;
    margin-top: -50px;
    background: #fff;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    border: solid 1px black; 
}

.fangs_bottom {
    width: 7px;
    height: 100px;
    margin-bottom:  -50px;
    background: #fff;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    border: solid 1px black;
}
.nose_pair {

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.leftNostril {
    border-left: 30px solid transparent;
      border-bottom: calc(4 * 20px * 0.8) solid rgb(26 23 23);
    display: inline-block;
    margin-bottom: -70px;
}

.bridge {
    width: 2px;
    height: 22px;
}

.rightNostril {
    border-right: 30px solid transparent; 
    border-bottom: calc(4 * 20px * 0.8) solid rgb(26 23 23);
    display: inline-block;
    margin-bottom: -70px;
}

Поделиться

Tags

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Спутник земли ?

Редакторы выбирают

Web и Технологии