Perguntas[css](coding)

Existe alguma razão pela qual meu primeiro botão é animado da esquerda para a direita, mas meu 'botão escuro' não?

Aqui está meu JSFiddle https://jsfiddle.net/Ld41puh7/ e eu incorporei o código.

* {
  margin:0;
  padding:0;
}

.elementor-button {
    position: relative;
    overflow: hidden;
    background-color: white !important;
    color: black;
    border: 2px solid #00E0FD;
    padding: 12px 24px;
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

/* Hover Effect */
.elementor-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #00E0FD;
    transition: left 0.4s ease-in-out;
    mix-blend-mode: multiply; /* Keeps text visible */
}

.elementor-button:hover::before {
    left: 0;
}

.elementor-button:hover {
    color: black; /* Ensure text is readable */
}

/* Dark Button Variant */
.dark-btn .elementor-button {
    background-color: black !important;
    color: white;
    border: 2px solid #00E0FD;
}

/* Dark Button Hover Effect */
.dark-btn .elementor-button:hover {
    background-color: white !important;
    color: black;
}

.dark-btn .elementor-button::before {
    background-color: white;
}

<div style="background:white;height:100px;width:100%">

<div class="elementor-element elementor-element-02d035e elementor-align-center elementor-mobile-align-justify elementor-widget elementor-widget-button" data-element_type="widget" data-id="02d035e" data-widget_type="button.default">
        <div class="elementor-widget-container">
            <div class="elementor-button-wrapper">
                <a class="elementor-button elementor-button-link elementor-size-sm" href="#"><span class="elementor-button-content-wrapper"><span class="elementor-button-text">See our Case Studies</span></span></a>
            </div>
        </div>
    </div>
</div>

<div style="background:black;height:100px;width:100%">
<div class="elementor-element elementor-element-02d035e elementor-align-center elementor-mobile-align-justify dark-btn elementor-widget elementor-widget-button" data-element_type="widget" data-id="02d035e" data-widget_type="button.default">
        <div class="elementor-widget-container">
            <div class="elementor-button-wrapper">
                <a class="elementor-button elementor-button-link elementor-size-sm" href="#"><span class="elementor-button-content-wrapper"><span class="elementor-button-text">See our Case Studies</span></span></a>
            </div>
        </div>
    </div>
</div>

Docs diz que na v4 as camadas base e componentes ainda são definidas com @layer basee @layer components, também na v3 classes definidas dessa forma podem ser usadas com @apply. O problema é que elas falham na v4.

https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles

Na prática, isso significa que sou forçado a definir todas as camadas de base, componentes e utilitários @utilitypara poder usar essas classes, @applyo que, claro, criaria uma grande confusão.

Eu poderia definir todas as camadas com @utilitye então definir camadas na @importdeclaração, mas isso também não parece muito bom.

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/base.css" layer(base);
@import "tailwindcss/components.css" layer(components);
@import "tailwindcss/utilities.css" layer(utilities);

Então, no final, como fazer isso na v4? Eu já tenho muito código que usa classes personalizadas com @applycamadas base e componentes definidas e agora na v4 elas produzem Cannot apply unknown utility class. Por outro lado, não quero definir base e componentes como utilitários.

Vi problemas semelhantes no Github sem solução óbvia. Se eu usar, @referencerecebo @custom-variant cannot be nested.e @utility cannot be nested..

https://github.com/tailwindlabs/tailwindcss/discussions/16429

https://github.com/tailwindlabs/tailwindcss/discussions/13336

Você pode ver meu código de estilos aqui:

https://github.com/nemanjam/nemanjam.github.io/tree/feat/tailwind4-v2/src/styles

estava usando API popover HTML e declaração CSS aninhada com posicionamento de âncora.

meu requisito é quando o popover está aberto; como aplicar algum estilo ao elemento que tem popoveratributo, denotar como elemento pai do popover

Atualmente, quando passamos o mouse sobre esse elemento pai, ele gira e eu quero que, quando o popover estiver aberto, o elemento pai fique na mesma posição e também não possamos interagir com ele. Atualmente, mesmo que o pano de fundo esteja lá, ainda podemos passar o mouse sobre ele.

tentei ::popover-open, mas não consegui entender onde escrever o que no padrão css aninhado

aqui está o código de exemplo

