Звёздный рейтинг на CSS3

by Andrey Dobrovoi

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="demo">
    <div class="rating-container">
        <div class="css-rating-widget">
            <div class="tagline">
                <span>Базовые Параметры</span>
            </div>

            <div class="uit-rating-wrapper">
                <span>Звёзды не отмечены</span>

                <div class="uit-rating">
                    <input id="star-p1" name="nonechecked" type="radio" value=
                    "5"> <label class="sta-full" for=
                    "star-p1"><span>Здорово</span></label> <input id="star-p2"
                    name="nonechecked" type="radio" value="4"> <label class=
                    "sta-full" for="star-p2"><span>Отлично</span></label>
                    <input id="star-p3" name="nonechecked" type="radio" value=
                    "3"> <label class="sta-full" for=
                    "star-p3"><span>Хорошо</span></label> <input id="star-p4"
                    name="nonechecked" type="radio" value="2"> <label class=
                    "sta-full" for="star-p4"><span>Лучше</span></label>
                    <input id="star-p5" name="nonechecked" type="radio" value=
                    "1"> <label class="sta-full" for=
                    "star-p5"><span>Плохо</span></label>
                </div>
            </div>

            <div class="uit-rating-wrapper">
                <span>Целая и половина звезды отмечены</span>

                <div class="uit-rating">
                    <input id="star-c1" name="response" type="radio" value="5">
                    <label class="sta-full" for="star-c1"><span>5
                    Звёзд</span></label> <input id="star-c2" name="response"
                    type="radio" value="4.5"> <label class="sta-half" for=
                    "star-c2"><span>4.5...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
html,body {
    height: 100%;
}

body {
    margin: 0 auto;
    padding: 0;
    min-height: 100vh;
    color: #333;
    background: -webkit-linear-gradient(90deg,#abbaab 10%,#fff 90%);
/* Chrome 10+, Saf5.1+ */
    background: -moz-linear-gradient(90deg,#abbaab 10%,#fff 90%);
/* FF3.6+ */
    background: -ms-linear-gradient(90deg,#abbaab 10%,#fff 90%);
/* IE10 */
    background: -o-linear-gradient(90deg,#abbaab 10%,#fff 90%);
/* Opera 11.10+ */
    background: linear-gradient(90deg,#abbaab 10%,#fff 90%);
/* W3C */
    
}
.demo {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 10px
}

.tagline span {
    display:block;
    text-transform:uppercase;
    font-family:'Open Sans',Arial,Helvetica,sans-serif;
    font-size:15px;
    padding:10px 0;
    font-weight:300;
    color:#00ACEE
}

.rating-container {
    background:#fff;
    margin:10% auto;
    max-width:500px;
    padding:30px 35px;
    -webkit-box-shadow:0 1px 5px rgba(0,0,0,.65);
    -moz-box-shadow:0 1px 5px rgba(0,0,0,.65);
    -o-box-shadow:0 1px 5px rgba(0,0,0,.65);
    box-shadow:0 1px 5px rgba(0,0,0,.65)
}

.css-rating-widget,.css-rating-widget * {
    font-weight:400;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    padding:0;
    margin:0
}

.css-rating-widget .uit-ratings .fm-control .select select,.css-rating-widget .uit-ratings .fm-control .select select:focus {
    background:#fff;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none
}

.css-rating-widget .uit-ratings .select-wrap:before {
    content:'';
    position:absolute;
    width:30px;
    height:40px;
    pointer-events:none;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    background:none;
    right:1px;
    top:1px;
    z-index:99
}
}

.css-rating-widget .uit-rating-wrapper {
    display:block;
    padding:3px 0
}

.css-rating-widget...