Skip to content

Instantly share code, notes, and snippets.

@jensgro

jensgro/bewertung-per-stern.markdown

Last active September 18, 2019 13:26
Show Gist options
  • Save jensgro/c057d870b89cd032d2688032d1a704fc to your computer and use it in GitHub Desktop.
Save jensgro/c057d870b89cd032d2688032d1a704fc to your computer and use it in GitHub Desktop.
Download ZIP
Bewertung per Stern
Raw
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>
Raw
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
}
}
Raw
styles
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/basics_3.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment