Fade-away Loading Effect
Hello!
So I've been building up this navbar for a while... and yesterday I thought it would be a good idea to add a loading state to it. However, upon putting the final touches, I'm running into a minor inconvenience.
I want the loading indicator
.navbar-container::after to disappear and come in with the background graident of nav::after. I can do this somewhat with replacing the transparent parameter to the background color, however this makes the navbar not look the best or as easily viewable:...
Looking for advice for how can I make this design possible
#1 In the first image there is a curved line coming from the ending of another section to the beginning of another section(Marked With a Red Arrow Sign). How can I implement this with HTML, CSS, and JS? Letter I will implement it by myself using react and tailwind CSS. You can suggest me some YouTube tutorials or give me a guide to get started.
#2 On the second image Icons are inside of a polygon and those polygon positioned in a way wich lool like honeycomb. Can you tell me how can I create thia layout with Html and css?...
Need help with crazy designer requirement (blending opacity colors)
Hey guys,
I have one really interesting feature that I have been trying to implement for quite some time now and I would appreciate the help.
The client and designer want to have these galaxy-like animations that will move around and create fancy effects.
However, I have a big problem implementing this in CSS, due to how semi-transparent colors are mixed.
When you stack two elements with semi-transparent backgrounds, on overlapped areas the color is brightened....
Looking for advice on how to build this navigation
I found a piece of inspiration for navigation design on Framer. Wondering how I would acheive this following proper semantics.
The nav is positioned in the center with a border around the container and has a button that is positioned on the right. In the DOM the button is not placed in the nav element.
Is there any way to achieve this with keeping the button in the nav?...
component scoped private props
I’ve seen KPow do this in several videos with the locally scoped custom prop whose value is set to a global prop but then in the modifier class, changes the global prop.
Haven’t really grasped why he changes the global one (sans underscore) instead of the local one (with underscore). Or vice versa just abstain from making a local and just use the global. I’m sure there’s a good reason but why ? Wouldn’t you want to change the locally scoped
That has the indicator (the underscore) that it’s a private prop if you’re going to declare it anyway? Is it just to ensure a fallback? People coming upon the modifier class (.bubble-1) will see
:nth-of-type(2){ —_border: hotpink ; } That has the indicator (the underscore) that it’s a private prop if you’re going to declare it anyway? Is it just to ensure a fallback? People coming upon the modifier class (.bubble-1) will see
—border and go looking in the root for it?...
Max-width child should be aligned at the center
we have a parent div of width 100% ,its child has a max-width containing the title of 350px aligning at the center.After writing the desired css there is some unwanted spaace left in the container how can we avoid this?
3 Cards 1 row where the center card is 1.5 times the size of the 1st and 3rd card.
Like the image, I want 3 divs stacked horizontally. 1st and 3rd div should be the same size but the 2nd (center) div should be a little bigger than the 1st and 3rd div.
I tried using
scale(1.5) on the 2nd div but then it over laps with the 1st and 3rd div. I thought about manually setting height on all three cards and giving the middle one a greater value that the corner cards but AFAIK it's not recommended to set height on things.
I am using tailwind with react, if it matters....
