WHIZZBBIG Posts - Answer Overflow

WHIZZBBIG

Explore posts from servers

DIAdiscord.js - Imagine a boo! 👻KPCKevin Powell - Community

Posts Comments

KPCKevin Powell - Community

•Created by WHIZZBBIG on 12/23/2023 in #front-end

How should I create the layout in the image using grid

12 replies

KPCKevin Powell - Community

•Created by WHIZZBBIG on 4/7/2023 in #front-end

need help in decompose of this reall well made CSS Transforms Animation

Hey, I came across this linktr.ee (https://linktr.ee) page, and if you look at their landing page, the animations are really playing well with CSS Transforms. If you scroll down a bit, you can see how well these things are coming and fading, and the one in the header is rotating. I want really good help in understanding not only their HTML structure but also how they are working on CSS Transforms and everything that can help me achieve this. One of my friends messaged me this, but I'm not able to understand what it means. 'There is surprisingly little magic involved in creating them. Mostly, it’s relying heavily on CSS 3D transforms. It just flips a root div. All the mockups are inside, each rotated by an incremental 180 degrees. Backface-visibility: hidden makes sure they’re not visible from the back. It opted for a procedural lerp instead of tween animations—incrementing the rotation by 180° on every click.

1 replies

KPCKevin Powell - Community

•Created by WHIZZBBIG on 3/18/2023 in #front-end

Selectors Hell

I am trying to select specific li of the ul of a div which is looking like a hell if they're simillar ones

<header class='header'>
  <div class="inner">
    <div class="buttons">
        <button class="products"></button>
        <button class="services"></button>
        <button class="cool"></button>
        <div class="header_panel"></div> <!-- has child main-panel-item of main-panel -->
        <div class="header_panel">
          <ul class="header_main-panel">
            <li class="header_main-panel-item"></li>
            <li class="header_main-panel-item"></li>
            <li class="header_main-panel-item"></li>
            <li class="header_main-panel-item"></li>
            <li class="header_main-panel-item"></li>
            <li class="header_main-panel-item"></li> <!-- the one i want to apply styles-->
          </ul
        </div>
        <div class="header_panel"></div> <!-- has child main-panel-item of main-panel -->
    </div>
  </div>
</header>

<header class='header'>
  <div class="inner">
    <div class="buttons">
        <button class="products"></button>
        <button class="services"></button>
        <button class="cool"></button>
        <div class="header_panel"></div> <!-- has child main-panel-item of main-panel -->
        <div class="header_panel">
          <ul class="header_main-panel">
            <li class="header_main-panel-item"></li>
            <li class="header_main-panel-item"></li>
            <li class="header_main-panel-item"></li>
            <li class="header_main-panel-item"></li>
            <li class="header_main-panel-item"></li>
            <li class="header_main-panel-item"></li> <!-- the one i want to apply styles-->
          </ul
        </div>
        <div class="header_panel"></div> <!-- has child main-panel-item of main-panel -->
    </div>
  </div>
</header>

I am using SCSS how should i select it in a way to get access to the 6th child elment of main-panel-item of 2nd panel's main-panel hope this make sense 😆

48 replies

Gaming

Programming