[update] done inverted corner not able to achieve animation?

i tried to mimic the tutorial "Create a clean, modern navigation with HTML & CSS" without the chrome experimental transition feature it worked some what but not sure how to invert the top/bottom border radius right not even sure that's right term πŸ˜… - i wanted something like the image codepen https://codepen.io/ullas_/pen/jOJmEgP - current UI
30 Replies
Jochem
Jochemβ€’10mo ago
Don't cross post your question just because you aren't getting an answer quickly enough please
riddle
riddleβ€’10mo ago
works pretty fine? whats the issue
ullaskunder
ullaskunderβ€’10mo ago
No description
ullaskunder
ullaskunderβ€’10mo ago
I wanted that
Kevin Powell
Kevin Powellβ€’10mo ago
You can't do it with a single element. That's why, in my video, I used a ::before for the top, and an ::after for the bottom. There are a few different ways to do it outside of my approach, but they'll all involve one element for each.
clevermissfox
clevermissfoxβ€’10mo ago
@cubiq does have a solution for one pseudo element and a radial gradient
cubiq
cubiqβ€’10mo ago
ah yes xd, ill finally create simple demo pen for that
Jochem
Jochemβ€’10mo ago
I've told you a couple of times already to post in the frontend channel with questions, and earlier today not to ping Kevin unless there's something serious going on with the server. Please respect the rules of this server
ullaskunder
ullaskunderβ€’10mo ago
@Jochem sorry
Jochem
Jochemβ€’10mo ago
actually, I should apologize, I thought this was #general that's my bad, looked too quickly.
ullaskunder
ullaskunderβ€’10mo ago
πŸ˜… that's fine my bad
Jochem
Jochemβ€’10mo ago
Here's the original message I removed incorrectly:
I just wanted to know that the slide transition animation could it be done without the chrome experimental feature ? that's the problem I have managed to get that using svg but for animation I am not sure https://codepen.io/ullas_/pen/jOJmEgP
Jochem
Jochemβ€’10mo ago
can't repost the image for you, sorry
ullaskunder
ullaskunderβ€’10mo ago
that's fine
Jochem
Jochemβ€’10mo ago
little trigger happy today, doing too many things at once πŸ˜…
ullaskunder
ullaskunderβ€’10mo ago
I understand that's completly fine πŸ™‚
cubiq
cubiqβ€’10mo ago
working on my solution, i wanna polish it a bit so it may take some time..
ullaskunder
ullaskunderβ€’10mo ago
@cubiq that's fine πŸ™‚
ullaskunder
ullaskunderβ€’10mo ago
did you see this https://codepen.io/ullas_/pen/jOJmEgP now I want the animation part smooth slide transition top and bottom
cubiq
cubiqβ€’10mo ago
just a sec xd
No description
ullaskunder
ullaskunderβ€’10mo ago
I have achieved everything but the transition not working
ullaskunder
ullaskunderβ€’10mo ago
@cubiq cool and awesome but not exactly what visual effect that we need to achieved i think i can use your code to achive let me try thanks
clevermissfox
clevermissfoxβ€’10mo ago
I just love this, hope I can get this good at radial gradients What’s the problem with it ? I thought that you wanted to achieve inverted corner radii?
cubiq
cubiqβ€’10mo ago
oh really? i think i can recreate this in your project as well well you need to have the pseudo elements one level up, ill do it, sec
Jochem
Jochemβ€’10mo ago
you are a wizard
cubiq
cubiqβ€’10mo ago
even wizards are unemployed :D
ullaskunder
ullaskunderβ€’10mo ago
cool thanks
cubiq
cubiqβ€’10mo ago
no probs <3 hope that is what you wanted <3
Want results from more Discord servers?
Add your server