Adicionar filtros SVG com CSS

O SVG existe desde o início dos anos 2000, e ainda assim ainda existem maneiras interessantes que os designers estão descobrindo para usá-lo. Neste tutorial, o foco será nos filtros que são aplicados através do SVG - mas em vez de aplicá-los a uma imagem SVG, mostraremos como eles podem ser aplicados a qualquer conteúdo de página regular.

A maneira como o filtro é aplicado ao SVG é, na verdade, através do CSS, dizendo-lhe o ID do filtro. Usando essa mesma ideia, o filtro pode ser aplicado ao texto regular, por exemplo. A boa parte sobre isso é que você pode adicionar algumas ótimas looks gráficos ao seu texto, o que teria sido anteriormente possível, aplicando um número de filtros do Photoshop e economizando como uma imagem. Usando o filtro SVG, o texto permanece acessível e selecionável, pois ainda é apenas um elemento de texto regular na sua página.

O código aqui criará um mapa de deslocamento para o texto que também contém um mapa alfa para que pareça aguarado e ajuste o tema da página. Em seguida, outro filtro será criado que faz um menu aparecer como bolhas de água, que ficam ligeiramente juntas, mas blob à parte, à medida que se movem mais longe. Mais uma vez, isso mantém com o tema desta página em particular e mostra duas formas criativas de aplicar filtros SVG para outro conteúdo.

Interessado em aprender mais sobre o SVG? Dê uma olhada no nosso artigo sobre Tudo que você precisa saber sobre o SVG na web . Alternativamente, adicione algum interesse aos seus sites com um desses legais Exemplos de animação CSS. .

• Baixe os arquivos Para este tutorial de arquivosilo

01. Comece

Primeiro, você precisa baixar os arquivos do projeto usando o link diretamente acima. Depois de ter feito isso, arraste o começar pasta de projeto no seu código IDE e abra o index.html. página. Você verá que há algum conteúdo de página já escrito. A seção de cabeçalho precisa ser criada, e isso conterá a manchete que será afetada por um filtro SVG. Adicione o código aqui, apenas dentro do corpo marcação.

 & lt; div classe = "bg" & gt;
& lt; div classe = "meio" & gt;
& lt; h2 class = "título" & gt; debaixo d'água
Adventure Park & ​​Lt; / H2 & GT;
& lt; div class = "intro_block" & gt; 

02. Feche o cabeçalho

Agora o cabeçalho está terminado, com todo o texto para ele no lugar. Se você visualizar sua página no navegador no momento, você verá uma imagem de água com algum texto nele. A manchete, que ainda é atualmente instável, vai ser estilizado e ter o filtro SVG aplicado a ele.

 & lt; h3 class = "subhead" & gt; experimentar o oceano
& lt; BR & GT; como nunca antes & lt; / h3 & gt;
& lt; p class = "intro" e gt; debaixo d'água
O Adventure Park é uma experiência
Deleite qualquer coisa que você já tenha
tive. Viajar para as profundezas de
o oceano e andar entre os
Vida marinha! & Lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt; 

03. Crie um filtro SVG

O código SVG pode ser adicionado em qualquer lugar da página, mas como não será visto, pode ser uma boa ideia colocá-la na parte inferior, antes da etiqueta do corpo de fechamento. O filtro SVG cria ruído de turbulência. Observe que o filtro tem um ID - é o que permite que o CSS aplique isso a outro elemento na página.

 & lt; svg xmlns = "http://www.w3.org/2000/svg" & gt;
& lt; filtro ID = "deslocamento de deslocamento" & gt;
& lt; feturbulence tipo = "turbulência"
basefrequency = "0,004" numoctaves =
"2" Result = "turbulência" / & gt;
& lt; / filtro & gt;
& lt; / svg & gt; 

04. Ocultar o SVG

