Skip to content

Instantly share code, notes, and snippets.

@matijs

matijs/index.html

Created December 10, 2012 11:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save matijs/4250019 to your computer and use it in GitHub Desktop.
Save matijs/4250019 to your computer and use it in GitHub Desktop.
Download ZIP
star rating
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Star rating</title>
<style>
html { background: slategrey; color: ivory; font-family: Helvetica, Arial, sans-serf; font-size: 16px; }
body { margin: 2em; }
.result { background: ivory; border-radius: 1em; border: 2px solid darkslategrey; color: darkslategrey; font-size: 1em; overflow: hidden; text-shadow: 0 1px 1px rgba(0,0,0,0.4); width: 6em; }
.result > em { font-style: normal; }
.result > span { position: absolute; left: -10000em; }
[data-rating]:before { content: attr(data-rating); margin: 0 .5em; }
</style>
</head>
<body>
<h1>Star rating</h1>
<p>Using good old fashioned elements we've loved for a long time</p>
<p class="result"><em data-rating="&#9734;&#9734;&#9734;&#9734;&#9734;">0</em><span> stars of 5 stars</span></p>
<p class="result"><em data-rating="&#9733;&#9734;&#9734;&#9734;&#9734;">1</em><span> star of 5 stars</span></p>
<p class="result"><em data-rating="&#9733;&#9733;&#9734;&#9734;&#9734;">2</em><span> stars of 5 stars</span></p>
<p class="result"><em data-rating="&#9733;&#9733;&#9733;&#9734;&#9734;">3</em><span> stars of 5 stars</span></p>
<p class="result"><em data-rating="&#9733;&#9733;&#9733;&#9733;&#9734;">4</em><span> stars of 5 stars</span></p>
<p class="result"><em data-rating="&#9733;&#9733;&#9733;&#9733;&#9733;">5</em><span> stars of 5 stars</span></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment