How to make slope box in css.
I have one card. in that card, i have one slope. i tried using clippath for creating that slope. but it doesn't worked me out. please help me. i have attached both images. first one was design. second one was i trying to make that design.just need that slopy curve,
code:
```
import Image from 'next/image';...
Tailwindcss flex-col issue
Hi guys, I am trying to build a login page and currently I am using tailwind css to build it. I am putting flex-col as a property but its changes are not reflecting. I am not sure what I am doing wrong, can someone help?
I can clearly see flex property is getting set on right side of dev tools but not the flex-col property...
How to create a shimmer effect on border
Hey guys. I would like to know how to create this shimmer effect on the border in button like one on the webflow website.
Creating responsive navigation bars with a hamburger menu
I've set out to learn more about navigation bars and how to properly create them, i'd like to create the navigation bar as shown in the image and i'm having some issues.
1 - I usually create a navbar in the structure below, add flex to main-header and main-nav. But now i need to add the buttons at the end of the row. I'd usually add a div and put those 2 buttons in it and assign them flex-end but this did not work. How can i get them on the flex-end side whilst keeping it responsive?
```...
is there any way to make my sass files less messy?
As you can see, for every sass file I make, there's the map and the regular css file that comes with it, but it makes my css folder pretty messy, is there any way to hide the unnecessary ones and only keep the sass? would making a sass folder and putting the sass files inside while keeping the other files inside the css folder work?
How do I make gradient smoother?
So I have 2 components: Gradient.tsx & Button.tsx. Code for both you cabn see at screenshots 1 & 2 accordingly.
They problem, however, is not there. On screenshot no.3 you can see Gradient.scss, which is initialized after the button is pressed.
The thing is, when you start animation, you can see a very sharp change in color, escpecially on the right side of the screen. ...
Converting .png to .svg 'trace-bitmap', coming out bubbled/soft edges, advice
I have a png that I'm trying to convert to vector graphic (svg) and, following a youtube tutorial, I've successfully "trace-bitmap"'d the png. However, comparing the two, the original png, and the 'traced' svg, it seems that no matter how I set my 'single scan' thresholds, etc, the tracing always wants to come out bubbled instead of having sharp lines and corners like the original.
BTW I am using Inkscape here to do this.
My original issue: ...
How would you structure this dynamically (In HTML and css)?
Everything is okay, just thinking about the line that goes through all of the icons.
It should work with 2 to 4 sub icons-with-text as the section is dynamic. And ideally the icon and it's text are under the same parent
No mobile was provided, was thinking on just removing the line on mobile/ when they start wrapping, any other ideas?...
logical properties
Hey, how do you decide where the use of a logical property would be warranted other than gaps between icons and text e.g. a inside a button etc. Should you cater your whole site to look good if it was flipped to a vertical writing mode like in the example image below, therefore replacing all of your properties such as
max-width with their logical counterparts? I'd appreciate any insight, thanks in advance.
what are the ways that i can follow to mange the height in card created using bootstrap
Hello i have a card containers that have 3 cards on ii don't have any problem in managing its width but i have problems in height as below , the third one is now have height greater than the others ,consider this datacomes from daabase how can i mange the height, i want them all to be on the same heigh, included a screenshot
```html
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-2">
<div class="col-md-12">
<div class="card text-bg-primary">...