Passar para o page.css. Arquivo Agora, e acima de tudo, o código CSS para o resto da página será onde nosso novo CSS irá. Aqui o SVG está definido para não exibir na página. O título dois tag é definido para ter o tipo de letra correto aplicado a ele.

 svg {
Mostrar nenhum;
}
h2 {
Tamanho da fonte: 5.5VW;
Fonte-Família: 'Creta Rodada', Serif;
} 

05. Adicionar ao título

O altura da linha é definido como zero, porque posteriormente a manchete será animada, portanto, ter controle sobre sua dimensionamento na página é importante. Também é dado algum preenchimento para que seja com a quantidade certa de espaço ao redor e a cor é alterada.

 .headline {
Altura da linha: 0;
Exibir: bloco inline;
preenchimento: 70px;
Cor: #ccffff; 

06. Termine o título

Ao terminar a classe Headline, a próxima linha aplica o DeslocamentoFilter. ID no SVG para o texto. O Traduza3d. Garante que o texto se torne acelerado de hardware. A escala é alterada ligeiramente para garantir que quando o deslocamento é aplicado, parece certo.

 Filtro: URL (#displacementfilter);
Transformar: translate3d (0, 0, 0);
Transformar: Scoundy (1,8) girar (-2DEG);
} 

07. Faça deslocar

Se você testar o filtro nesta fase, a turbulência substitui completamente o texto. Isso é fácil de consertar. Volte para o código de filtro na página Index.html. Isso leva a turbulência e o gráfico de origem, que é o texto, e a aplica como um filtro de deslocamento. Tente mudar a frequência básica e o número de oitavas na turbulência.

 & lt; feedisplacationmap in2 = "turbulência" em = "
ScaleGraphic "Scale =" 30 "Xchannelselector =" R "
Ychannelselector = "G" Result = "Disp" / & GT; 

08. amolecer as bordas

As bordas parecem um pouco duras para um efeito aquoso. Que pode ser curado com um borrão gaussiano. Adicione o código após o mapa de deslocamento. Quando você atualiza a página, ele definitivamente borrou o texto, mas o deslocamento se foi. Mais uma vez, estes são elementos que podem ser fixados no caminho para criar o efeito.

 & lt; fegaussianblur em = "SourceGraphic"
stddeviation = "15" result = "blr" / & gt; 

09. Composto os dois

Adicione a linha composta aqui abaixo do borrão gaussiano anterior. Você verá que isso combina o desfoque e o deslocamento juntos e também cria um efeito translúcido aguado para o texto. Foi alguma maneira de suavizar as bordas, mas não o suficiente. Seria bom se o desfoque original pudesse ser adicionado a isso.

 & lt; fecomposite em = "blr" in2 = "disp" operador = "em" resultado = "comp" / & gt; 

10. Mesclar o desfoque

Uma operação de mesclagem permite que o resultado final do compósito seja mesclado com o efeito desfocado. Isso agora parece que se encaixa com a imagem de fundo e parece caber com as linhas de luz que passam pela água. A melhor parte sobre o texto é que ela ainda é selecionável e parte da página, ao contrário de se você criou isso no Photoshop.

 & lt; femerge result = "final" & gt;
& lt; femergenode em = "blr" / & gt;
& lt; femergenode em = "comp" / & gt;
& lt; / femerge & gt; 

11. Crie uma animação

Volte para o page.css. Arquivo e adicione nos quadros-chave, conforme mostrado aqui. Isso apenas aumentará o tamanho da fonte a partir de uma largura vertical zero para uma largura vertical 5.5. No início, isso será aplicado à manchete, para que o texto seja escalado e em lugar na tela. Como o texto se move, o deslocamento também mudará sobre o comprimento, dando uma ondulação aquosa.

 @keyframes scaler {
a partir de {
Tamanho da fonte: 0vw;
}
para {
Tamanho da fonte: 5.5VW;
}
} 

12. Altere o estilo H2

O H2. Estilo foi adicionado anteriormente na etapa 4. Substitua esse código com este novo código, que adiciona a animação CSS ao longo de quatro segundos ao cabeçalho. A animação pára e detém no último quadro-chave. Salve isto e teste-o no navegador para ver o texto ondulado no lugar.

 H2 {
Altura da linha: 0;
Tamanho da fonte: 0vw;
Nome da animação: Scaler;
Animação-Duração: 4S;
Modo de aleta de animação: para a frente;
Fonte-Família: 'Creta Rodada', Serif;
} 

13. Adicionar navegação

Agora vamos criar uma animação inspirada em blob de água adequada usando outro filtro SVG. Adicione o seguinte conteúdo de navegação para o topo do código do corpo, antes do título iniciado na primeira etapa do tutorial. Isso criará o básico de um menu de hambúrguer em um círculo.

& lt; nav class = "menu" & gt;
& lt; input type = "caixa de seleção" href = "#" class =
"Menu-aberto" nome = "menu-aberto" id = "menu-
aberto "/ & gt;
& lt; label class = "menu-botão aberto"
para = "menu-aberto" & gt;
& lt; span class = "hambúrguer
hamburger-1 "& gt; & lt; / span & gt;
& lt; span class = "hambúrguer
hamburger-2 "& gt; & lt; / span & gt;
& lt; span class = "hambúrguer
hamburger-3 "& gt; & lt; / span & gt;
& lt; / label & gt; 

14. Termine a navegação

Agora os restantes elementos de navegação podem ser adicionados. Isso também usa a biblioteca de ícones de código aberto de fonte de fonte, que foi adicionada à seção principal para link do CDN desta biblioteca. Cada elemento circular de menu terá um ícone dentro dele.

 & lt; a href = "#" class = "item-item" & gt; & lt; eu class = "fa
FA-car "& gt; & lt; / i & gt; & lt; / a & gt;
& lt; a href = "#" class = "item-item" & gt; & lt; eu
Class = "FA FA-ship" & gt; & lt; / i & gt; & lt; / a & gt;
& lt; a href = "#" class = "item-item" & gt; & lt; eu
classe = "FA FA-MAP" & gt; & lt; / i & gt; & lt; / a & gt;
& lt; a href = "#" class = "item-item" & gt; & lt; eu
classe = "fa fa-mala" & gt; & lt; / i & gt; & lt; / a & gt;
& lt; / nav & gt; 

15. Adicione o novo filtro

Outro filtro será adicionado para este efeito. No SVG, adicione este código após a etiqueta do filtro de fechamento do código adicionado anteriormente. Aqui os efeitos são construídos de uma maneira muito semelhante a anteriormente. Isso permitirá que o menu pareça que as bolhas pegajosas se movem separadas.

 & lt; filtro id = "sombreado-blob" & gt;
& lt; fegaussianblur em = "SourceGraphic"
resultado = "borrão" stddeviation = "20" / & gt;
& lt; fecolormatrix em = "blur" modo =
"valores de matriz" = "1 0 0 0 0 0 1 0 0
0 0 0 1 0 0 0 0 18 -7 "
resultado = "blob" / & gt;
& lt; fegaussianblur em = "blob"
stddeviation = "3" result = "Shadow" / & gt;
& lt; fecolormatrix em = "sombra" modo =
"Matrix" Valores = "0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 1 -0.2 "
Resultado = "Shadow" / & gt; 

16. Termine o filtro

O restante do filtro é adicionado aqui, que completa o efeito que será colocado em cada círculo dos itens de menu. Isso fará com que os elementos tenham o efeito de blob líquido adicionado. Salve esta página e, em seguida, mude para o arquivo 'design.css'.

 & lt; feoffset em = "sombra" dx = "0" dy = "2"
resultado = "Shadow" / & gt;
& lt; fecomposite in2 = "Shadow" em = "blob"
resultado = "blob" / & gt;
& lt; fecomposite in2 = "blob"
em = "Resultado" SourceGraphic "=" Mix "/ & GT;
& lt; / filtro & gt; 

17. Aplique o filtro

O código CSS agora pode ser adicionado aos diferentes design.css. , apenas para manter todos os css de navegação juntos no mesmo lugar. Algum código foi adicionado, mas aqui o filtro é aplicado ao menu, que será um menu fixo para que esteja presente na tela em todos os momentos.

 .menu {
Filtro: URL ("# sombreado-blob");
Posição: fixo;
PADDING-TOP: 20px;
preenchimento - esquerda: 80px;
Largura: 650px;
Altura: 150px;
Caixa-dimensionamento: border-box;
Tamanho da fonte: 20px;
Alinhamento de texto: esquerda;
} 

18. Faça o menu funcionar

O menu está definido para virar invisível quando o menu está aberto. O elemento Hover de cada um dos itens de menu é criado para que haja uma alteração quando o usuário pair sobre isso. Cada criança do menu recebe uma transição de 0,4 segundos quando os itens do menu estão retornando à sua posição original.

 .menu-aberto {
Mostrar nenhum;
}
.menu-item: pairar {
Fundo: # 47959F;
Cor: # B2F0F8;
}
.menu-item: nth-criança (3), .menu-item: nth-
criança (4), .menu-item: nth-criança (5), .menu-
Item: nth-criança (6) {
Transição - Duração: 400ms;
} 

19. Adicione um hambúrguer

O ícone do hambúrguer é elevado acima dos outros elementos mudando sua z-index. . O menu cresce quando o usuário passa por isso, e clicar no menu agora obterá o hambúrguer para animar de três linhas de um hambúrguer para um 'x', indicando a opção para remover o menu.

 .menu-aberto-botão {
Z-index: 2;
Função de temporização de transição: CUBIC-
Bezier (0,175, 0,885, 0,32, 1,275);
Transição - Duração: 400ms;
Transform: escala (1.1, 1.1) translate3d
(0, 0, 0);
Cursor: Ponteiro;
}
.Menu-Open-Button: Hover {
Transform: escala (1,2, 1.2) translate3d
(0, 0, 0);
}

20. Mova os elementos

O primeiro item de menu é, na verdade, o terceiro filho do menu, pois há uma caixa de seleção e o hambúrguer antes dela. Adicionando isso permite que o primeiro elemento de menu se mova para a posição quando o menu for clicado pelo usuário. Cada elemento de menu sairá com um momento ligeiramente mais longo.

.menu-aberto: verificado + .menu-botão aberto {
Função de temporização de transição: linear;
Transição - Duração: 400ms;
Transform: escala (0,8, 0,8) translate3d
(0, 0, 0);
}
.menu-aberto: verificado ~ .menu-item {
Função de temporização de transição: CUBIC-
Bezier (0,165, 0,84, 0,44, 1);
}
.menu-aberto: verificado ~ .menu-item: nth-criança (3) {
Transição - Duração: 390ms;
Transformar: translate3d (110px, 0, 0);
} 

21. Abordar o movimento restante

Os elementos de menu restantes são movidos com velocidades diferentes. Isso permite que os elementos fiquem juntos nos estágios iniciais da animação, o que dará a aparência líquida blobby, usando o filtro SVG. Salve os documentos e veja os resultados concluídos no seu navegador.

 .menu-aberto: verificado ~ .menu-item: nth-criança (4) {
Transição - Duração: 490ms;
transformar: translate3d (220px, 0, 0);
}
.menu-aberto: verificado ~ .menu-item: nth-filho (5) {
Transição - Duração: 590ms;
Transformar: translate3d (330px, 0, 0);
}
.menu-aberto: verificado ~ .menu-item: nth-criança (6) {
Transição - Duração: 690ms;
Transformar: translate3d (440px, 0, 0);
} 

Este artigo foi originalmente publicado na revista Creative Web Design Web designer . Comprar edição 283 aqui ou Inscreva-se no web designer aqui .

Artigos relacionados:

• Animar svg com javascript
• O guia completo para o SVG
• SuperCharge SVG Animações com GSAP