Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
To create a simple star rating look with CSS, the code is as follows −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; margin: 30px; } .fa { font-size: 30px; color: grey; } .rated { color: rgb(255, 0, 0); border: 2px solid yellow; } Star Rating Example OutputThe above code will produce the following output −
For Radial Gradients, set color stops. The default shape is Ellipse, but you can also set other shapes like circle. Set at least two color stops for Radial Gradients in CSS.Following is the code for creating radial gradients using CSS −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } #radial { height: 200px; width: 200px; background-image: radial-gradient( rgb(255, 0, 106), rgb(2, 0, 128), rgb(0, 255, 42) ); } Radial Gradient Example OutputThe above code will produce the following output −
To create a collapsible section with CSS and JavaScript, the code is as follows −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .collapse { background-color: rgb(83, 186, 255); color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 18px; } .active, .collapse:hover { background-color: rgb(34, 85, 160); } ... Read More
To create tooltips with CSS, the code is as follows −Example Live Demo body { text-align: center; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; font-size: 20px; font-weight: bolder; color: blue; } .tooltip .toolText { visibility: hidden; width: 120px; background-color: rgb(89, 166, 255); color: #fff; ... Read More
To create a delete confirmation modal with CSS and JavaScript, the code is as follows −Example Live Demo body { font-family: Arial, Helvetica, sans-serif; } .modal { text-align: center; display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); } .modalContent { font-size: 20px; ... Read More
To create a modal box with CSS and JavaScript, the code is as follows −Example Live Demo body { font-family: Arial, Helvetica, sans-serif; } .modal { text-align: center; display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); } .modalContent { font-size: 20px; ... Read More
To create a full screen video background with CSS, the code is as follows −Example Live Demo * { box-sizing: border-box; } body { margin: 0; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size: 17px; } .backgroundVideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; } .content { position: fixed; bottom: 0; ... Read More
To create a responsive table with CSS, the code is as follows −Example Live Demo table { border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid #ddd; } th, td { text-align: center; padding: 16px; font-weight: bold; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 18px; } th:first-child, td:first-child { text-align: left; } tr:nth-child(even) { background-color: #f2f2f2 } Comparison Table Example Features Basic Pro Free Yes No Customer Support No Yes Validity 1 Year Lifetime Warranty No 5 Years OutputThe above code will produce the following output −
To create a responsive table with CSS, the code is as follows −Example Live Demo body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } div{ overflow-x: auto; } table { border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid rgb(0, 0, 0); } th, td { text-align: left; padding: 8px; } tr:nth-child(even){background-color: #f2f2f2} Responsive Table Example First Name Last Name marks marks marks marks marks marks marks marks marks marks JACK ROY 50 60 10 20 40 50 10 20 30 40 Evelyn Monroe 24 14 22 44 55 44 11 55 22 33 Joe Anderson 54 22 99 55 91 61 81 11 22 55 OutputThe above code will produce the following output −On resizing the window the scrollbar will appear as follows −
To sort an HTML list using JavaScript, the code is as follows −Example Live Demo Sorting list example Click to sort Giraffe Camel Dog Lion Cheetah Cat document .getElementsByTagName("button")[0] .addEventListener("click", sortList); function sortList() { var list, i, sortFlag, LiEle, sorted; list = document.querySelector(".animalList"); sortFlag = true; while (sortFlag) { sortFlag = false; LiEle = list.getElementsByTagName("LI"); for (i = 0; i < LiEle.length - 1; i++) { ... Read More