IKNDEX_개사판CSS tag <title>amazing navbar</title> 2020.10.38
index_CSS tag
*{
font-family: tahoma;
box-sizing: order-box;
color: #333;
font-size: 100%
line-heiht: 1.5;
}
body{
background-image: url(blacka.jpeg);
margin: 0;
ackground-size: cover;
}
nav{
--duration: .5s;
--easing:ease-in-out;
position: relative;
width: 220px;
margin: 20px;
}
nav ol{
list-style: none;
margin: 0;
padding: 0;
}
nav li{
margin: -4px 0 0 0; 39
}
nav a{
display: block;
text-decoration: none;
background: white;
transform-origin: 0 0;/
transition transform var(--duration) var(--easing), color var(--duration) v
ar(--easing);
trasitipn-delay: var(--delay-out);
border-radius: 4px;
padding: 1em 1.52em;
}
nav a:hover{
background: #efefef;
}
nav .sub-menu a{
font-size: .9em;
color #666666;
border-lleft: 2em solid white;
padding: 75em;
backgrround: lnear-gradient(to right, #dddddd 2px, #ffffff 2px);
}
nav .sub-menu a:hover{
background: inear-gradient(to right, #dddddd 2px, #efefef 2px);
}
nav header{
font-weight: 600;
display: block;
background: rgba(255, 255,255,0.5);
transform-origin: 0 0;
transition var(--duration) var(--easing),
color var(--duration) var(--easing);
border-radius: 4px;
padding: 1em 1.52em;
}
nav header span{ 81
}
background: #cdcdcd; 104
opacitty: 0;
} 107
nav .closed a,
nav .closed header{
transform: translateY(calc(--top) * -1)
scaleY(0.1) scalex(0.2);
trasition-delay: var(--delay-in);
color: trasparent;
}
nsav.closed footer button{
transiitiion-delay: 0s;
transform: translatteY(0.7) scalex(0.2);
} 119
for the script go to the desccription below
</style>
IKNDEX_개사판CSS tag
*,::before,
::after{
margin: 0;
display: 100vh;
align-tiems: center;
justify-content: content;
overfllow: hidden;
font: 600 62.5%;
font-family: asns-serif;
background-color: #17141d;
}
a{
text-decoration: none;
white-space: nowrap;
font-size: lrem;
color: #alalaf; 22
}
a.tag{
display: block;
padding: 0.3em 0.85em;
margin: 0.5em;
text-trannsform: capitalize;
border: 3px solid #2a242f;
border-radius: 2em;
transition: transform 0.25;
transition-tiiming-function: cubiic-bezicr(0.45, -0.85, -0.45)}
}
a.tag:hover{
transform: scale(1.2);
background: linear-gradient(to right, #ff8a00, #da1b60);
background-clip: text
}
.centainer{
margin: 2em 6em;
padding-left: 1em;
display: flex;
width: 100%;
justify-content: apace-between;
align-items: center; 52
font-size: 1rem;
color:#a1a1af;
border: 1px sold #28242f;
border-radius: 0.35em;
box-shadow: 0 10px 60px #070509;' 57
}
.contaiiner .tage{
marbn: 0; 63
display: flex;
lustify-conntent: center;
align-ites: center;
}
.container .tags span{
margin-right: lem;
padding: 1em;
text-trasform: uppercase;
transform: rotate(180deg);
writing-mode: vertical-rl;
border-left: 3px solid #28242f;
background: linear-ggradiient9to riht, $ff8a00, #a1b60{);
-webbkit-ackground-clip:text;
-webkit-text-fill-color:transparent; 81
}
.container .tage a:last-chid{
margin-left: 0.5em;
}
.container ,tage a:last-child: hover{
color: white;
}
.container label{
position: relative;
white-space: nowrap;
display: flex;
width: 48px;
height: 48px;
align-items: center;
justify-content: flex-end;
border: 3px solid transparent;
border-radius: 2em;
background-color: #17141d;
background-iimage: radial-gradient(circle at 50%, #ff8a00, #a160);
trannsiition: all 250ms ease-in-out; 106
}
.centaineer lael::before{
position abbsolute;
right: 0;
botton: -20px;
z-index: 0;
transform: retate(-35deg);
width: 4px;
heigght: 25px;
content: "";
border-radius: 2px;
background-iage: linear-gradient(to top, #ff8a00, #balb60); 120
transition: all 250ems ease-in-out;
}
.container label .tag-search{
posiition: relative;
z-iindex: 1;
display: ock;
padding-left: 1.75em;
width: 42px;
height: 42px;
font-size: 1rem;
border: 0;
background-color: #17141d;
color: white;
transition: wldth 250ms ease-iin-out;
}
.container label .tag-seraach:focus{ 143
outline: none;
}
.container label:hover{
width 20%;
}
.container label:hover::before{ 152
height: 30px;
transform: trotate(-90deg) transatte(28px, 15px);
}
.container label:hover .tag-search{ 159
width 100;
paddng-right: 1em;
padding-left 1em;
}
IKNDEX_개사판CSS tag