Single post in Cele's Scrolls
Forum Index > PokéFarm > Journals > Staff > Cele's Scrolls >
Aemilia said I could play with some stuff so I'm dumping it here for now
tooltip highlights stuff in a cool way :)
.tooltip_content {
background: @bg;
color: @text;
border: 1px solid @text;
border-radius: 8px;
}
span.bbcode_tooltip {
border: none;
position: relative;
z-index: 0;
display: inline-block;
padding: 0 2px;
overflow: hidden;
vertical-align: bottom;
transition: color .3s ease-out;
}
span.bbcode_tooltip::before {
content: '';
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
transform: translateY(calc(100% - 6px));
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
transition: transform .5s ease-out;
}
span.bbcode_tooltip:hover {
color: #000;
}
span.bbcode_tooltip:hover::before {
transform: translateY(0);
transition: transform .5s ease-out;
}
tooltip highlights links in a cool way :)
a, a:link, a:visited {
/* RESET */
text-decoration: none;
font-style: none;
position: relative;
z-index: 0;
display: inline-block;
padding: 0px 5px;
overflow: hidden;
color: #ccc;
vertical-align: bottom;
transition: color .3s ease-out;
}
a::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
transform: translateY(calc(100% - 6px));
width: 100%;
height: 100%;
background-image: linear-gradient(60deg, #64b3f4 0%, #c2e59c 100%);
transition: transform .5s ease-out;
}
a:hover {
color: #000;
text-shadow: 0 0 4px #888;
font-style: normal;
}
a:hover::before {
transform: translateY(0);
transition: transform .5s ease-out;
}
Thank you Kaede for letting me play with it :D
I'M GONNA MAKE IT PINK
for Market equiv. 
sig code and sig bg image made by me