Demonstração independente

CSS PACK · BANCADA DE TESTE

O efeito precisa funcionar antes de virar promessa.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aqui estão os efeitos isolados, com texto fictício, para você avaliar a qualidade real da adaptação.

Aula liberada e conferida Adaptação em HTML/CSS Equivalente visual do preview
01

Aula liberada · Barra de luz com interação no hover

Uma linha de luz que responde ao movimento.

O código original usa pseudo-elemento, transição e glow. Aqui ele foi adaptado para a paleta vermelha.

Passe o mouse

Hover com presença

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aproxime o cursor da superfície.

Variação contida

Glow editorial

O mesmo princípio pode ser usado em cards, botões, blocos de preço ou uma seção inteira.

Ver o código usado nesta demonstração
Aula liberada · original do ElementorAbrir aula ↗
selector:after {
  content: '';
  position: absolute;
  top: 0%; left: 50%;
  transform: translate(-50%, -50%);
  width: 20%;
  transition: 2s;
  border-radius: 100px;
  height: 8px;
  background: linear-gradient(98deg,
    #eed7ff, #d49dfc, #eed7ff, #f6e1ff);
  box-shadow: 0px 100px 80px 0px #eed7ff,
    0px 41.778px 33.422px 0px #eed7ff,
    0px 22.336px 17.869px 0px #d49dfc,
    0px 12.522px 10.017px 0px #d49dfc,
    0px 6.65px 5.32px 0px #d49dfc,
    0px 2.767px 2.214px 0px #d49dfc;
}
selector:hover:after { width: 70%; }
Adaptação usada aqui · vermelho editorialHTML/CSS puro
.lightbar-surface::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  width: 18%; height: 3px;
  background: linear-gradient(98deg,
    #ffccd0, #f04450, #ffccd0, #fff);
  transition: width 1.4s ease;
}
.lightbar-surface:hover::after { width: 72%; }
02

Aula liberada · Box shadow clean

Profundidade sem transformar tudo em neon.

Este é um efeito mais simples: uma combinação de sombras internas e externas para criar volume.

Shadow 01

Superfície elevada

Lorem ipsum dolor sit amet. O contraste aparece quando o card sai do fundo.

Shadow 02

Rebaixo discreto

Útil para campos, caixas de informação e blocos que precisam parecer encaixados.

Shadow 03

Ênfase de conversão

O mesmo desenho com uma borda e um halo vermelho pode marcar o CTA principal.

Ver o código liberado da aula
Aula liberada · Box shadow cleanAbrir aula ↗
selector {
  box-shadow:
    inset -2px -2px 4px #181a3214,
    inset 3px 3px 3px #fff,
    0.4777151241141837px 0.4777151241141837px 0.20267736224190752px -0.8125px #1414140d,
    1.4487036858627107px 1.4487036858627107px 0.6146329201220813px -1.625px #1414140d,
    3.829592112890677px 3.829592112890677px 1.62475833132211px -2.4375px #1414140b,
    12px 12px 5.091168824543143px -3.25px #14141407;
}
03

Equivalente visual do preview · Divisões de borda externa

O grid editorial que você mostrou na referência.

A aula específica está bloqueada no seu acesso; esta é uma reprodução nativa do efeito visual visto no preview.

+++ +++ +++
01 · Estratégia

Primeiro bloco

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi.

02 · Direção

Segundo bloco

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

03 · Entrega

Terceiro bloco

Donec ullamcorper nulla non metus auctor fringilla.

04

Adaptação · Timeline vinculada ao scroll

O vermelho acompanha a leitura enquanto você desce.

Role devagar. O preenchimento da linha e os pontos ativos acompanham a posição real da página.

01
Entrada

Capturar atenção

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

02
Meio

Explicar o valor

Maecenas faucibus mollis interdum. Sed posuere consectetur est.

03
Avanço

Chamar para a ação

Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

05

Adaptação · Informação adicional vinculada ao clique

Interação útil, sem esconder o essencial.

Os painéis abaixo abrem com clique e mantêm o foco na informação escolhida.

01

Uma resposta curta e objetiva.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor.

06

Aula liberada · Texto com transição 3D no hover

Este é um efeito realmente demonstrável.

Passe o mouse sobre o texto. A headline vira em perspectiva e revela uma segunda mensagem.

Composição selecionada. Agora dê o próximo passo.
Ver o código liberado da aula
Aula liberada · Texto com transição 3D no hoverAbrir aula ↗
selector {
  cursor: pointer;
  overflow: hidden;
  mask: linear-gradient(to top, transparent 5%, black 25%, black 85%, transparent 95%);
  -webkit-mask: linear-gradient(to top, transparent 5%, black 25%, black 85%, transparent 95%);
}
selector:after {
  font-family: Inter Tight;
  color: white;
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  content: "CSS PACK";
  pointer-events: none;
  transform: translate(-50%, 50%) perspective(900px) rotateX(100deg);
  left: 50%; top: 50%; z-index: 99;
  position: absolute; width: 100%; height: 100%;
  transition: 1s !important;
}
selector:hover .elementor-heading-title {
  transform: translateY(-100%) perspective(900px) rotateX(-100deg);
  transition: 1s !important;
}
selector .elementor-heading-title {
  transition: 1s !important;
  line-height: 1.5em !important;
  transform: translateY(0%) perspective(900px) rotateX(0deg);
}
selector:hover:after {
  transform: translate(-50%, -50%) perspective(900px) rotateX(0deg);
  transition: 1s !important;
}