Ahojte, v tomto návode vytvoríme animované počítadlo hodnotení pomocou CSS. Toto počítadlo hodnotení môžeme použiť na hodnotenie produktov alebo článkov atď. Budeme používať iba HTML a CSS, takže to bude ľahké. V tomto počítadle sme implementovali efekty vznášania. Všetky farby a veľkosti písma je možné zmeniť pomocou premenných. Začneme s index.html súborom. index.html <!DOCTYPE html> <head> <title>Počítadlo hodnotenia</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="rating-stars"> <input type="radio" name="rating" id="rs1" checked ><label for="rs1"></label> <input type="radio" name="rating" id="rs2"><label for="rs2"></label> <input type="radio" name="rating" id="rs3"><label for="rs3"></label> <input type="radio" name="rating" id="rs4"><label for="rs4"></label> <input type="radio" name="rating" id="rs5"><label for="rs5"></label> <span class="rating-counter"></span> </div> </body> </html> Tu používame div s triedou „rating-stars“ ako nadradený kontajner pre náš návrh. Použili sme aj prepínač, pretože prepínač môže vybrať len jednu hodnotu. style.css :root{ --bgColor: #FFFFFF; --shadoColor: rgba(0,0,0,0.1); --starPreColor: #DDDDDD; --starPostColor1: yellow; --starPostColor2: orange; --counterTextColor: #FFFFFF; --counterTextSize: 25px; --counterBgColor: #000000; } body { margin: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: var(--bgColor); } body * { box-sizing: border-box; } .rating-stars { display: block; width: 50vmin; padding: 1.75vmin 10vmin 2vmin 3vmin; box-shadow: 0px 0px 8px 5px var(--shadoColor); border-radius: 5vmin; position: relative; } .rating-counter { font-size: var(--counterTextSize); font-family: Arial, Helvetica, serif; color: var(--counterTextColor); width: 10vmin; text-align: center; background: var(--counterBgColor); position: absolute; top: 0; right: 0; height: 100%; border-radius: 0 5vmin 5vmin 0; line-height: 10vmin; } .rating-counter:before { content: "0"; transition: all 0.25s ease 0s; } input { display: none; } label { width: 5vmin; height: 5vmin; display: inline-flex; cursor: pointer; background-color: var(--starPreColor); margin: 0.5vmin 0.65vmin; transition: all 1s ease 0s; clip-path: polygon(50% 0%, 66% 32%, 100% 38%, 78% 64%, 83% 100%, 50% 83%, 17% 100%, 22% 64%, 0 38%, 34% 32%); } label[for=rs0] { display: none; } label:before { width: 90%; height: 90%; content: ""; z-index: -1; display: block; margin-left: 5%; margin-top: 5%; clip-path: polygon(50% 0%, 66% 32%, 100% 38%, 78% 64%, 83% 100%, 50% 83%, 17% 100%, 22% 64%, 0 38%, 34% 32%); background: linear-gradient(90deg, var(--starPostColor1), var(--starPostColor2) 30% 50%, var(--starPreColor) 50%, 70%, var(--starPreColor) 100%); background-size: 205% 100%; background-position: 0 0; } label:hover:before { transition: all 0.25s ease 0s; } input:checked + label ~ label:before { background-position: 100% 0; transition: all 0.25s ease 0s; } input:checked + label ~ label:hover:before { background-position: 0% 0 } #rs1:checked ~ .rating-counter:before { content: "1"; } #rs2:checked ~ .rating-counter:before { content: "2"; } #rs3:checked ~ .rating-counter:before { content: "3"; } #rs4:checked ~ .rating-counter:before { content: "4"; } #rs5:checked ~ .rating-counter:before { content: "5"; } label + input:checked ~ .rating-counter:before { color: var(--counterTextColor); !important; transition: all 0.25s ease 0s; } label:hover ~ .rating-counter:before { color: #9aacc6 !important; transition: all 0.5s ease 0s; animation: pulse 1s ease 0s infinite; } @keyframes pulse { 50% { font-size: 6.25vmin; } } label[for=rs1]:hover ~ .rating-counter:before { content: "1" !important; } label[for=rs2]:hover ~ .rating-counter:before { content: "2" !important; } label[for=rs3]:hover ~ .rating-counter:before { content: "3" !important; } label[for=rs4]:hover ~ .rating-counter:before { content: "4" !important; } label[for=rs5]:hover ~ .rating-counter:before { content: "5" !important; } input:checked:hover ~ .rating-counter:before { animation: none !important; color: #ffab00 !important ; } Ako som už spomenul, používame premenné na zmenu farby nášho dizajnu. :root{ --bgColor: #FFFFFF; --shadoColor: rgba(0,0,0,0.1); --starPreColor: #DDDDDD; --starPostColor1: yellow; --starPostColor2: orange; --counterTextColor: #FFFFFF; --counterTextSize: 25px; --counterBgColor: #000000; } Vysvetlenie každej premennej: –bgColor sa používa na nastavenie farby pozadia. –shadowColor sa používa na zobrazenie tieňa našej hodnotiacej lišty. –starPreColor sa používa na pridelenie primárnej farby našim hodnotiacim hviezdičkám ako svetlošedá. –starPostColor1 a –starPostColor2 sa používajú na vytvorenie prechodovej farby, keď sa na hviezdu aplikuje efekt vznášania a klikne sa na ňu. –counterTextColor sa používa na zafarbenie našich počítacích čísel. –counterTextSize sa používa na nastavenie veľkosti našich textov počítacích čísel. –counterBgColor sa používa na pridanie farby pozadia počítacím číslam. Dúfam, že sa vám tento návod páčil!The post Počítadlo hodnotenia first appeared on Tvorba a správa webových stránok | Frontprog.sk.
Pred pár rokmi takmer nepoznané a momentálne svojou dôležitosťou priamo na Olympe. Online hodnotenia spoločností, produktov, služieb a prakticky všetkého, čo môžeme hodnotiť, budú hrať v roku 2017 veľmi významnú rolu pri budovaní vašej reputácie. Už teraz
prejsť na článokPár slov o tom, ako funguje táto aplikácia a čo sa s ňou dá robiť. Aplikácia Pantone studio slúži na rýchle vytváranie farebných paliet 5 odtieňov s použitím vzorkovníkov Pantone. Môžete ísť naslepo výberom konkrétnych farieb ale vä
prejsť na článokGoogle ohlásil na jún 2021 veľkú aktualizáciu hodnotiaceho algoritmu posudzovania stránok. Tento algoritmus sa pravidelne optimalizuje a aktualizuje. Teraz nás však čaká zmena, ktorá bude o niečo výraznejšia. Do
prejsť na článokPočas 35 dní komplexného a nepretržitého hodnotenia bol SonicWall Capture ATP podrobený celkom 1 060 testom, ktoré zahŕňali 448 škodlivých vzoriek 203 z nich bolo mladšie ako tri hodiny. Nielenže Capture ATP identifikoval všetky tieto škodlivé vzorky, al
prejsť na článokDôležitá kvalita reklamy Google ads Pozor na nekvalitné reklamy Kvalita reklám je rozsiahla téma. Na základe poznatkov, o ktorých nás informovali inzerenti písomne, na konferenciách a fórach, sme strávili určitý čas vypracovaním zoznamu najdôležitejších v
prejsť na článok