Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <a href='#' class='accountToggle'><i class='fas fa-user-secret'></i><span>nickname</span></a>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.accountToggle{ position: fixed; top: 35%; right: -92px; z-index: 4; clip-path: polygon( 11% 0%, 100% 0%, 100% 100%,0% 100%); background: radial-gradient(ellipse at 100% ,orange, red 250%); padding: 0 5px 0 0px; text-decoration: none; color: black; opacity:0.5; transition:0.4s; } .accountToggle.active{ right: 0; opacity:1; transition:0.3s; } .accountToggle i{ display: inline-block; padding: 13px 8px 13px 21px; margin-right: 4px; line-height: 14pt; border-right:2px solid orangered; } .accountToggle span{ padding: 13px 5px 13px 5px; display: inline-block; font-size: 14pt; line-height: 14pt; } .accountToggle span:hover,i:hover{ color:white; }
CSS
Autoformát
CSS reset
Až na konci
$(document).ready(function(){ $('.accountToggle i').click(function(e){ e.preventDefault(); $('.accountToggle').toggleClass('active') }) })
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>