Rowe2ry Comments - Answer Overflow

Topics

Rowe2ry

KPCKevin Powell - Community

•Created by KTO96 on 4/15/2025 in #help

Metallic animated CSS Gradient

I'm not seeing in animation when visiting that link in chrome. But my decade plus experience in graphic design has me thinking the hue shifting will always sort of fall short of the desired effect. If I were approaching this problem, I would make the SVG logo a single color, and use it as a mask over a custom animated background gradient written in CSS instead of being in the SVG You can animate gradients using custom properties, like this (93% browser support), https://dev.to/afif/we-can-finally-animate-css-gradient-kdk or use a generative tool for the css like this https://animated-gradient-background-generator.netlify.app/

4 replies

KPCKevin Powell - Community

•Created by Myra on 3/27/2025 in #front-end

Toggle switch not working

This is an even better way to do it if your UI/UX person does a direct mapping of their light mode colors to dark mode colors. Unfortunately, in the workflow at our office, the UI/UX person has different patterns in the 2 color themes, such as an element with a heading and sub heading might have the same color for both text fields in light mode, but the subheading in dark mode is a different neutral shade than the one used for the heading etc. I think it'd be loads of fun to make a smaller project with a handful of premade UI themes besides just light and dark and then used a body class to change the customer property values and have the whole page update.

49 replies

KPCKevin Powell - Community

•Created by MC23 on 3/28/2025 in #front-end

Styling complex/dynamic element

Looking at the design again, you could also set a min height and think of the "far-side" of flexbox.

.card {
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: end;

  input[type="checkbox"] {
    justify-self: start;
  }
}

.card {
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: end;

  input[type="checkbox"] {
    justify-self: start;
  }
}

11 replies

KPCKevin Powell - Community

•Created by MC23 on 3/28/2025 in #front-end

Styling complex/dynamic element

No description

11 replies

KPCKevin Powell - Community

•Created by Myra on 3/27/2025 in #front-end

Toggle switch not working

Its a glorious time to be doing front end rn. At least for another year or two before AI is good at css too.

49 replies

KPCKevin Powell - Community

•Created by Myra on 3/27/2025 in #front-end

Toggle switch not working

No description

49 replies

KPCKevin Powell - Community

•Created by Kida Sacheil on 12/15/2024 in #front-end

Dealing with content on a moving colored background

I played with it and couldn't figure it out either. I will say I'm pretty positive, the text element will need to be inside of the element with the background it is trying to render against to work. this is the example I was trying to follow which is exactly what you want to do. https://css-tricks.com/reverse-text-color-mix-blend-mode/ (note, their UI example is a loading bar, I spent longer than I'd like to admit waiting for the example to load before I realized the loading UI IS the showcase of mix-blend-mode: difference;)

12 replies

KPCKevin Powell - Community

•Created by Kida Sacheil on 12/15/2024 in #front-end

Dealing with content on a moving colored background

I cam here to say a blend mode might help but was beat to the punch.

12 replies

KPCKevin Powell - Community

•Created by travel561 on 12/17/2024 in #front-end

I am trying to apply responsive design to my website

Okay, that helps to give guidance on what you're doing. For the hero section, I don't know what you want the mobile layout to look like, but you can start with using a grid layout to set the Text section (header, text blurb, and action button) and the image section. Make a top level container (<div>, <section>, etc.) for text and image contents, then place them in a parent container wiht the grid column and row definitions. Grid will give you control over how many rows and columns you want, gaps between them, and what size/ratios your colun and row widths are. Then using either grid-template-areas or grid-column-start/grid-column-end and grid-row-start/grid-row-end on the text and image containers to choose how they stack at different media queries. https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

22 replies

KPCKevin Powell - Community

•Created by travel561 on 12/17/2024 in #front-end

I am trying to apply responsive design to my website

