Single post in Coding Diaries
Forum Index > PokéFarm > Journals > Coding Diaries >
So, asked a friend
aka Cele because she's awesome
if I should do this, so here's some cool link effects. Also, some hr effects. Also, while I'm posting this now, does not mean I'm done updating it. Gotta rest soon, which means saving this so I might add to it while I'm at work.
Link Effects
All links lead back to my profile.So, here's example one. When hovered over, the text becomes slightly larger, and a background appears behind it.
Now, here's example two. The background grows slightly when hovered over and it moves to be completely under the link.
Onto example three. There's a gradient underline that grows when hovered over, and changes the colour of the text to match legibility.
And now example four! It's like a highlight originally, that grows when hovered to cover the link.
Example One Code
@link-colour = VALUE; //colour of link text by default before hovered over
@underline-bg = VALUE; //colour of underline beneath the link, background of the link when hovered over
@hover-text-colour = VALUE; //colour of link text when hovered
@border = VALUE; //colour of border when hovered over
a:not(.panel > h3 > a), a:not(.panel > h3 > a):link, a:not(.panel > h3 > a):hover, a:not(.panel > h3 > a):active, a:not(.panel > h3 > a):visited
{
color: @link-colour;
display: inline-block;
transition: 0.3s;
transition-delay: 0s;
transform: scale(1);
}
a:not(.panel > h3 > a)::before
{
content: ' ';
position: absolute;
z-index: -1;
bottom: 0;
left: -2px;
padding: 0 2px;
width: 100%;
height: 1px;
border-bottom: 2px double @underline-bg;
transition: 0.4s;
}
a:not(.panel > h3 > a)::after
{
content: ' ';
position: absolute;
z-index: -1;
bottom: 0;
left: 0;
padding: 0 0px;
width: 0;
height: 0;
border: 1px solid transparent;
transition: 0.4s;
}
a:not(.panel > h3 > a):hover::before
{
border-color: transparent;
}
a:not(.panel > h3 > a):hover::after
{
width: 100%;
height: 0.75em;
left: -1em;
bottom: -0.35em;
padding: 0.5em 1em;
border-color: @border;
background-color: @underline-bg;
border-radius: 2.5em;
}
a:not(.panel > h3 > a):hover
{
color: @hover-text-colour;
transform: scale(1.2);
transition-delay: 0.11s;
}
Example Two Code
@link = COLOUR;
@link-bg = COLOUR (use rgba at 0.25 opacity);
a:not(.panel > h3 > a)
{
position: relative;
overflow: hidden;
text-decoration: underline wavy;
color: @link;
z-index: 1;
&::after
{
content: "";
background: @link-bg;
position: absolute;
left: 12px;
bottom: -8px;
width: 105%;
height: 110%;
z-index: -1;
transition: 0.35s cubic-bezier(0.25, 0.1, 0, 2.05);
}
&:hover:after
{
left: -3px;
bottom: -5px;
width: 115%;
height: 125%;
}
}
Example Three Code
@link = COLOUR;
@link-bg = COLOUR (recommend gradient!);
@link-hover = COLOUR;
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: @link;
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: @link-bg;
transition: transform .5s ease-out;
}
a:hover
{
color: @link-hover;
text-shadow: 0 0 4px #888;
font-style: normal;
}
a:hover::before
{
transform: translateY(0);
transition: transform .5s ease-out;
}
Example Four Code
@link = COLOUR;
@link-bg = COLOUR (recommend hsla or rgba with 0.25 opacity);
a:not(.panel > h3 > a), a:not(.panel > h3 > a):link, a:not(.panel > h3 > a):hover, a:not(.panel > h3 > a):active, a:not(.panel > h3 > a):visited
{
color: @link;
display: inline-block;
text-decoration: none;
position: relative;
}
a:not(.panel > h3 > a)::before
{
content: '';
background-color: @link-bg;
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 8px;
z-index: -1;
transition: all .3s ease-in-out;
}
a:not(.panel > h3 > a):hover::before {
bottom: -3px;
height: 110%;
width: 110%;
left: -3px;
}
HR Effects
Example One (note it is black so you may need to change your skin if your background is black to see it here)
Example Two
Example Three
Example Four
Example Five
HR One
hr
{
height: 10px;
border: none;
color: black;
background-image: linear-gradient(
black,
black 33.33%,
transparent 33.33%,
transparent 100%);
background-size: 100% 3px;
width: 250px;
}
HR Two
hr
{
border: none;
height: 10px;
box-shadow: 0 10px 10px -10px @col-border inset;
&::before
{
height: 10px;
width: 100%;
content: "";
box-shadow: 0 -10px -10px 10px @col-border inset;
}
}
HR Three
hr
{
border: 0;
height: 2px;
background-image: linear-gradient(to right, rgba(214, 228, 49, 0), rgba(214, 228, 49, 0.75), rgba(214, 228, 49, 0));
}
HR Four
hr
{
overflow: visible; /* For IE */
height: 30px;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
border-radius: 20px;
}
hr:before
{
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: black;
border-width: 0 0 1px 0;
border-radius: 20px;
}
HR Five
hr
{
height: 30px;
border-style: solid;
border-color: #8c8b8b;
border-width: 1px 0 0 0;
border-radius: 20px;
}
hr::before
{
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: #8c8b8b;
border-width: 0 0 1px 0;
border-radius: 20px;
}
Buying:
BSDs 20 ZC
Prisms 70 ZC
BSDs 20 ZC
Prisms 70 ZC
