Flat CSS3 rating system

Developer
Renaud Tertrais
Size
2,752 Kb
Views
28,336
  1. Flat CSS3 rating system Previews
  2. Flat CSS3 rating system HTML Codes
  3. Flat CSS3 rating system CSS Codes
  4. Flat CSS3 rating system JS Codes

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 Previews
IQ Test

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 :)
Flat CSS3 rating system - Script Codes
Flat CSS3 rating system - Script Codes
Home Page Home
Developer Renaud Tertrais
Username renaudtertrais
Uploaded August 12, 2022
Rating 3.5
Size 2,752 Kb
Views 28,336
Do you need developer help for Flat CSS3 rating system?

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!

Renaud Tertrais (renaudtertrais) Script Codes
Name
CSS3 Transitions on grid
Playing with Mustache and Google Chart
Flat CSS3 Breadcrumb
Console
Angular JS - Basic app
Tiny CSS3 Round Breadcrumb
Pure CSS albums gallery
TCP Brut Force
Buttons wip...
Pure CSS3 arrow icons
Create amazing love letters with AI!

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!