Darryll
Darryll
PostsComments
KPCKevin Powell - Community
Created by Stroudy on 3/26/2024 in #front-end
:last-child:first-letter:hover
:smughamster:
23 replies
KPCKevin Powell - Community
Created by Stroudy on 3/26/2024 in #front-end
:last-child:first-letter:hover
:first-letter:hover would imply when you hover on the first letter a:hover:first-letter would imply when you hover on the a, target the first letter
23 replies
KPCKevin Powell - Community
Created by uliana3412 on 2/15/2024 in #front-end
Text animation inside a slider bar component
You can adjust those numbers to whatever you want
17 replies
KPCKevin Powell - Community
Created by uliana3412 on 2/15/2024 in #front-end
Text animation inside a slider bar component
animation: slide 3s infinite ease-in-out; Animation is 3s long 
    0% {
      background-position: -100vh center;
    }
    60%, 100% {
      background-position: 100vh center;
    }
    0% {
      background-position: -100vh center;
    }
    60%, 100% {
      background-position: 100vh center;
    }
0 to 60% of that duration it plays the animation, 60 to 100% it just waits
17 replies
KPCKevin Powell - Community
Created by uliana3412 on 2/15/2024 in #front-end
Text animation inside a slider bar component
then another 1.2s until it starts again
17 replies
KPCKevin Powell - Community
Created by uliana3412 on 2/15/2024 in #front-end
Text animation inside a slider bar component
it should take about 1.8s for the animation to play start to finish
17 replies
KPCKevin Powell - Community
Created by uliana3412 on 2/15/2024 in #front-end
Text animation inside a slider bar component
Make a codepen and send it and then people can look
17 replies
KPCKevin Powell - Community
Created by uliana3412 on 2/15/2024 in #front-end
Text animation inside a slider bar component
the slide keyframe only moves that background aroudn so without this CSS it won't do what you expect
17 replies
KPCKevin Powell - Community
Created by uliana3412 on 2/15/2024 in #front-end
Text animation inside a slider bar component
the text-fill-color makes the text color transparent
17 replies
KPCKevin Powell - Community
Created by uliana3412 on 2/15/2024 in #front-end
Text animation inside a slider bar component
the background-clip clips the background to the text
17 replies
KPCKevin Powell - Community
Created by uliana3412 on 2/15/2024 in #front-end
Text animation inside a slider bar component
the background is a circle gradient which is black on the outside and white in the middle. That white in the middle is what you see move across
17 replies
KPCKevin Powell - Community
Created by uliana3412 on 2/15/2024 in #front-end
Text animation inside a slider bar component
mix-blend-mode affects how the opacity interacts with the background
17 replies
KPCKevin Powell - Community
Created by uliana3412 on 2/15/2024 in #front-end
Text animation inside a slider bar component
.track-text {
      mix-blend-mode: overlay
    background: radial-gradient(ellipse, white 50%, black 70%) black no-repeat
    -webkit-background-clip: text
    -webkit-text-fill-color: transparent
}
.track-text {
      mix-blend-mode: overlay
    background: radial-gradient(ellipse, white 50%, black 70%) black no-repeat
    -webkit-background-clip: text
    -webkit-text-fill-color: transparent
}
17 replies
KPCKevin Powell - Community
Created by uliana3412 on 2/15/2024 in #front-end
Text animation inside a slider bar component
Your text is missing some of the CSS that's important
17 replies
KPCKevin Powell - Community
Created by uliana3412 on 2/8/2024 in #front-end
How to create flashing lines between grid items?
If you want to work in anything more complicated than that it's a whole other more complicated task
123 replies
KPCKevin Powell - Community
Created by uliana3412 on 2/8/2024 in #front-end
How to create flashing lines between grid items?
Based on your requirements of just having some animation that loops regularly I think you're looking to figure out how keyframes and CSS animations work You can basically make a timeline and loop animations however you want It's like a whole concept to study so willl take a while to fully understand so you'll have to just go study it for a bit
123 replies
KPCKevin Powell - Community
Created by Psyzen on 2/7/2024 in #front-end
A problem I find with Semantic HTML
I've never used custom elements, I would likely advise to stay away from them until you have a solid understanding of HTML instead of overcomplicating it
54 replies
KPCKevin Powell - Community
Created by Psyzen on 2/7/2024 in #front-end
A problem I find with Semantic HTML
If you want help with it post your design and someone might help you understand how to lay it out semantically
54 replies
KPCKevin Powell - Community
Created by Psyzen on 2/7/2024 in #front-end
A problem I find with Semantic HTML
If it's not any of the semantic elements you know, use a div :peeposhrug:
54 replies
KPCKevin Powell - Community
Created by Psyzen on 2/7/2024 in #front-end
A problem I find with Semantic HTML
No description
54 replies