Skip to content

Instantly share code, notes, and snippets.

@ctrl-freak
Last active February 9, 2021 05:18
Show Gist options
  • Save ctrl-freak/1581650 to your computer and use it in GitHub Desktop.
Save ctrl-freak/1581650 to your computer and use it in GitHub Desktop.
CSS & PHP Star Rating Display
<style type="text/css">
.star-rating-container, .star-rating-stars {
background-image: url(data:image/gif;base64,R0lGODlhEAAwAOYAAKE3N8XFxemzG8yADefCWtSEhNBzc97e3uSvr8BgYOO4Q/fsvMVSUtbW1uK2NOS9Zvb29urLRtqpqe7u7t2oKfHcmt66uuzPea1GRvfp6ey8Iu3CMOnGQevNmc1sbPbhYvTf3/TZWvHOU+fn58daWtmdJc97e9eSkvfrtb9CQsJKSt+vMefEcuzHx+nHTO/FKe/VTPz47+a9QvLVWMxmZszMzPv12Pv15ua/OeiwJfHbot2qRfHcf71KStOPIqo/P+S7Su7DS+WtOO3Sq////9iMjNN8fPTWQOrJgfHNL/LQRfXeXemzIPnu7vLWVe3QWu7DQdGLGenHbu3Ly+/IT+W2OO3OSe+9Ke/OKeq1K961MclgYOu9RO+1QvLcV/DLOffenOi6uuvOh9uUlOy/SLRMTNaZK/LfsLhERPfWSv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEHAGoALAAAAAAQADAAAAf/gGqCg2oQE4SIiA0NiY0TiyONiouMkoIjDQcHmYkTmoublKAjEJuan6KpaqCiNa41izVEgqyxrrEQhK2vDTW5hJi9vJyIoa2LicapNYmUNZqvzIiukYMjNQGdkoeWIFOWiAY04IMtNDQI5Go0BgYk5Ag0RkZbRYktYwZbNCYeW+4MaBRAkKGfgXlGPDBgQMKDPxIMVKhxWIAGCYgRVaigEbGJoHNGMGpMwVGFx0H/SqpIQTJFBkQS/mlcedFEoiLnGOyLSCJBIgMe2l08R6JMooYMUhQ4gQYNgx+JNI4hJAEDgERhJFkAZ2OBOkFPInxdYMVKBXURnDjBQQ6MlRAhjDhcSISCxxMOb5V8EYHDARApOm48geFliWElL15soBKES5UVK9SIgPHhSJIkiTVoYMJFyIoYglxYWXL5hWYBZIRQAD1IxgzEpgUI4ELhBqIKHGaY1iCgSpUHiS5EiLABCpQsOarsSESAiggqMqpwcWwmkQIqVSiwQFKihJAoiSCLIdTBx4BEZyQNGRQIADs%3D);
}
.star-rating-container {
width: 80px;
background-position: 0 0px;
background-repeat: repeat-x;
margin-bottom: 4px;
}
.star-rating-stars {
height: 15px;
background-position: 0 -32px;
background-repeat: repeat-x;
text-indent: -9001px;
}
</style>
<div class="star-rating-container">
<? $percentage = floor(($rating*4))*5;?>
<div class="star-rating-stars" style="width: <?=$percentage?>%">
<? echo ($percentage/100)*5 ?>/5
</div>
</div>
@jgonsol
Copy link

jgonsol commented Feb 4, 2021

I think code need this ... div for container ???

/5

@ctrl-freak
Copy link
Author

I think code need this ... div for container ???

/5

You're right, thanks. Updated.

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