Skip to content

Instantly share code, notes, and snippets.

/index.html

Created February 12, 2017 14:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/a6a7dcdd977b2c56e6e4c24193c76488 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/a6a7dcdd977b2c56e6e4c24193c76488 to your computer and use it in GitHub Desktop.
Download ZIP
stars
Raw
index.html
<div class="cont">
<div class="title">
<h1>stars<span>.css</span></h1>
</div>
<div class="stars">
<form action="">
<input class="star star-5" id="star-5" type="radio" name="star"/>
<label class="star star-5" for="star-5"></label>
<input class="star star-4" id="star-4" type="radio" name="star"/>
<label class="star star-4" for="star-4"></label>
<input class="star star-3" id="star-3" type="radio" name="star"/>
<label class="star star-3" for="star-3"></label>
<input class="star star-2" id="star-2" type="radio" name="star"/>
<label class="star star-2" for="star-2"></label>
<input class="star star-1" id="star-1" type="radio" name="star"/>
<label class="star star-1" for="star-1"></label>
</form>
</div>
<p>click the stars</p>
</div>
<div class="cont">
<div class="stars">
<form action="">
<input class="star star-5" id="star-5-2" type="radio" name="star"/>
<label class="star star-5" for="star-5-2"></label>
<input class="star star-4" id="star-4-2" type="radio" name="star"/>
<label class="star star-4" for="star-4-2"></label>
<input class="star star-3" id="star-3-2" type="radio" name="star"/>
<label class="star star-3" for="star-3-2"></label>
<input class="star star-2" id="star-2-2" type="radio" name="star"/>
<label class="star star-2" for="star-2-2"></label>
<input class="star star-1" id="star-1-2" type="radio" name="star"/>
<label class="star star-1" for="star-1-2"></label>
<div class="rev-box">
<textarea class="review" col="30" name="review"></textarea>
<label class="review" for="review">Breif Review</label>
</div>
</form>
</div>
</div>
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
@import url(http://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400);
*{
margin: 0;
padding: 0;
font-family: roboto;
}
body{
background: #000;
}
.cont{
width: 93%;
max-width: 350px;
text-align: center;
margin: 4% auto;
padding: 30px 0;
background: #111;
color: #EEE;
border-radius: 5px;
border: thin solid #444;
overflow: hidden;
}
hr{
margin: 20px;
border: none;
border-bottom: thin solid rgba(255,255,255,.1);
}
div.title{
font-size: 2em;
}
h1 span{
font-weight: 300;
color: #Fd4;
}
div.stars{
width: 270px;
display: inline-block;
}
input.star{
display: none;
}
label.star {
float: right;
padding: 10px;
font-size: 36px;
color: #444;
transition: all .2s;
}
input.star:checked ~ label.star:before {
content:'\f005';
color: #FD4;
transition: all .25s;
}
input.star-5:checked ~ label.star:before {
color:#FE7;
text-shadow: 0 0 20px #952;
}
input.star-1:checked ~ label.star:before {
color: #F62;
}
label.star:hover{
transform: rotate(-15deg) scale(1.3);
}
label.star:before{
content:'\f006';
font-family: FontAwesome;
}
.rev-box{
overflow: hidden;
height: 0;
width: 100%;
transition: all .25s;
}
textarea.review{
background: #222;
border: none;
width: 100%;
max-width: 100%;
height: 100px;
padding: 10px;
box-sizing: border-box;
color: #EEE;
}
label.review{
display: block;
transition:opacity .25s;
}
input.star:checked ~ .rev-box{
height: 125px;
overflow: visible;
}
Raw
styles
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
@billwen
Copy link

billwen commented Feb 12, 2017

stars

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment