custom input checkbox animation
Hello all, I have been looking for a custom input animation for type checkbox:
https://codepen.io/MilindGoel15/pen/jOJmrYx
Looking to create in this tyle but i want it to grow with rounded circle to full square instead of becoming rounded on active....
Social Media Icons
I'm trying to change the color of the icon to white, I did everything I could, but couldn't find any solution.
HTML: <div class="social">
<div class="facebook">
<a href="#">...
CSS flex stretch and flex end align items
hi there,
I'm having a little trouble on mobile here3.
I'm am using flex, which everything work, but I want my image to stretch the entire width of the container, however, I do not want it to be pulled up from the bottom as it does. When I use flex0end, it stays at the bottom correctly, but the image doesn't get more height when giving it height or anything....

Flex container's item heights not working
i have a flex container in which i have 2 items im trying to set height of one particular item but im unable to

Problems in vue3
Good day. I'm having some problems with vite and vue3, especially working through "configuration". I couldn’t find anything on YouTube about this, can you give me some tips and advice on where and how to get good knowledge of vue3 and work with the “setup”.
I'm having problems. There is a problem with custom elements in vite.config.js, each element requires inclusion in an exception, is there an alternative to this?
How is configuration done in Uinput.vue, how do you understand when and what needs to be added?
There is such a company in the global.js file, it seems to me that this is some kind of crutch, please tell me whether I am right about this or not
Thank you for attention....
Sticky div in a Grid Column
```html
<div class="grid grid-cols-3">
<article class="col-span-2">
</article>
<article class="col-span-1 relative">...
Fluid wrapper
Hi everyone, hope you're doin well! 🙂
I've got a requirements where I should set based on different viewports width, the width of a wrapper container.
Here's the list of breakpoints:...
Unicode characters broken in Safari?
In my navigation, I have been using arrows for my 'a::before' tag. Respectively a::before {content: "\2197\fe0e";}
This was working perfectly when I set up the website last fall, but for some reason it’s not gelling in Safari anymore.
It still works perfectly in Chrome, as shown in screenshot – but in Safari the arrows are invisible....

Firefox CSS Issue
See image 1 and 2. the button doesn't disappear after the card is flipped.
HTML
```html
<div class="front">...

If the grid-items had different heights and gap had to be between them is of 20px.
In the below codepen, the gap shows too much between, how to make sure that row gap and column gap is exactly 20px.
https://codepen.io/Lohitha-Yalavarthi/pen/JjzWzVG
The gap b.w 1 and 4 should be 40px how to do that? and every other column and row gap should be 40px , irrespective how different heights of each cards are adjusted for grid-items and same with 3 and 6 and each card should continue to have its original height....
Should I use margin-block or traditional margin properties?
Recently learned about the margin-block property in CSS, which sets margins based on the writing direction. I’ve been using traditional margin properties like margin-top, right, bottom, left.
Questions:
1. Should I start using margin-block by default instead of the traditional margin property?
2. Is margin-block only used to support different languages and writing modes?...
2. Is margin-block only used to support different languages and writing modes?...
Hello, I found this semi-solution to animating <details> and was wondering of the drawbacks
I found this blog https://dev.to/neophen/css-only-accordion-with-animations-2d8n,
and modified the tailwindplay https://play.tailwindcss.com/vjMq6sgS7C
My biggest concern is in regards to the content not existing within the <details> as a child. Is that a major problem? Is this a decent solution for a client site? Thank you for any insights!...
Maximize image size, minimize column width
https://codesandbox.io/p/sandbox/columns-rsfszr?file=%2Fsrc%2FApp.tsx%3A17%2C50
I am trying to lay out a series of columns, each of which includes a heading, an image, and some text. The image should fill the height of the space not taken by text, and should maintain its aspect ratio as it grows or shrinks. If the image is wider than the text, its column should match the width of the image. If the text is wider than the image, its column should match the width of the text. In other words, the column should match the width of the its widest child, and take no additional horizontal space. Here is a mockup I laid out by hand of the layout I am trying to achieve:...

[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...
How can I make this get smaller as the screen changes sizes?
So I created a container with a nice styling I wanted to ask is it possible for the container to decrease in size as the browser shrinks or is that something I'd have to alter using Media Queries?

half a star
newbie here: was trying to color my star icon (in this case, 20% of it as red color solid, rest will have default color)
is that achivable?...

[Javascript] I did a timer using classes and have some issues
Hey you guys, I'd like to please about rate my code (especially javascript) rate, what should i change, what I did wrong and etc.
While it counts font isn't same size all the time, I mean the font slightly moves in different directions (like i screwed up something in css but i don't know)
My code is too long so I think i can upload it on pastebin
https://pastebin.com/p20rSRKE...
