Skip to content

Instantly share code, notes, and snippets.

@ktokot

ktokot/dabblet.css

Last active January 3, 2021 18:30
Show Gist options
  • Save ktokot/eb9f3fe52be791ab9ed5035d161d1509 to your computer and use it in GitHub Desktop.
Save ktokot/eb9f3fe52be791ab9ed5035d161d1509 to your computer and use it in GitHub Desktop.
Download ZIP
half-star rating with css & SVG
Raw
dabblet.css
/**
* half-star rating with css & SVG
*/
.stars {
height: 4rem;
width: 20rem;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg3Y2VmYSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZWU4MmVlIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYzcxNTg1Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #87cefa), color-stop(50%, #ee82ee), color-stop(100%, #c71585));
background: -moz-linear-gradient(left, #87cefa, #ee82ee, #c71585);
background: -webkit-linear-gradient(left, #87cefa, #ee82ee, #c71585);
background: linear-gradient(to right, #87cefa, #ee82ee, #c71585);
}
.stars.s2 {
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FkZmYyZiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmZhNTAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZGMxNDNjIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #adff2f), color-stop(50%, #ffa500), color-stop(100%, #dc143c));
background: -moz-linear-gradient(left, #adff2f, #ffa500, #dc143c);
background: -webkit-linear-gradient(left, #adff2f, #ffa500, #dc143c);
background: linear-gradient(to right, #adff2f, #ffa500, #dc143c);
}
.stars:hover .star {
background-color: transparent;
}
.stars .star {
background-image: url("https://s.cdpn.io/2361/whitestarbigtilt.png");
height: 100%;
width: 4rem;
float: left;
cursor: pointer;
}
.stars .star.half {
width: 1.7em;
}
.stars .star.half:nth-child(2n) {
background-position: right;
width: 2.3rem;
}
.pick ~ .star, .star:hover ~ .star {
background-color: #c0c0c0;
}
html {
font-size: 10px;
}
.stars {
margin: -6rem -10rem;
position: absolute;
left: 50%;
top: 50%;
}
.stars.s2 {
margin-top: 2rem;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class='stars s1'>
<div class='star'></div>
<div class='star'></div>
<div class='star pick'></div>
<div class='star'></div>
<div class='star'></div>
</div>
<div class='stars s2'>
<div class='star half'></div>
<div class='star half'></div>
<div class='star half'></div>
<div class='star half'></div>
<div class='star half'></div>
<div class='star half'></div>
<div class='star half'></div>
<div class='star half'></div>
<div class='star half pick'></div>
<div class='star half'></div>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment