Calificación de 5 estrellas con CSS

5701 code_rating

Publica tu código

Recomendado

30 August 2024

Animaciones impulsadas por desplazamiento Detección de desplazamiento

23 April 2025

Generador de contraseñas de SENAPI

23 February 2025

Un código de ha11072004cc

index.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>

styles.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));
        }

Recomendado

Animaciones impulsadas por desplazamiento Detección de desplazamiento

Generador de contraseñas de SENAPI

Un código de ha11072004cc

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js