Testimonial Slider Structure Understanding
So we have the Outer layer (GREEN), in which we set it to fixed sizes when in mobile size and desktop size, then we have the actual slider (RED), in which we set it to fixed size for both desktop and mobile, this one is the one that we slide left right? and then we have the cards (PURPLE), do I understand the building blocks of the testimonial slider right? Or any slider in general, is this how they build sliders?
selectable transparent text with readable background and aria-hidden="true"
Aloha! I have been drafting a new website theme. For the logo, I've set the element background to the designed graphical logo, and then the element content matches the logo-text with
color: transparent; set in the css.
With this set up, text in the logo appears to be selectable and is screen-reader-readable. Likewise the element content is legible despite being transparent, as a result of its SVG background, the logo...
Obviously when I test the page for accessible text contrast (with a browser extension), it fails because this text is not visible... ...
Overflow:scroll while keeping a specific child element visible outside?
Hi all. Usually I can strumble around and find a solution, but I'm stuck here.
I have a vertically scrollable container that contains a bunch of clickable cards. I have added a
--zoom property so that the cards can grow on hover. However, when hovering over the top row of cards, the top of it gets clipped (as expected). Ideally I'd like to keep the scroll behaviour, while keeping all of the hovered over card visible on the top. Pulling it out of the flow is a hassle to get looking right, and it breaks being able to scroll while hovering over it. Is there any way to achieve what I'm after?
This is me modifying an existing app, so I really want to keep it CSS only if at all possible....
the right way to do responsive
```html
<div>
<a href="#" class="text-decoration-none ">
<div class="img-wrapper d-inline-block" id="img-1">
<img src="assets/img/Literature.png" alt="Literature">...
Next.js + Tailwind: how to make images be uniform
I don't know how could I make them have the same height or aspect ratio.
This is my whole component:
```tsx...
making a image responsive in a flexbox
I think I am going to pull my hair out. I have such a hard time making images respond how you want them to. Anyone know any good help videos or articles? here is my issue that I have.
```<section class="hero">
<div class="container row">
<div class="hero_info">
<h1 class="hero_title">I Really Need A Coffee</h1>...
CSS button
Can we create this button with bubble around and inside spacing after border with css only ?
Phone overlap on a container
I have a figma design which is in the cover, and I want it to code using html and css, the problem is, I cant execute it properly using position absolute, I can position it in my desire look but I cant make it stay on that position, and second its not responsive. Sorry in adv Im using variables on other css properties.
Any one can help me figure out how to execute this properly?
...
Looking for the effective way to use flexbox
Would like to know the best practice when using flexbox.
I am attaching my code snippet and screenshot.
If anyone have a better way, plz help me.
```
<div class="d-flex justify-content-between mt-6 mb-4 mb-sm-8">...
Does anyone knows what this style called?
I've seen a lot of web designs recently with a similar looks as the attached file. dark mode with glassy feeling and purple lights around.
Thanks in advance!...
