Londonpeteharrison
KPCKevin Powell - Community
•Created by Londonpeteharrison on 8/15/2024 in #front-end
Vertical Header
I am using a left aligned vertical header (I know it sounds cheesy but I need a lot of page height) that's width is specified with a css variable --header_width. I then set the <main> with a margin of the same. This works fine, but when the page width is reduced, the header shrinks to a mobile header of 3 bars, but the <main> still has the width it had before.
What is the best way of dealing with this, just a media query? I'm not sure if I should redefine the css variable or whether I should set the width another way, so I'm looking for recommendations.
Many thanks
2 replies
KPCKevin Powell - Community
•Created by Londonpeteharrison on 5/29/2024 in #front-end
My TranslateZ not working at all in Chrome or Edge
I've been trying to translate a Javascript example from a YT video of a animated card with both rotation and translateZ effects. I thought most of the original code done in Javascript could be handled in CSS with just the mouse tracking done in javascript.
However, niether th original code's 'translateZ' or my CSS version actually do anything,
I read another post here about a solution to translateZ issues being something to do with : "backdrop-filter: blur()". Net being sure what this was, I tried commenting out some box-shadow blur css lines, but that didn't help.
I've had to upload the coide as it makes the post too long if anyone can help me narrow down the problem
5 replies
KPCKevin Powell - Community
•Created by Londonpeteharrison on 4/7/2024 in #front-end
Your thought process
4 replies
KPCKevin Powell - Community
•Created by Londonpeteharrison on 3/12/2024 in #front-end
Interesting JS effect
Not sure if the is the right place to ask if its possible to reproduce the effect of the blue female boxer, 3 or 4 screens in of https://www.paris2024.org/en/design/? This is created using JavaScript, but I wonder if it or something like it could be done purely with CSS?
3 replies