uliana3412 Posts - Answer Overflow

uliana3412

Posts Comments

KPCKevin Powell - Community

•Created by uliana3412 on 4/11/2024 in #front-end

Huge margin while applying translateX property

1 replies

KPCKevin Powell - Community

•Created by uliana3412 on 4/10/2024 in #front-end

Carousel nivagation

10 replies

KPCKevin Powell - Community

•Created by uliana3412 on 4/3/2024 in #front-end

Carousel-style pagination with Modals.

Hello everyone! I saw this site https://lk.zont-online.ru/demo#/. When you click the first card, you have a beautiful carousel with several movable modals, progression bullets. I would like to make them swipeable as well with react-swipeable. I tried to use <Modal> MUI component (for a modal window) and <MobileStepper> (for bullets). But then it would mean that I will have to close the current modal and open a new one which is not a nice option... Do you know how to orchestrate that? Any adive will be helpful! Thank you!

1 replies

KPCKevin Powell - Community

•Created by uliana3412 on 3/26/2024 in #front-end

How to style "increment" and "decrement" arrow buttons in a scrollbar?

3 replies

KPCKevin Powell - Community

•Created by uliana3412 on 3/11/2024 in #front-end

How to make the text appear letter by letter?

Hi everyone, I came across this website https://www.au-charme-rabelaisien.com/ and I liked how the logo appears progressively in a handwritten style for the splash screen. Do you know how to achieve this effect? Thank you!

18 replies

KPCKevin Powell - Community

•Created by uliana3412 on 3/7/2024 in #front-end

Flickering/glitching issue while applying the CSS animation.

1 replies

KPCKevin Powell - Community

•Created by uliana3412 on 2/26/2024 in #front-end

How to display content in a separate smaller window while still being on the main page?

Hello everyone, I am designing a desktop app using Electron and React. I would like to display some content on the user action in a separate smaller window while still being on the main page ( the background is the same). I am not sure about the approach to adapt. Should I HashRouter and Routes to redirect the user to the other page (but then how to keep the intial main background)? Just as an example, I was ispired by this app : https://lk.zont-online.ru/demo#/. If you toggle one of the cards, it will pop up a new window. That's what I want. Thank you very much for any help and advice!

13 replies

KPCKevin Powell - Community

•Created by uliana3412 on 2/15/2024 in #front-end

Text animation inside a slider bar component

Hello everyone. I built a slider bar to unlock the screen and I wanted to add some animation to the text like here https://codepen.io/maciekmaciej/pen/qZeNGY. My CSS code is not correct. Do you know what is wrong and how could I fix that? Thank you very much! 🙂

.track_drag {
    border: 0.1px solid black;
    width: 350px;
    height: 60px;
    left:700px;
    top: 50%;
    display: flex;
    align-items: center;
    position: absolute;
    overflow: hidden;
    border-radius: 7px;
    touch-action: none;
    background: url("../../assets/galaxy.jpg");
    grid-row-start: 9;
    grid-row-end: span 2;
  }
  
  #item {
    width: 60px;
    height: 50px;
    justify-self: flex-start;
    background-color: rgb(51, 66, 165);
    border: 10px solid rgb(100, 66, 165);
    border-radius: 20px;
    /*touch-action: none;
    user-select: none;*/
    z-index: 999;
    margin: 11px 1px;
    background-size: 40% 40%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("a very long URL");
  }
  #item:active {
    background-color: rgb(160, 153, 249);
    border-color: rgb(100, 153, 249) !important; 
  }
  #item:hover {
    cursor: move;
    border-color: rgba(136, 136, 136, .25); 
  }
  .track_text {
    height: 100%;
    width: 100%;
    position: absolute;
    font: normal 15vh sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px; 
    color: black;
    animation: slide 3s infinite ease-in-out;
  }
  @keyframes slide {
    0% {
      background-position: -100vh center;
    }
    60%, 100% {
      background-position: 100vh center;
    }
  }
  .slide {
    animation: slide 3s infinite ease-in-out;
  }

.track_drag {
    border: 0.1px solid black;
    width: 350px;
    height: 60px;
    left:700px;
    top: 50%;
    display: flex;
    align-items: center;
    position: absolute;
    overflow: hidden;
    border-radius: 7px;
    touch-action: none;
    background: url("../../assets/galaxy.jpg");
    grid-row-start: 9;
    grid-row-end: span 2;
  }
  
  #item {
    width: 60px;
    height: 50px;
    justify-self: flex-start;
    background-color: rgb(51, 66, 165);
    border: 10px solid rgb(100, 66, 165);
    border-radius: 20px;
    /*touch-action: none;
    user-select: none;*/
    z-index: 999;
    margin: 11px 1px;
    background-size: 40% 40%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("a very long URL");
  }
  #item:active {
    background-color: rgb(160, 153, 249);
    border-color: rgb(100, 153, 249) !important; 
  }
  #item:hover {
    cursor: move;
    border-color: rgba(136, 136, 136, .25); 
  }
  .track_text {
    height: 100%;
    width: 100%;
    position: absolute;
    font: normal 15vh sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px; 
    color: black;
    animation: slide 3s infinite ease-in-out;
  }
  @keyframes slide {
    0% {
      background-position: -100vh center;
    }
    60%, 100% {
      background-position: 100vh center;
    }
  }
  .slide {
    animation: slide 3s infinite ease-in-out;
  }

17 replies

KPCKevin Powell - Community

•Created by uliana3412 on 2/8/2024 in #front-end

How to create flashing lines between grid items?

Hello everyone, I am building a menu component made of square items and I would like to link them with flashing lines, themeselves made of rounds, like a charging bar, one after another, they will be on and off. Do you know if it is possible in CSS? I am using display: grid and I would like to put these lines exactly where my grid lines are going. Which property should I use? Thank you a lot for any advice :)!

123 replies

Gaming

Programming