To start, I'd recommend a quick pencil sketch in a notebook or making Figma mockup of what you want. Coding to a design usually yields better results than just coding something, looking at what shows up in the browser, and then asking yourself "What does this need?" When I did my personal portfolio site, I spent 3 days doing the Figma for it. Then I coded it out in another 3 days. If I had not invested the UI time in, the development would have taken much longer and with worse results.

22 replies

KPCKevin Powell - Community

•Created by Rowe2ry on 12/10/2024 in #front-end

Flexbox or Grid?

Yeah the whole dev team has U-L-T-R-A-W-I-D-E-S

7 replies

KPCKevin Powell - Community

•Created by Rowe2ry on 12/10/2024 in #front-end

Flexbox or Grid?

I'm embarrased at how easy that was to do. Idk why but I thought I was going to need flexbox and flex wrap for this because I've used both before in lots of places in our app.

7 replies

KPCKevin Powell - Community

•Created by Rowe2ry on 12/10/2024 in #front-end

Flexbox or Grid?

No description

7 replies

KPCKevin Powell - Community

•Created by Raskin on 11/8/2024 in #front-end

skip eggs function

No description

27 replies

KPCKevin Powell - Community

•Created by Raskin on 11/8/2024 in #front-end

skip eggs function

No description

27 replies

KPCKevin Powell - Community

•Created by peterpumkineaterr on 10/31/2024 in #front-end

I accidentally made complex portfolio design, i don’t know how i should develop it in css.

No description

40 replies

KPCKevin Powell - Community

•Created by peterpumkineaterr on 10/31/2024 in #front-end

I accidentally made complex portfolio design, i don’t know how i should develop it in css.

You are only defining a space-between property value in your header { /*styles*/ } declaration

40 replies

KPCKevin Powell - Community

•Created by peterpumkineaterr on 10/31/2024 in #front-end

I accidentally made complex portfolio design, i don’t know how i should develop it in css.

No description

40 replies

KPCKevin Powell - Community

•Created by peterpumkineaterr on 10/31/2024 in #front-end

I accidentally made complex portfolio design, i don’t know how i should develop it in css.

Yeah, he is saying to use JS to toggle to remove the active class from all of your links, then add the active to only one clicked. Then include a css selector along with your &:hover { /*styles here*/ } => &:hover,&.active { /* styles here */ } Its been a while since I've been using something other than the Blazor web assembly framework we use in prod, but just showing the HTML and styling I'd use is something like:

<ul>
   <li><a href="#work" aria-selected="false">Work</a></li>
   <li><a href="#aboutMe" aria-selected="false">Me</a></li>
   <li><a href="#resume" aria-selected="false">Resume<li><a href="#work" aria-selected="false">Work</a></li></a></li>
</ul>

<ul>
   <li><a href="#work" aria-selected="false">Work</a></li>
   <li><a href="#aboutMe" aria-selected="false">Me</a></li>
   <li><a href="#resume" aria-selected="false">Resume<li><a href="#work" aria-selected="false">Work</a></li></a></li>
</ul>

li {
     a {
         position: relative;
        
         &:hover::before,
         [aria-selected="true"]::before {
             transform: scaleX(1);
         }
          
         &::before {
             content: '';
             width: 100%;
             height: 3px;
             background-color: black;
             position: absolute;
             left: 0;
             bottom: -4px;
             transition: transform 150ms ease-in-out;
             transform: scaleX(0);
         }
    }
}

li {
     a {
         position: relative;
        
         &:hover::before,
         [aria-selected="true"]::before {
             transform: scaleX(1);
         }
          
         &::before {
             content: '';
             width: 100%;
             height: 3px;
             background-color: black;
             position: absolute;
             left: 0;
             bottom: -4px;
             transition: transform 150ms ease-in-out;
             transform: scaleX(0);
         }
    }
}

And then instead of toggling on the class list, you flip the attribute boolean value on aria-selected

40 replies

KPCKevin Powell - Community

•Created by peterpumkineaterr on 10/31/2024 in #front-end

I accidentally made complex portfolio design, i don’t know how i should develop it in css.

No description

40 replies