[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
Don't cross post your question just because you aren't getting an answer quickly enough please
works pretty fine? whats the issue
I wanted that
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.@cubiq does have a solution for one pseudo element and a radial gradient
ah yes xd, ill finally create simple demo pen for that
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
@Jochem sorry
actually, I should apologize, I thought this was #general
that's my bad, looked too quickly.
😅 that's fine my bad
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
can't repost the image for you, sorry
that's fine
little trigger happy today, doing too many things at once 😅
I understand that's completly fine 🙂
working on my solution, i wanna polish it a bit so it may take some time..
@cubiq that's fine 🙂
did you see this https://codepen.io/ullas_/pen/jOJmEgP
now I want the animation part smooth slide transition top and bottom
just a sec xd
I have achieved everything but the transition not working
https://codepen.io/Cubiq/pen/MWxmwNQ
hope this is it <3
@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
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?
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
https://codepen.io/Cubiq/pen/yLwbeEy
there you go :)
you are a wizard
even wizards are unemployed :D
cool thanks
no probs <3 hope that is what you wanted <3