i_lost_to_loba_kreygasm Comments

i_lost_to_loba_kreygasm

Explore posts from servers

KPCKevin Powell - Community NNuxt TtRPC

Posts Comments

KPCKevin Powell - Community

•Created by i_lost_to_loba_kreygasm on 1/21/2025 in #front-end

Is it possible to animate ::marker which has content defined explicitly ?

thank you so much for replying but I noticed it doesn't work with position:relative

10 replies

KPCKevin Powell - Community

•Created by i_lost_to_loba_kreygasm on 1/21/2025 in #front-end

Is it possible to animate ::marker which has content defined explicitly ?

summary::after {
  content: '+';
  position: absolute;
  right: 0px;
  font-weight: bold;
  transition: transform 0.2s ease;
  transform: rotate(0deg);
}
details[open] summary::after {
  transform: rotate(45deg);
}

summary::after {
  content: '+';
  position: absolute;
  right: 0px;
  font-weight: bold;
  transition: transform 0.2s ease;
  transform: rotate(0deg);
}
details[open] summary::after {
  transform: rotate(45deg);
}

why does it need position:absolute to work properly ? If I remove it , it doesn't work

10 replies

KPCKevin Powell - Community

•Created by i_lost_to_loba_kreygasm on 1/21/2025 in #front-end

Is it possible to animate ::marker which has content defined explicitly ?

this came to my head as well but thought there should be a better way but gonna try it 🙂

10 replies

KPCKevin Powell - Community

•Created by i_lost_to_loba_kreygasm on 1/21/2025 in #front-end

Is it possible to animate ::marker which has content defined explicitly ?

  details[open] summary::marker {
    font-weight: bold;
    transform:rotate(90deg);
    transition:rotate .2s ease;
  }
summary{
  font-size:20px;
  cursor:pointer;
  transition:rotate .2s ease;
}
summary::marker{
  content:'+ ';
  font-weight:bold;
  vertical-align:middle;
  transition:rotate .2s ease;
}

  details[open] summary::marker {
    font-weight: bold;
    transform:rotate(90deg);
    transition:rotate .2s ease;
  }
summary{
  font-size:20px;
  cursor:pointer;
  transition:rotate .2s ease;
}
summary::marker{
  content:'+ ';
  font-weight:bold;
  vertical-align:middle;
  transition:rotate .2s ease;
}

this doesnt work

10 replies

KPCKevin Powell - Community

•Created by Bingo Bandit on 1/17/2025 in #front-end

What's the best way to style 45 bevel corners?

my bad

44 replies

KPCKevin Powell - Community

•Created by Bingo Bandit on 1/17/2025 in #front-end

What's the best way to style 45 bevel corners?

:thumbup:

44 replies

KPCKevin Powell - Community

•Created by i_lost_to_loba_kreygasm on 1/21/2025 in #front-end

How to add transition to details element for smooth transitioning ?

Kevin had a video about it which magically appeared in my recommendations

3 replies

KPCKevin Powell - Community

•Created by i_lost_to_loba_kreygasm on 1/21/2025 in #front-end

How to add transition to details element for smooth transitioning ?

https://www.youtube.com/watch?v=Vzj3jSUbMtI

3 replies

KPCKevin Powell - Community

•Created by i_lost_to_loba_kreygasm on 1/19/2025 in #front-end

How to declare `display:flex` inside an element with `popover` attribute ?

🙂

23 replies

KPCKevin Powell - Community

•Created by i_lost_to_loba_kreygasm on 1/19/2025 in #front-end

How to declare `display:flex` inside an element with `popover` attribute ?

gotcha and thanks again for helping me out , you can delete your fork , I have forked it

23 replies

KPCKevin Powell - Community

•Created by Bingo Bandit on 1/17/2025 in #front-end

What's the best way to style 45 bevel corners?

hi , i watched your videos , so subgrid basically inherits grid columns /properties from its parent grid ?

44 replies

KPCKevin Powell - Community

•Created by i_lost_to_loba_kreygasm on 1/19/2025 in #front-end

How to declare `display:flex` inside an element with `popover` attribute ?

23 replies

KPCKevin Powell - Community

•Created by i_lost_to_loba_kreygasm on 1/19/2025 in #front-end

How to declare `display:flex` inside an element with `popover` attribute ?

ooh , forgot that would work . it works flawless now , thank you for your help 🫡

23 replies

KPCKevin Powell - Community

•Created by i_lost_to_loba_kreygasm on 1/19/2025 in #front-end

How to declare `display:flex` inside an element with `popover` attribute ?

#gallery{
  border:none;
  height:100vh;
  width:400px;
  overflow:hidden;
  transition:.3s ease-in;
}
#gallery:popover-open{
  display: flex;
}
#gallery img{
  height:100%;
  max-width:100%;
   transition:.3s ease-in;
}

#gallery{
  border:none;
  height:100vh;
  width:400px;
  overflow:hidden;
  transition:.3s ease-in;
}
#gallery:popover-open{
  display: flex;
}
#gallery img{
  height:100%;
  max-width:100%;
   transition:.3s ease-in;
}