box-shadow blur causes gap around fixed header element
Got a weird issue. Have a fixed header, and apply a box shadow on the bottom of it. If I use blur (as one would) on the shadow, a tiny gap appears around the header, through which scrolling elements behind the header become visible. It's kind of visible at the top and left of the attached screenshots. Bit of an issue when adding a dropdown menu below the header.
```css
.page_header {
z-index: var(--z-index-header);...
Input design method
Hey, if you had an input design like the example in the image, would this be the sort of way you'd go about it, or is there an easier/more semantic solution? Perhaps anything unecessary i've included?
https://codepen.io/deerCabin/pen/NWZKoyy
I'd appreciate any tips, thanks in advance....
How to create a button like in the example
How do i get the white border around the right button? i've tried working with border: but did not get the expected result.
Css animation issue
Hi all
I have a small or mabe big problem with animation in cssas you can se in pic. Animation works fine but when i reload page i get exta arrow as in pic.
Here is my css code
.arrow-container {
width: 163px; ...
Not Working?
I'm trying to write Margin-top: 0; but it's only giving me color recommendations
Even if I type the whole tag out its only letting me put colors
Please Help...
outline on focus-visible is not even?
So in my styles i have btn:hover and i add an outline. the first screenshot with the uneven outline is coming from my styles when i hover. but when i tab to the button, its an even outline. same if i change the outline to a border property. why is my outline/border so wonky and uneven? but in its :focus/:focus-visible state its fine?
https://codepen.io/Miss-Fox/pen/bGPbVrJ...
fix navbar at the bottom of the screen while leaving space so it doesn't cover content
I have a navbar that I want to be fixed at the bottom of the screen. It should not move for any reason, including not having enough content to fill up the screen.
position: fixed solves this, but does not leave room at the bottom of the page, meaning that the navbar cuts off the bottom part of the content. The only solution I can seem to find for this is simply adding padding, but this seems like a hack, and I may need a different amount of padding on different devices. I could detect the heig...
How do I grab the height of an element in a different .scss module and React component?
I have a component that I'm setting to scroll the overflow of but I need to subtract the height of my header from the height of the entire page. My header is in two parts. A static portion that displays across the entire app, and a dynamic portion that changes based on the path. The height of the static portion is defined, but the dynamic portion is dependent on font-size. I've attempted to grab the value in a React useEffect and store it in a CSS variable, but the CSS variable isn't reading. Ho...
