Last active
April 28, 2023 19:11
-
-
Save samarth641/3324d706f0fe15f96cadc572f88ee0ef to your computer and use it in GitHub Desktop.
CSS uploaded by scrapbook.hackclub.com/customizer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.header-title-name { | |
margin: 0; | |
flex: 1 1 auto; | |
font-size: 29px; | |
line-height: 1; | |
font-family: 'Darumadrop One', cursive; | |
word-break: break-all; | |
word-wrap: break-word; | |
} | |
/* Style the rainbow text element. */ | |
.header-title-name { | |
/* Create a conic gradient. */ | |
/* Double percentages to avoid blur (#000 10%, #fff 10%, #fff 20%, ...). */ | |
background: #CA4246; | |
background-color: #CA4246; | |
background: conic-gradient( | |
#CA4246 16.666%, | |
#E16541 16.666%, | |
#E16541 33.333%, | |
#F18F43 33.333%, | |
#F18F43 50%, | |
#8B9862 50%, | |
#8B9862 66.666%, | |
#476098 66.666%, | |
#476098 83.333%, | |
#A7489B 83.333%); | |
/* Set thee background size and repeat properties. */ | |
background-size: 57%; | |
background-repeat: repeat; | |
/* Use the text as a mask for the background. */ | |
/* This will show the gradient as a text color rather than element bg. */ | |
-webkit-background-clip: text; | |
-webkit-text-fill-color: transparent; | |
/* Animate the text when loading the element. */ | |
/* This animates it on page load and when hovering out. */ | |
animation: rainbow-text-animation-rev 0.5s ease forwards; | |
cursor: pointer; | |
} | |
/* Add animation on hover. */ | |
.header-title-name:hover { | |
animation: rainbow-text-animation 0.5s ease forwards; | |
} | |
/* Move the background and make it larger. */ | |
/* Animation shown when hovering over the text. */ | |
@keyframes rainbow-text-animation { | |
0% { | |
background-size: 57%; | |
background-position: 0 0; | |
} | |
20% { | |
background-size: 57%; | |
background-position: 0 1em; | |
} | |
100% { | |
background-size: 300%; | |
background-position: -9em 1em; | |
} | |
} | |
/* Move the background and make it smaller. */ | |
/* Animation shown when entering the page and after the hover animation. */ | |
@keyframes rainbow-text-animation-rev { | |
0% { | |
background-size: 300%; | |
background-position: -9em 1em; | |
} | |
20% { | |
background-size: 57%; | |
background-position: 0 1em; | |
} | |
100% { | |
background-size: 57%; | |
background-position: 0 0; | |
} | |
} | |
.css-link { | |
flex: 1 1 auto; | |
word-wrap: break-word; | |
word-break: break-all; | |
color: inherit; | |
font-size: 14px; | |
font-family: 'Darumadrop One', cursive; | |
} | |
.post { | |
text-decoration: none; | |
border: 2px solid #764abc; | |
color: #764abc; | |
padding: 10px 20px; | |
border-radius: 25px; | |
position: relative; | |
transition: all 1s; | |
overflow: hidden; | |
font-family: 'Darumadrop One', cursive; | |
} | |
.post::before { | |
content: ""; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background-color: #764abc; | |
transition: all 1s; | |
z-index: -1; | |
transform: translateX(-100%); | |
} | |
.post:hover::before { | |
transform: translateX(0); | |
} | |
.post:hover { | |
color: #fff; | |
} | |
.post-header { | |
color: inherit; | |
text-decoration: none; | |
display: flex; | |
align-items: center; | |
margin-bottom: 8px; | |
line-height: 1; | |
font-family: 'Darumadrop One', cursive; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment