Created
November 16, 2017 07:25
-
-
Save flohw/cde1147f3dbab95cf1547b9d8201cbec to your computer and use it in GitHub Desktop.
Notation étoiles CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
background: #FDFDFD; | |
font-family: "Segoe WP","Segoe UI", Helvetica, Arial, sans-serif; | |
text-align:center; | |
} | |
h1, h2 { | |
color: #888; | |
margin:0; | |
font-weight:normal; | |
} | |
h1{ padding-top: 1.5em; padding-bottom: 2em; } | |
h2 { | |
clear:both; | |
color: #aaa; | |
padding: 2em 0 0.3em | |
} | |
em { | |
display: block; | |
margin: .5em auto 2em; | |
color: #bbb; | |
} | |
p, p a { | |
color: #aaa; | |
text-decoration: none; | |
} | |
p a:hover, | |
p a:focus { | |
text-decoration: underline; | |
} | |
p + p { color: #bbb; margin-top: 2em;} | |
.detail {position: absolute; text-align: right; right: 5px; bottom: 5px; width: 50%;} | |
a[href*="intent"] { | |
display:inline-block; | |
margin-top: 0.4em; | |
} | |
/* | |
* Rating styles | |
*/ | |
.rating { | |
width: 226px; | |
margin: 0 auto 1em; | |
font-size: 45px; | |
overflow:hidden; | |
} | |
.rating a { | |
float:right; | |
color: #aaa; | |
text-decoration: none; | |
-webkit-transition: color .4s; | |
-moz-transition: color .4s; | |
-o-transition: color .4s; | |
transition: color .4s; | |
} | |
.rating a:hover, | |
.rating a:hover ~ a, | |
.rating a:focus, | |
.rating a:focus ~ a { | |
color: orange; | |
cursor: pointer; | |
} | |
.rating2 { | |
direction: rtl; | |
} | |
.rating2 a { | |
float:none | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Rating Stars with no JS</h1> | |
<h2>Rating with float:right; and general siblings selector</h2> | |
<div class="rating"><!-- | |
--><a href="#5" title="Give 5 stars">☆</a><!-- | |
--><a href="#4" title="Give 4 stars">☆</a><!-- | |
--><a href="#3" title="Give 3 stars">☆</a><!-- | |
--><a href="#2" title="Give 2 stars">☆</a><!-- | |
--><a href="#1" title="Give 1 star">☆</a> | |
</div> | |
<h2>Rating with direction:rtl and general siblings selector</h2> | |
<div class="rating rating2"><!-- | |
--><a href="#5" title="Give 5 stars">★</a><!-- | |
--><a href="#4" title="Give 4 stars">★</a><!-- | |
--><a href="#3" title="Give 3 stars">★</a><!-- | |
--><a href="#2" title="Give 2 stars">★</a><!-- | |
--><a href="#1" title="Give 1 star">★</a> | |
</div> | |
<em>IE7+ compatible ;)</em> | |
<p>by <a href="http://creativejuiz.fr/">Geoffrey Crofte</a> (<a href="https://twitter.com/geoffrey_crofte">@geoffrey_crofte</a>)<br /> | |
<a href="https://twitter.com/intent/tweet?hashtags=CSS,Rating,Tutorial&original_referer=http%3A%2F%2Fwww.creativejuiz.fr%2Ftrytotry%2Frating-stars-with-no-js.html&related=geoffrey_crofte&text=Full%20CSS%20Rating%20system%20with%20no%20JS&url=http%3A%2F%2Fwww.creativejuiz.fr%2Ftrytotry%2Frating-stars-with-no-js.html&via=geoffrey_crofte" title="Tweet in new window" target="_blank">Tweet</a><br /> | |
<a href="http://www.creativejuiz.fr/blog/tutoriels/systeme-notation-quelques-lignes-css" hreflang="fr">Back to the blog article (French)</a></p> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment