Bewertung per Stern

bewertung-per-stern.markdown

Bewertung per Stern

Basierend auf diesem Artikel: https://blog.lunarlogic.io/2016/starability-css-accessible-rating-with-animations-on-top/

A Pen by Jens Grochtdreis on CodePen.

License.

index.html

<form action="/">
  <fieldset class="starselection"> 
    <legend>Bewerten Sie unsere Leistung:</legend>
    <input type="radio" id="no-rate1" class="input-no-rate" name="rating1" value="0" checked aria-label="Keine Einstufung." />
    <input type="radio" id="rate1-1" name="rating1" value="1" />
    <label for="rate1-1" title="Terrible">1 Stern</label>

    <input type="radio" id="rate1-2" name="rating1" value="2" />
    <label for="rate1-2" title="Not good">2 Sterne</label>

    <input type="radio" id="rate1-3" name="rating1" value="3" />
    <label for="rate1-3" title="Average">3 Sterne</label>

    <input type="radio" id="rate1-4" name="rating1" value="4" />
    <label for="rate1-4" title="Very good">4 Sterne</label>

    <input type="radio" id="rate1-5" name="rating1" value="5" />
    <label for="rate1-5" title="Amazing">5 Sterne</label>
    
    <div class="starselection__focus-ring"></div>
  </fieldset>
  <fieldset class="starselection starselection--grow"> 
    <legend>Bewerten Sie den Geschmack:</legend>
    
    <input type="radio" id="no-rate2" class="input-no-rate" name="rating2" value="0" checked aria-label="Keine Einstufung." />
    <input type="radio" id="rate2-1" name="rating2" value="1" />
    <label for="rate2-1" title="Terrible">1 Stern</label>

    <input type="radio" id="rate2-2" name="rating2" value="2" />
    <label for="rate2-2" title="Not good">2 Sterne</label>

    <input type="radio" id="rate2-3" name="rating2" value="3" />
    <label for="rate2-3" title="Average">3 Sterne</label>

    <input type="radio" id="rate2-4" name="rating2" value="4" />
    <label for="rate2-4" title="Very good">4 Sterne</label>
    
    <input type="radio" id="rate2-5" name="rating2" value="5" />
    <label for="rate2-5" title="Amazing">5 Sterne</label>
    
    <div class="starselection__focus-ring"></div>
  </fieldset>
  <fieldset class="starselection starselection--growrotate"> 
    <legend>Bewerten Sie die Lieferung:</legend>

    <input type="radio" id="no-rate3" class="input-no-rate" name="rating3" value="0" checked aria-label="Keine Einstufung." />
    <input type="radio" id="rate3-1" name="rating3" value="1" />
    <label for="rate3-1" title="Terrible">1 Stern</label>

    <input type="radio" id="rate3-2" name="rating3" value="2" />
    <label for="rate3-2" title="Not good">2 Sterne</label>

    <input type="radio" id="rate3-3" name="rating3" value="3" />
    <label for="rate3-3" title="Average">3 Sterne</label>
    
    <input type="radio" id="rate3-4" name="rating3" value="4" />
    <label for="rate3-4" title="Very good">4 Sterne</label>
    
    <input type="radio" id="rate3-5" name="rating3" value="5" />
    <label for="rate3-5" title="Amazing">5 Sterne</label>
    
    <div class="starselection__focus-ring"></div>
  </fieldset>
</form>

style.css

.starselection {
  position: relative;
  margin-bottom: 20px;
  min-height: 60px;
  border: none;
  padding: 0;
}

.starselection legend {
  margin-bottom: 10px;
}

.starselection input {
 position:absolute;
 margin-right:-100%;
 opacity:0
}
.starselection input:checked ~ label,
.starselection input:focus ~ label {
  background-position: 0 -30px;
}

.starselection label {
  position: relative;
  float: left;
  width: 30px;
  font-size: .1em;
  color: transparent;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: 0 -30px;
}

.starselection label,
.starselection label:before {
 height:30px;
 background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAA8CAMAAABGivqtAAAAxlBMVEUAAACZmZn2viTHuJ72viOampqampr1viSampr3vySampqdnZ34wiX1vSSampr1vSOZmZmampr1viT2vSOampr2viT2viSampr2viSampr2vyX4vyWbm5v3vSSdnZ32wSadnZ36wCWcnJyZmZn/wSr/2ySampr2vSP2viSZmZn2vSSZmZn2vST2viSampr2viSbm5ubm5uZmZn1vSSampqbm5v2vSWampqampr3vSf5wiT5vyagoKD/xCmkpKT/yCSZmZn1vSO4V2dEAAAAQHRSTlMA+vsG9fO6uqdgRSIi7+3q39XVqZWVgnJyX09HPDw1NTAwKRkYB+jh3L6+srKijY2Ef2lpYllZUU5CKigWFQ4Oneh1twAAAZlJREFUOMuV0mdzAiEQBmDgWq4YTWIvKRqT2Htv8P//VJCTGfYQZnw/3fJ4tyO76KE0m1b2fZu+U/pu4QGlA7N+Up5PIz9d+cmkbSrSNr9seT3GKeNYIyeO5j16S28exY5suK0U/QKmmeCCX6xs22hJLVkitMImxCvEs8EG3SCRCN/ViFPqnq5epIzZ07QJJvkM9Tkz1xnkmXbfSvR7f4H8AtXBkLGj74mMvjM1+VHZpAZ4LM4K/LBWEI9jwP71v1ZEQ6dyvQMf8A/1pmdZnKce/VH1iIsdte4U8VEtY23xOujxtFpWDgKbfjD2YeEhY0OzfjGeLyO/XfnNpAcmcjDwKOXRfU1IyiTRyEkaiz67pb9oJHJb9vVqKfgjLBPyF5Sq9T0KmSUhQmtiQrJGPHVi0DoSabj31G2gW3buHd0pY85lNdcCk8xlNDPXMuSyNiwl+theIb9C7RLIpKvviYy+M6H8qGwSAp6Is19+GP6KxwnggJ/kq6Jht5rnRQA4z9zyRRaXssvyqp5I6Vutv0vkpJaJtnjpz/8B19ytIayazLoAAAAASUVORK5CYII=")
}

