Single post in Coding Diaries
Forum Index > PokéFarm > Journals > Coding Diaries >
Teaching time! I've been asking in a few places what people would like to know more about, explain how things are done, and just things they wondered were possible. So here's the first part to that. The list of things (along with who requested it) will be in this post as well as links to posts answering them if it's not in this post. If you want something explained, feel free to poke me :D
List:
- Vertical Tabs (yosei) - DONE!
- Carousel Tabs (Pochi)
- Gradient Text (quaxly/kitwurm) - DONE!
- Spinning eggs on hover in shelter (KO) - DONE!
For this, you do need a wrapper class. You have to set the background separate from the background used for the text colour. Make sure whatever the background colour is set to that the gradient contrasts against it so that it's legible. I set the width to fit-content so that it is only as big as the content contained inside, but that can be modified as you see fit. Margin was used to center it in the post, padding to make it look a little nicer within the box. The h1 block is where the magic happens. You do NOT need to set the font-family, you can have it set to default or any other font you'd like, margin is similar, you can set it as you'd like. The gradient gets set as the background. This is how you select the colour of your text. Set the gradient as you would like. -webkit-background-clip sets the text to be the path followed for the gradient to be filled within, then the fill colour line sets the text to be transparent so that the background peeks through the text rather than the background being around the text.
- Vertical Tabs!
- Gradient Text
- Spinning Eggs
- Carousel Tabs
Gradient
Code
.header
{
background: #454545;
width: fit-content;
margin: 0 auto;
padding: 0 5px;
h1
{
font-family: sans-serif;
margin-top: 0;
background: linear-gradient(to right, #F89C9B, #F896B7, #C3B1E2, #72BCF8, #26c6da, #76C679, #eeff41, #f9a825, #FFA185);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
Short video clip of it working
Basically, you create the animation using keyframes, to make it compatible with all browsers, you use each of those prefixes (yea, I know, it sucks, but if you just want it to work on a specific browser, you can remove some of them, webkit is for Chrome, ms for IE/Edge [not that it's always compatible even using the prefix], moz is for Firefox). Then you just set up the animation for hovering over the egg. Boom, done. Keyframes use either to/from or values to create the animation, in this case, to rotate 360 degrees, you start at 0deg then rotate to 360deg, from which I then set the animation to infinitely run...so long as you stay hovering over the egg.
NOTE Keyframes ONLY work in the site skin, NOT when posted in the forums, about me area, etc.
Code
#shelterpage #shelter #shelterarea>.pokemon[data-stage*="egg"]>img:hover {
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
Carousel Tabs coming soon
Buying:
BSDs 20 ZC
Prisms 70 ZC
BSDs 20 ZC
Prisms 70 ZC
