Évaluation 5 étoiles CSS

6,957 0 code_rating Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Recommandé

18 August 2024

Évaluation des émojis

23 August 2025

Modèle HTML de boutique de commerce électronique Tailwind CSS

16 May 2026

Code source du jeu HTML5 Idle Miner Tycoon

HTML

<html>
            <head>
              <meta charset="utf-8" />
              <title>Webleb</title>
              <link href="/css/styles.css" rel="stylesheet" type="text/css" />
            </head>
            <body>
                <form>
                    <div class="rating">
                        <input type='radio' hidden name='rate' id='rating_5' data-idx='0'>	
                        <label for='rating_5'></label>
                    
                        <input type='radio' hidden name='rate' id='rating_4' data-idx='1'>
                        <label for='rating_4'></label>
                    
                        <input type='radio' hidden name='rate' id='rating_3' data-idx='2'>
                        <label for='rating_3'></label>
                    
                        <input type='radio' hidden name='rate' id='rating_2' data-idx='3'>
                        <label for='rating_2'></label>
                    
                        <input type='radio' hidden name='rate' id='rating_1' data-idx='4'>
                        <label for='rating_1'></label>
                    </div>
                </form>
            </body>
            </html>

CSS

body {
            background: #e2e1d9;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow-y: hidden;
        }
        .rating {
            display: inline-block;
            font-size: 0;
            position: relative;
            text-transform: capitalize;
            padding: 0 50px 8%;
            color: gray;
        }
        .rating label {
            display: inline-block;
            float: right;
            padding: 0;
            font-size: 50px;
            cursor: pointer;
        }
        .rating label::before {
            content: "\2606";
            display: inline-block;
            transition: 0.2s;
        }
        .rating label span {
            opacity: 0;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            text-align: center;
            height: 20px;
            font-size: 1rem;
            white-space: nowrap;
            transition: 0.15s ease-out;
            pointer-events: none;
            letter-spacing: -2px;
            transform: translateY(-50%);
        }
        .rating label:hover span {
            opacity: 1;
            transform: none;
            letter-spacing: 0;
        }
        .rating label:hover::before {
            color: orange;
            opacity: 0.6;
            filter: drop-shadow(0 0 4px);
        }
        .rating label:hover ~ *::before {
            color: orange;
            opacity: 0.6;
            filter: drop-shadow(0 0 4px);
        }
        .rating input:checked ~ label::before {
            content: "\2605";
            color: orange;
            filter: drop-shadow(0 0 4px);
            transform: rotate(0.2turn);
            transition-delay: calc(0.1 * attr(data-idx integer));
        }

Comments 0

…