.starselection label:before {
 content:'';
 position:absolute;
 display:block;
 pointer-events:none;
 opacity:0;
 background-position: 0 30px;
}

/* Fokusmarkierung per Tastatur */
.starselection .starselection__focus-ring {
	position:absolute;
	left:0;
	width:100%;
	height:30px;
	outline:2px dotted #999;
	pointer-events:none;
	opacity:0
}
.starselection .input-no-rate:focus ~ .starselection__focus-ring {
	opacity:1
}

/* Sternentausch */

.starselection>input:checked ~ label,
.starselection>input:focus ~ label {
 background-position:0 0
}
.starselection input:checked + label,
.starselection input:focus + label {
 background-position:0 -30px
}
.starselection input:hover ~ label,
.starselection input:focus ~ label{
 background-position:0 0
}
.starselection input:hover + label,
.starselection input:focus + label {
 background-position:0 -30px
}
.starselection input:hover + label:before,
.starselection input:focus + label:before {
 opacity:1
}

/* Breite und Positionierung */
.starselection label:nth-of-type(5):before {
 width:120px;
 left:-120px
}
.starselection label:nth-of-type(4):before {
 width:90px;
 left:-90px
}
.starselection label:nth-of-type(3):before {
 width:60px;
 left:-60px
}
.starselection label:nth-of-type(2):before {
 width:30px;
 left:-30px
}
.starselection label:nth-of-type(1):before {
 width:0;
 left:0
}

/* Effekt 1: grow */

.starselection--grow label:after,
.starselection--growrotate label:after {
 content:' ';
 position:absolute;
 opacity:0;
 width:30px;
 height:30px;
 background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAA8CAMAAABGivqtAAAAxlBMVEUAAACZmZn2viTHuJ72viOampqampr1viSampr3vySampqdnZ34wiX1vSSampr1vSOZmZmampr1viT2vSOampr2viT2viSampr2viSampr2vyX4vyWbm5v3vSSdnZ32wSadnZ36wCWcnJyZmZn/wSr/2ySampr2vSP2viSZmZn2vSSZmZn2vST2viSampr2viSbm5ubm5uZmZn1vSSampqbm5v2vSWampqampr3vSf5wiT5vyagoKD/xCmkpKT/yCSZmZn1vSO4V2dEAAAAQHRSTlMA+vsG9fO6uqdgRSIi7+3q39XVqZWVgnJyX09HPDw1NTAwKRkYB+jh3L6+srKijY2Ef2lpYllZUU5CKigWFQ4Oneh1twAAAZlJREFUOMuV0mdzAiEQBmDgWq4YTWIvKRqT2Htv8P//VJCTGfYQZnw/3fJ4tyO76KE0m1b2fZu+U/pu4QGlA7N+Up5PIz9d+cmkbSrSNr9seT3GKeNYIyeO5j16S28exY5suK0U/QKmmeCCX6xs22hJLVkitMImxCvEs8EG3SCRCN/ViFPqnq5epIzZ07QJJvkM9Tkz1xnkmXbfSvR7f4H8AtXBkLGj74mMvjM1+VHZpAZ4LM4K/LBWEI9jwP71v1ZEQ6dyvQMf8A/1pmdZnKce/VH1iIsdte4U8VEtY23xOujxtFpWDgKbfjD2YeEhY0OzfjGeLyO/XfnNpAcmcjDwKOXRfU1IyiTRyEkaiz67pb9oJHJb9vVqKfgjLBPyF5Sq9T0KmSUhQmtiQrJGPHVi0DoSabj31G2gW3buHd0pY85lNdcCk8xlNDPXMuSyNiwl+theIb9C7RLIpKvviYy+M6H8qGwSAp6Is19+GP6KxwnggJ/kq6Jht5rnRQA4z9zyRRaXssvyqp5I6Vutv0vkpJaJtnjpz/8B19ytIayazLoAAAAASUVORK5CYII=");
 background-repeat:no-repeat;
 bottom:0;
 left:0
}

.starselection--grow input:checked + label:after,
.starselection--growrotate input:checked + label:after {
 background-position:0 -30px;
 opacity:1;
 animation-duration:1s;
 animation-fill-mode:forwards
}

.starselection--grow input:checked + label:after {
 animation-name:stargrow;
}

.starselection--growrotate input:checked + label:after {
 animation-name:stargrowrotate;
}

@keyframes stargrow {
 0% {
  transform:scale(1);
 }
 70% {
  transform:scale(3);
  opacity:0;
 }
 to {
  transform:scale(1);
  opacity:0;
 }
}

@keyframes stargrowrotate {
 0% {
  transform:scale(1) rotate(0deg)
 }
 99% {
  transform:scale(4) rotate(90deg);
  opacity:0
 }
 to {
  transform:scale(1) rotate(0deg);
  opacity:0
 }
}

styles

<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/basics_3.css" rel="stylesheet" />