.container__setting {
  container: setting/inline-size;
  .setting__trigger {
    anchor-name: --setting;
    position: fixed;
    top: 82px;
    right: 32px;
    width: max-content;
    height: auto;
    border-radius: 10%;
    background-color: unset;
    border: solid;
    cursor: pointer;
    display: flex;
    font-size: 4rem;
    transition: transform 330ms ease-in-out;
    &::after {
      content: '🕸';
    }
    
    &:hover {
      transform: scale(1.05) rotate(45deg);
    }
    
  }

  .setting__panel {
    position: fixed;
    position-anchor: --setting;
    top: calc(anchor(bottom) + 15px);
    right: calc(anchor(left) + 10px);
    justify-self: anchor-center;
    width: 20rem;
    height: 20rem;
    background-color: hwb(20 10% 40%);
    border-radius: 4px;
    padding: 10px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: color(xyz, 0, 0, 1);
    &::backdrop {
      background-color: hsl(0 0% 10% / 0.5);
      backdrop-filter: blur(2px);
    }


    .control__group {
      display: grid;
      grid-auto-flow: row;
      gap: 0.5rem;

    /* Control Buttons */
    & button, & select {
      background-color: color(xyz 0.05 0.05 0.09);
      color: white;
      border: none;
      padding: 14px 24px;
      cursor: pointer;
      transition: var(--transition);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-weight: 600;
      font-size: 1rem;
      letter-spacing: 0.01em;
      
      &:hover:not(.close) {
        background-color:  color(xyz 0.02 0.01 0.02);
        transform: translateY(-3px);
      }
      &.close {
        width: 2rem;
        height: 3rem;
        outline: 1px dashed green;
        justify-self: end;
        &:hover {
          font-size: 30px;
        }
      }
    }
  }
   & [popover] {
    position: fixed;
    inset: unset;
    width: fit-content;
    height: fit-content;
    right: 0;
    bottom: 0;
    margin: auto;
    overflow: auto;
    color: CanvasText;
    background-color: Canvas;
    padding: 1rem;
    border: solid;
    border-radius: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: translate 0.7s ease-out,
      display 0.7s ease-out allow-discrete,
      overlay 0.7s ease-out allow-discrete,
      height 0.5s ease-in-out;
    translate: 0 -2rem;


    &:popover-open {
      opacity: 1;
      visibility: visible;
      translate: 0 0;
      right: 40px;
      bottom: 0;
      translate: 0 0;
      height: 40px;
      @starting-style {
        opacity: 0;
        visibility: hidden;
      }
    }
  }


}

<div class="container__setting">
  <button class="setting__trigger" popovertarget="options" popovertargetaction="show"></button>
  <div class="setting__panel" id="options" popover="hint">
    <div class="control__group">
      <button id="close" class="close" popovertarget="options" popovertargetaction="hide">X</button>
      <button id="new" class="add">Add New </button>
      <button id="shuffle" class="shuffle"> Shuffle </button>
    </div>
  </div>
</div>

atualizar

tentei conforme a sugestão e funcionou, mas escrever dentro do bloco aninhado do elemento não funciona; abaixo está um exemplo funcional (sim, a sintaxe também é um pouco diferente).

    .container__setting {
      .setting_trigger {
        // some css properties
    
        // writing inside  does not work
      }
    
      // writing outside but inside parent selector works
      &:has([popover]:popover-open) .setting__trigger {
        background-color: blue;
        transform: scale(1.05) rotate(45deg);
      }
    }

uma sintaxe aninhada alternativa também funciona como abaixo

.container__setting {
  &:has(:popover-open) {
     .setting__trigger {
        background-color: green;
        transform: scale(1.05) rotate(45deg);
      }
  }
}

Como tornar o sectionelemento abaixo rolável e ocupar 100% da altura do elemento pai?

*{ margin: 0 }
main{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: black;
}

header, footer{
  flex: 0 0 auto;
  background: red;
}

content{
  flex: 1 1 auto;
  display: flex:
  flex-direction: column;
}

content nav{
  background: green;
  flex: 0 0 auto;
}

content section{
  flex: 1 1 auto;
  background: blue;
  overflow-y: auto;
  max-height: 100%; /* <- problem */
  
  p{
    flex: 0 0 auto;
  }
}

ul{
  flex: 1 1 auto;
  
  li{
     height: 200px;
  }
}

<main>
  <header>header</header>
  <content>
    <nav>nav</nav>
    <section>
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
      <p>after list</p>
    </section>
  </content>
  <footer>footer</footer>
</main>

Se eu colocar uma altura de pixel fixa nele, max-height: 200pxfunciona como esperado (rola), mas como tornar essa altura variável/preencher a altura restante do pai?

Quero criar esse efeito em que um círculo se expandirá para a esquerda e para a direita simultaneamente. Vi isso nesta resposta de outro post: https://stackoverflow.com/a/29922969

este é o código reproduzido na resposta deles:

.logo {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: red;
  transition: width 2s;
}
.logo:hover {
  width: 300px;
}

<div class="logo"></div>

e esse é exatamente o efeito que eu quero, exceto que ele deve se expandir do centro em vez da esquerda para a direita.

Tentei com a ajuda da IA, mas nem ela conseguiu e recriou o mesmo efeito da resposta fornecida, mas não do centro para a esquerda e para a direita.

Tenho uma div com nome de classe graph-containercom as seguintes propriedades:

.graph-container{
    width: 90%;
    height: 298px;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

e nessa div, entre outras coisas, tenho outra div com a classe graph-selectorque contém uma lista de botões:

.graph-selector{
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    width: 320px;
    margin-top: 46px;
    overflow-y: auto;
    overflow-x: hidden;
}

Dependendo do gráfico, ele pode ter alguns ou muitos botões, então eu configurei a propriedade de estouro vertical para adicionar uma barra de rolagem sempre que eles estendessem o tamanho do div do contêiner. No entanto, por algum motivo, isso apenas tornou os botões mais finos do que sua altura definida para poderem ser espremidos no div do contêiner sem que nenhuma barra de rolagem aparecesse, o que é... literalmente o oposto do que eu acabei de perguntar?

Suponha que eu tenha definido o CSS font-feature-settingspara algum valor que faça sentido para a maior parte da minha página.

Agora, nas tabelas, gostaria de adicionar o tnumrecurso para garantir que todos os números fiquem alinhados para facilitar a comparação (evitando o problema em que "1111" pode parecer menor que "999").

Existe alguma maneira de estender o valor de font-feature-settingssem ir até onde ele está definido globalmente copiando e colando com modificações? Consultando e editando o valor herdado em CSS, ou algo assim?

Estou tentando trabalhar com âncoras CSS (sei que é experimental, mas ainda assim). Estou tentando ancorar um botão à direita de uma barra lateral. A barra lateral é traduzida para fora da tela quando fechada, trazida de volta quando aberta. Quero que o botão ancorado na barra lateral siga o curso da barra lateral, mas não consigo fazer com que ele siga a tradução.

document.querySelector('button')
  .addEventListener('click', () => {
    document.querySelector('aside').setAttribute("aria-expanded", "true");
  }
)

div {
  background: red;
  height: 200px;
}

aside {
  width: 30px;
  background: green;
  position: absolute;
  right: 0;
  inset-block: 0;
  transition: all 1s;
  transform: translateX(100%);
  anchor-name: --anchor-name;
}

aside[aria-expanded="true"] {
  transform: translateX(0);
}

button {
  position: absolute;
  position-anchor: --anchor-name;
  right: anchor(--anchor-name left);
  top: 50%;
  transform: translateY(-50%);
}

body { margin: 0; }

<div>
  <aside></aside>
  <button >Expand</button>
</div>

Não consigo encontrar nenhum recurso que descreva esse comportamento. Algum hack para fazer isso funcionar? Editar: Estou trabalhando no Chrome 130.0.6723.116

Estou trabalhando em algumas animações de hover para botões em CSS. Quero que os botões tenham uma transição suave ao passar o mouse e ao não passar o mouse, mas não posso usar JS para isso. Minhas animações funcionam muito bem, mas a animação de não passar o mouse é reproduzida no carregamento da página.

Existe uma maneira melhor de reverter a animação ao passar o mouse?

Aqui está minha animação de hover:

.new-anim:hover {
    animation: notch 300ms ease-in;
    animation-fill-mode: forwards;
}

@keyframes notch {
    0% {clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);}
    25% {clip-path: polygon(0% 12.5%, 7.5% 0%, 100% 0%, 100% 100%, 0% 100%);}
    50% {clip-path: polygon(0% 25%, 15% 0%, 100% 0%, 100% 100%, 0% 100%);}
    75% {clip-path: polygon(0% 37.5%, 22.5% 0%, 100% 0%, 100% 100%, 0% 100%);}
    100% {clip-path: polygon(0% 50%, 30% 0%, 100% 0%, 100% 100%, 0% 100%);}
}

E aqui está meu unhover:

.new-anim {
    animation: denotch 300ms ease-out;
    animation-fill-mode: forwards;
}

@keyframes denotch {
    0% {clip-path: polygon(0% 50%, 30% 0%, 100% 0%, 100% 100%, 0% 100%);}
    25% {clip-path: polygon(0% 37.5%, 22.5% 0%, 100% 0%, 100% 100%, 0% 100%);}
    50% {clip-path: polygon(0% 25%, 15% 0%, 100% 0%, 100% 100%, 0% 100%);}
    75% {clip-path: polygon(0% 12.5%, 7.5% 0%, 100% 0%, 100% 100%, 0% 100%);}
    100% {clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);}
}

Defina a animação reversa e ela fluiu corretamente, mas reproduz a animação quando a página é carregada pela primeira vez.

Estou tentando definir uma regra @property CSS para um tamanho de fonte com um valor inicial baseado em rem.

https://developer.mozilla.org/en-US/docs/Web/CSS/@property

Funciona desde que nenhuma sintaxe seja definida:

@property --font-size {
  syntax: '*';
  initial-value: 2rem;
}

Mas ao definir a sintaxe de comprimento, que inclui unidades rem baseadas nos documentos, ela é ignorada pelo navegador:

@property --font-size {
  syntax: '<length>';
  initial-value: 2rem;
}

Exemplo: https://stackblitz.com/edit/stackblitz-starters-axmosbgb?file=styles.css