Rowe2ry Comments - Answer Overflow

Rowe2ry

Posts Comments

KPCKevin Powell - Community

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

skip eggs function

27 replies

KPCKevin Powell - Community

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

skip eggs function

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.

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.

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.

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.

replace your li block with this and then tweak the left, top, background color, width, and height values to your liking. Pseudo element (::before) is easier to position and control than the browser-defined "underline" text decoration:

li {
        list-style: none;
        margin: 1em 0;
        font-size: 1.25rem;
        font-family: "satoshi-light";

        a {
            color: black;
            text-decoration: none;
            position: relative;
        
            &:hover::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 {
        list-style: none;
        margin: 1em 0;
        font-size: 1.25rem;
        font-family: "satoshi-light";

        a {
            color: black;
            text-decoration: none;
            position: relative;
        
            &:hover::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);
            }
        }
    }

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.

When I did my portfolio, I spent 3 days doing the Figma, and 4 days coding it out and I was going for dev positions. If I was trying to show off my design skills and I wasn't a dev and I wasn't applying for dev roles, I would make like a squarespace or wix site to host my portfolio, and then include links to the Figma.

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.

If Figma is your specialty, and the jobs you are applying for are for Figma, you may want to comission a contracted dev on Fiver to code the site to look like your Figma. If you have to learn all of the dev skills needed to make modern complex layouts... then you may as well go into applying for dev roles by the time you've learned enought to deploy your working website ¯\_(ツ)_/¯

40 replies

KPCKevin Powell - Community

•Created by EasyToKill_ (long break) on 10/22/2024 in #front-end

Convert SVG to CSS properties

From the css. The css says URL, but its the actual SVG file data its reading. The browser isn't making any network calls to load the svgs, it comes with the stylesheet

13 replies

KPCKevin Powell - Community

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

Style an element if it has 2 attributes with the same value?

Ahh I'm starting to see it. Thats an innovative approach. I think I might just bite the bullet and use our Blazor framwork tooling to assign an "increment-disabled" and/or "decrement-disabled" class if I don't get approval to ignore this requirement

15 replies

KPCKevin Powell - Community

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

Style an element if it has 2 attributes with the same value?

That's pretty cool. I am not good at reading the scss

15 replies

KPCKevin Powell - Community

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

Style an element if it has 2 attributes with the same value?

Yeah we're using Blazor (C# web assembly) which doesn't make for super nice access to Javascript. (its possible through interop, but introduces a lot of overhead) I think I am just going to push back that this is do-able but likely not a good use of time when we have other new development on the docket and this is just polishing touches on a feature we've been building for the past 12 weeks due to ship this Monday

15 replies

KPCKevin Powell - Community

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

Style an element if it has 2 attributes with the same value?

I guess I could manually write a selector like

.oc-spin-counter input[aria-valuemax="1"][aria-valuenow="1"],
.oc-spin-counter input[aria-valuemax="2"][aria-valuenow="2"],
.oc-spin-counter input[aria-valuemax="3"][aria-valuenow="3"],
.oc-spin-counter input[aria-valuemax="4"][aria-valuenow="4"],
.oc-spin-counter input[aria-valuemax="5"][aria-valuenow="5"],

.oc-spin-counter input[aria-valuemax="1"][aria-valuenow="1"],
.oc-spin-counter input[aria-valuemax="2"][aria-valuenow="2"],
.oc-spin-counter input[aria-valuemax="3"][aria-valuenow="3"],
.oc-spin-counter input[aria-valuemax="4"][aria-valuenow="4"],
.oc-spin-counter input[aria-valuemax="5"][aria-valuenow="5"],

and cover the use case for like up to 20, but ideally this would be for all situations where the 2 have identical values

15 replies

KPCKevin Powell - Community

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

Style an element if it has 2 attributes with the same value?

15 replies

KPCKevin Powell - Community

•Created by ABUL KALAM on 10/24/2024 in #front-end

Animate SVG

Best I could come up with. It looks even farther from the effect you want, but you might be able to fine-tune it and its a LOOOOOT easier to maintain. 23 lines of HTML vs 87 57 lines of CSS vs 337 0 lines of Javascript vs 98 https://codepen.io/Chris-Rowe/pen/JjgOvJb In my head, the green-to-white radial gradient would start in the bottom left corner, and as it reaches the center of the shape it "flattens" out to a linear gradient with a 45% angle, then is immediately replaced with a white-to-green gradient thats the equal and opposite of the starting point and it "reverse" animates the same way the first half of the animation formed. But this would require lots of playing with key frames and turning the circle gradient into an ellipse, etc. my reference material: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients https://dev.to/afif/we-can-finally-animate-css-gradient-kdk

7 replies

KPCKevin Powell - Community

•Created by ABUL KALAM on 10/24/2024 in #front-end

Animate SVG

My instinct would be to use the SVG as a mask and then use something like this https://codepen.io/t_afif/pen/dyOdNvW To animate a gradient masked by the SVG

7 replies

KPCKevin Powell - Community

•Created by ABUL KALAM on 10/24/2024 in #front-end

Animate SVG

I'm having trouble determining how the "correct" behavior differs from what you've done

7 replies

KPCKevin Powell - Community

•Created by Faker on 10/22/2024 in #front-end

What is the difference between backdrop-filter and filter properties in css

yeah box 1 (filter), the whole box is blurry including its edges box 2 (backdrop-filter) text is not blurry, edges of div are not blurry, but the stuff behind it looks blurred (great for "glass" style UI implmentations) Box 3 is a control and the backdrop fill for all of these is a transparent red

14 replies

Gaming

Programming