Solucionado
Vi um efeito interessante naquele trello, gostaria de saber como fazer algo semelhante. Tenho várias colunas com informações de números. Cada número seria um card. Depois que clico em algum número abre um card referente a esse número expandindo a informação. Que tecnologia eu faço esse efeito do card? Eu busco a informação em PHP mas não sei como fazer esse efeito.
hoje, com a Alura e o Google Gemini
Oi Bruno, tudo bem? Você pode usar apenas CSS para isso. Um pouco de animação com as propriedades height e transition e usando o speudo-seletor :focus.
Com isso você poderá fazer o efetio, quando o elemento estiver com o foco, expanda. Algo assim:
.card{
height: 20px;
}
.card:focus{
height: 120px;
transition: height 1s;
}O problema é o foco do elemento que se perde facilmente. Mas você pode criar uma classe que faz o efeito, adicionar e remover ela conforme a pessoa clica no card.
Eu não sei se deixei claro. Eu quero fazer o seguinte. Tenho uma tabela com cinco colunas. Cada coluna tem vários "cards", com um número específico cada. Ao clicar nesse número eu quero abrir um card maior centralizado no meio das tela, sobrepondo a tabela, com uma informação maior. Só com CSS consigo fazer isso? Essa tabela height acho que só aumenta o quadro, correto?
Bruno, tu pode ter uma
Vê se esse link abre pra ti: https://codepen.io/anon/pen/QpQZve
Espero ter ajudado. Qualquer dúvida, só perguntar.