Skip to content

Instantly share code, notes, and snippets.

@brandonbarringer
Last active December 20, 2022 16:19
Show Gist options
  • Save brandonbarringer/f6355cb565e78eaab9984d78193fd290 to your computer and use it in GitHub Desktop.
Save brandonbarringer/f6355cb565e78eaab9984d78193fd290 to your computer and use it in GitHub Desktop.
PHP Creation of 0 to 5 star reviews
<?php
$rating = 3.68;
$parts = explode('.', $rating);
?>
<style>
.rating {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 10px;
}
.rating__stars {
display: flex;
gap: 5px;
}
.rating__star {
color: #FFB703;
width: 15px;
height: 25px;
position: relative;
z-index: 1;
}
.rating__star::before {
content: "\2605";
position: absolute;
color: #FFB703;
z-index: 0;
display: block;
}
.rating__star::after {
content: "\2605";
position: absolute;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #A68432;
position: relative;
z-index: 2;
display: block;
color: transparent;
}
.rating__star--outline {
color: white;
}
.rating__star--outline::before {
color: white;
}
.rating__star--half {
color: #FFB703;
}
.rating__star--half::before {
clip-path: polygon(0 0, var(--fill) 0, var(--fill) 100%, 0 100%);
}
</style>
<div class="rating">
<div class="rating__stars">
<?php for ($i = 0; $i < $parts[0]; $i++): ?>
<span class="rating__star">
</span>
<?php endfor ?>
<?php if ($parts[1] > 0 && $parts[0] < 5): ?>
<span class="rating__star rating__star--half" style="--fill: <?= $parts[1] ?>%"></span>
<?php for ($i = $parts[0] + 1; $i < 5; $i++): ?>
<span class="rating__star rating__star--outline"></span>
<?php endfor ?>
<?php else: ?>
<?php for ($i = $parts[0]; $i < 5; $i++): ?>
<span class="rating__star rating__star--outline"></span>
<?php endfor ?>
<?php endif ?>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment