비전공자 개발일기

Star Rating 본문

HTML _CSS

Star Rating

HiroDaegu 2023. 1. 28. 11:07
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>STAR RATING</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
    <div class="container">
        <div class="rating">
            <input type="radio" name="clr1" style="--c: #BB2649;">
            <input type="radio" name="clr1" style="--c: #BB2649;">
            <input type="radio" name="clr1" style="--c: #BB2649;">
            <input type="radio" name="clr1" style="--c: #BB2649;">
            <input type="radio" name="clr1" style="--c: #BB2649;">
            <input type="radio" name="clr1" style="--c: #BB2649;">
            <input type="radio" name="clr1" style="--c: #BB2649;">
            <input type="radio" name="clr1" style="--c: #BB2649;">
            <input type="radio" name="clr1" style="--c: #BB2649;">
            <input type="radio" name="clr1" style="--c: #BB2649;">
        </div>
        <div class="rating">
            <input type="radio" name="clr2" style="--c: #FF0;">
            <input type="radio" name="clr2" style="--c: #FF0;">
            <input type="radio" name="clr2" style="--c: #FF0;">
            <input type="radio" name="clr2" style="--c: #FF0;">
            <input type="radio" name="clr2" style="--c: #FF0;">
            <input type="radio" name="clr2" style="--c: #FF0;">
            <input type="radio" name="clr2" style="--c: #FF0;">
            <input type="radio" name="clr2" style="--c: #FF0;">
            <input type="radio" name="clr2" style="--c: #FF0;">
            <input type="radio" name="clr2" style="--c: #FF0;">
        </div>
        <div class="rating">
            <input type="radio" name="clr3" style="--c: #2AE418;">
            <input type="radio" name="clr3" style="--c: #2AE418;">
            <input type="radio" name="clr3" style="--c: #2AE418;">
            <input type="radio" name="clr3" style="--c: #2AE418;">
            <input type="radio" name="clr3" style="--c: #2AE418;">
            <input type="radio" name="clr3" style="--c: #2AE418;">
            <input type="radio" name="clr3" style="--c: #2AE418;">
            <input type="radio" name="clr3" style="--c: #2AE418;">
            <input type="radio" name="clr3" style="--c: #2AE418;">
            <input type="radio" name="clr3" style="--c: #2AE418;">
        </div>
    </div>
</body>

</html>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #222;
    min-height: 100vh;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 40px;
}

.container .rating {
    display: flex;
    flex-direction: row-reverse;
    padding: 30px 40px;
    border: 3px solid #111;
    border-radius: 30px;
    gap: 4px;
    background-color: #353535;
    box-shadow: 30px 30px 30px -10px rgba(0, 0, 0, .5), inset 15px 15px 3px rgba(255, 255, 255, .1), -4px -4px 15px rgba(255, 255, 255, .1), inset -2px -2px 12px rgba(0, 0, 0,.75);
}

.container .rating:nth-child(1) {
    transform: translateX(-80px);
}

.container .rating:nth-child(3) {
    transform: translateX(80px);
}

.container .rating input {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.container .rating input::before {
    content: '\f005';
    font-family: fontAwesome;
    font-size: 34px;
    position: absolute;
    color: #111;
    transition: .5s;
}

.container .rating input:hover ~ input::before,
.container .rating input:hover::before,
.container .rating input:checked ~ input::before,
.container .rating input:checked::before 
{
    color: var(--c);
}
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

Police VS Taxi  (0) 2023.01.30
Rainbow Loader  (0) 2023.01.29
Fill Glass Loader  (0) 2023.01.27
Ghost Loader  (0) 2023.01.26
3D Spinning Orbits  (0) 2023.01.25
'HTML _CSS' Related Articles more