Calificación de 5 estrellas con CSS

5495 code_rating

Publica tu código

Recomendado

19 May 2025

menú de la barra de navegación

29 July 2025

Desplácese para existir

23 August 2025

Plantilla HTML de página de inicio de sesión en turco

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

menú de la barra de navegación

Desplácese para existir

Plantilla HTML de página de inicio de sesión en turco

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js