transparency on a part on div
Hi everyone
I want realise an effect of transparency on a part who get a number on a picture .
is it possible on css ?...
Responsive Header issues
Hi guys , i am new to web dev , and i am just facing a responsiveness problem for my testing header , when i set the mobile view , the header is just messed up and cut off from the right without filling all the browser width. please check the pictures and the appropriate code.
N.B : i tested to make the width to 100% in media queries
header{...
How can I make fonts actually work well together?
Here are 5 occurrences of ‘H’ all with the exact same
font-size and other styling (which is none!). The only difference is the font used. Look how much they vary in height! It’s almost impossible for me to figure out how to make serif- and monospace fonts work well together when each font is so wildly different in height. How can I ensure that I can get different fonts to mix well size-wise without forcing people on bad connections to download my specific fonts?
Need help creating a complex button in css
Hello everyone, I've design for this button andI want to create it using css. I'm having difficulty finding approach to build it.
Can someone please help me breaking down the logic please.
I've this code to cut corners of the container.
...
Backdrop filter not working on child of details
Hi everyone,
Im running into a small issue with my backdrop filter. I am making a mobile menu with the <details> tag in html and using the "open" state for the mobile menu. However, at the moment I can not seem to get 'backdrop-filter: blur (5px);' to work on my child element. When I try to put the backdrop filter on a parent element like on the details tag, my positioning of absolute stops working.
Does anyone have an idea why this happens?...
Sweet Alert
I have a question, How can I Change the Font and color of the alert, its created with Sweet Alert, pls help me 😦 I wanna make it like the other part of my web, Btw here is the code that I used 🙂
Looking for direction on particular effect
If you go to https://www.leagueoflegends.com/en-us/ and go to the "Choose Your Champion" section, you'll see that there are animated lines on the border of the circle. I'm curious how to go about achieving this effect?
I tried looking through the devtools and asking chatgpt for some guidance but wasn't really able to find anything....
How to manage mix-blend-mode: difference for Navbar
I have a navbar with a logo and essential elements, and I want the logo and elements to change their colors automatically when placed on whitish or black backgrounds. To achieve this effect, I have set the mix-blend-mode property to "difference," which works perfectly for white and black sections.
However, I encountered an issue when using this blend mode with a red section. Instead of the desired outcome, the logo and elements turn cyan, which is not the effect I want. I would prefer them to appear white as they would on a black background.
Is there a solution to maintain the mix-blend-mode as "difference" for white and black sections, while making the elements appear white when placed on a red background (#f5221b)? I need a method that will seamlessly adjust the colors based on the background, providing a consistent and visually appealing navbar experience....
Line formatting issue
I have these cards that displays tags at the bottom which are mapped out. However, I am having trouble displaying them on a single line and if it goes beyond the width of the card, I would like there to be a "...". How would I achieve this? I have pictures of what it looks like if I use flex, truncate, and line-clamp-1. I have also attatched an image with my code.
White space to the right of my html element
I have random white space to the right of my html element. I know it's showing the body bc of it's background-color. It's solved by using overflow-x: hidden on #root, but doing that prevents a sticky nav - which I need.
```
index.css:
...
Vertical Align centre in Safari Browser
Hi Friends, Help me about vertical centre for Safari .... i have created a flag/tag and the text inside that is perfectly centre vertically in other browser like mozilla but in safari i am having some extra space at bottom of text .. may line height issue... but i already reset it. please help to resolve it.. Here is code and result scrshot...
Thanks in Advance...
Position absolute and overflow auto grandparent
hello! i was inspired by one of kevin's responsive table video so i am trying to make a responsive table.
The issue i'm currently facing is:
```scss
.table__container {...
Grid won’t work on my media queries
Hi guys, so I’ve been trynna set this grid-template-column to just 1fr (one column) , but I don’t know why it wouldn’t just work. The four card class is the parent div of all the other cards which clearly works on my normal layout but on my media queries it just doesn’t work.
How to achieve this layout using CSS
So I am in a container with max-width of 1200px and in the container I have a flex parent with two child and I want the right child to be at the edge of screen like the (attached image), however the container is important because the other sections are within that container.
what's the best way I can do this kinda of layout?
the hero section on the top I can easily do using margin auto, but how can I do the about section? the text on the left is align to the photo on the hero section, but the video on the right is flowing throught the rest of the width. I'm not asking for the implementation, just ideas if u guys can help! thx in advance
