Flat CSS3 rating system
How do I make an flat css3 rating system?
What is a flat css3 rating system? How do you make a flat css3 rating system? This script and codes were developed by Renaud Tertrais on 12 August 2022, Friday.
Flat CSS3 rating system - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat CSS3 rating system</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<h1>Flat pure CSS3 rating system</h1>
<div id="wrapper">
<input type="radio" id="star1" name="star" />
<label for="star1"></label>
<input type="radio" id="star2" name="star" />
<label for="star2"></label>
<input type="radio" id="star3" name="star" checked="checked"/>
<label for="star3"></label>
<input type="radio" id="star4" name="star" />
<label for="star4"></label>
<input type="radio" id="star5" name="star" />
<label for="star5"></label>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Flat CSS3 rating system - Script Codes CSS Codes
body { text-align: center; background-color: #34495e; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1 { color: #FFF; font-weight: 500; padding: 30px; text-shadow: 0 3px 3px #2b3c4e;
}
input { display: none;
}
label { cursor: pointer; font-size: 40px; color: yellow; display: block; width: 50px; height: 50px; line-height: 60px; text-align: center; float: left; -moz-transition: all 0.2s; -o-transition: all 0.2s; -webkit-transition: all 0.2s; transition: all 0.2s; text-shadow: 0 3px 3px #2b3c4e;
}
label:hover { font-size: 50px; color: #FFF; text-shadow: 0 0 5px #b9c9d8;
}
label:before { display: inline; width: auto; height: auto; line-height: normal; vertical-align: baseline; margin-top: 0; font-family: FontAwesome; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; content: "\f005";
}
input:checked + label ~ label:before { content: "\f006";
}
#wrapper { display: inline-block;
}
#wrapper:hover label:before { content: "\f005";
}
#wrapper:hover label:hover ~ label:before { content: "\f006";
}
Flat CSS3 rating system - Script Codes JS Codes
// NO JS here :)
Developer | Renaud Tertrais |
Username | renaudtertrais |
Uploaded | August 12, 2022 |
Rating | 3.5 |
Size | 2,752 Kb |
Views | 28,336 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Flat CSS3 Breadcrumb | 3,093 Kb |
React-a11y-range | 7,029 Kb |
React-draggable | 2,539 Kb |
React Flat Gradient | 5,268 Kb |
Pure CSS3 arrow icons | 4,030 Kb |
Tiny CSS3 Round Breadcrumb | 2,921 Kb |
Animated logo SVG, CSS3 and JS | 3,432 Kb |
CSS3 Transitions on grid | 2,404 Kb |
A Pen by Renaud Tertrais | 3,033 Kb |
Flat CSS3 rating system | 2,752 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Tooltip in table | Roine | 3,713 Kb |
Material design buttons | Fischaela | 4,381 Kb |
Tile Animation Thing | Frxnz | 4,332 Kb |
Default Input, Textareas, Submits, and Buttons in iOS | Demersdesigns | 2,334 Kb |
JQuery FullScreen Overlay | _codemics | 2,252 Kb |
LDE old privacy page | Jasonangle | 2,339 Kb |
A Pen by James Podles | Jpod | 2,656 Kb |
Birthday Party Starter | Aussieyang | 1,629 Kb |
Scroll Arrow | Robooneus | 4,437 Kb |
Colorful Sliders | Chanrith | 1,246 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!