Contente
- Construindo um filtro de brilho
- Criando um efeito desfocado
- Construindo um efeito cinzelado
- Criação do mapa de relevo
- Criando uma aparência dourada em relevo
- Criação da sombra projetada
Usar filtros CSS para aprimorar seu conteúdo faz seu site realmente chiar. O que é menos conhecido é que você pode construir primitivos incríveis combinando componentes de filtro SVG em um filtro CSS sofisticado que fará seu site se destacar da multidão. Este tutorial orienta você na construção de um filtro de vários estágios combinando iluminação, desfoque e ruído para criar um efeito 3D impressionante em seu conteúdo de texto.
- Baixe os arquivos de origem para este tutorial.
Os filtros CSS são uma ótima ferramenta para mudar a forma como o conteúdo é exibido no site. Os efeitos predefinidos são construídos a partir de blocos de construção simples e são ótimos para desfoques, manipulação de cores, entre muitos outros efeitos. Cada um desses blocos de construção é como um tijolo que, quando combinado, constrói uma bela casa. Melhor ainda, você mesmo pode empilhar essas peças e criar seus próprios efeitos de filtro CSS! Como? Bem, estamos prestes a mergulhar e construir alguns efeitos que você pode usar como inspiração para seus projetos futuros.
Começaremos examinando o SVG. SVG é uma linguagem de gráficos vetoriais integrada em todos os navegadores HTML5 modernos. Um de seus recursos mais legais são os filtros. SVG inclui um filtro> elemento e um monte de diferentes primitivos de filtro. Os primitivos de filtro SVG são os tijolos em nosso conjunto de construção. Vamos empilhar vários deles juntos e, em seguida, usá-los no conteúdo de nossa página da web.
Depois de acumular nossos tijolos no efeito de filtro que queremos usar, podemos simplesmente fazer referência à marcação do CSS e usar os seletores de CSS para aplicá-la ao nosso conteúdo. Então, vamos começar com um exemplo bastante simples e, mais tarde, tentaremos algo um pouco mais complexo.
Construindo um filtro de brilho
Neste primeiro exemplo, vamos construir um filtro que podemos usar para criar um brilho. Vamos usar quatro primitivos de filtro diferentes para construir nosso filtro de brilho FeGaussianBlur (que cria um efeito de desfoque), FeFlood (que preenche uma área com uma cor sólida), feComposite (que mistura pixels) e FeMerge (que mescla o conteúdo filtrado com nosso texto original para produzir o resultado final).
A primeira coisa que queremos para nosso texto brilhante é tirar um instantâneo do texto e convertê-lo em branco (já que mais tarde usaremos o texto branco para criar o efeito de brilho). O código do filtro SVG para criar o texto em branco é este:
filter id = ”white”> feFlood flood-color = ”white” /> feComposite in2 = ”SourceAlpha” operador = ”in” result = ”white” /> / filter>
Este filtro contém dois blocos de construção. O primeiro é o FeFlood efeito de filtro que preenche a área afetada pelo filtro com branco (os filtros usam uma área de imagem retangular fora da tela para criar cada efeito na cadeia de filtros). O segundo é o feComposite efeito de filtro, que é usado para combinar os pixels do conteúdo original e a saída de outro efeito de filtro usando algum tipo de regra de combinação.
É importante observar aqui que os filtros SVG funcionam em uma ordem fixa, portanto, eles são encadeados em uma sequência. Quando aplicamos esse filtro ao nosso conteúdo, o FeFlood efeito de filtro é executado primeiro, depois o feComposite efeito usa a saída de FeFlood como sua entrada. No caso de feComposite, ele está usando o operador 'in'. Essa é a regra de combinação que diz "criar uma imagem a partir da minha entrada usando apenas pixels que estão dentro do conteúdo original". Portanto, está criando uma interseção na terminologia matemática. O resultado desse filtro é nossa imagem retangular inundada de branco mascarada por qualquer coisa a que seja aplicada.
Nesse caso, obtemos um resultado mascarado de texto branco. A maneira como aplicamos esse filtro ao nosso conteúdo da web é usar um seletor CSS para escolher o conteúdo que queremos ser afetado. Um exemplo disso poderia ser algo como:
.white {-webkit-filter: url (#white); filtro: url (#branco); }
Isso aplicaria o filtro a qualquer coisa com uma classe CSS de 'branco'. Claro, se tentássemos aplicar isso a uma página em branco, pintaríamos de branco em um fundo branco (não muito útil), então vamos adicionar alguma cor de fundo para ver o que obtemos:
.bluebg {cor de fundo: azul claro; } div class = ”bluebg”> h1 class = ”white”> WHITE GLOW FILTER / h1> / div>
Agora que passamos pelas etapas básicas para construir um filtro de dois estágios e aplicá-lo ao conteúdo de texto da nossa página da web, é hora de adicionar mais alguns efeitos.
Criando um efeito desfocado
Para fazer nosso efeito de brilho de texto, precisamos pegar o texto branco de nossa cadeia de filtros acima e desfocá-lo. Isso se tornará a base para o brilho em torno do texto. Para criar a versão desfocada, usamos:
filter id = ”whiteblur”> feFlood flood-color = ”white” /> feComposite in2 = ”SourceAlpha” operador = ”in” /> feGaussianBlur stdDeviation = ”4” /> / filter>
Como você pode ver, usamos um efeito adicional - FeGaussianBlur. Esse efeito pega o texto branco que criamos com nosso filtro anterior e o torna confuso usando esta marcação:
.whiteblur {-webkit-filter: url (#whiteblur); filtro: url (#whiteblur); } div class = ”bluebg”> h1 class = ”whiteblur”> WHITE GLOW FILTER / h1> / div>
Precisamos melhorar o resultado desfocado para ficar um pouco mais claro. Para fazer isso, vamos usar o feComponentTransfer efeito. Esse é um efeito de filtro que nos permite brincar com a cor e os canais alfa em nossa imagem fora da tela de todas as maneiras.
Vamos iluminar a imagem desfocada, modificando o canal alfa. Então, agora nossa cadeia de filtros se parece com:
filtro id = ”transferência branca”> feFlood flood-color = ”branco” /> feComposite in2 = ”SourceAlpha” operador = ”in” /> feGaussianBlur stdDeviation = ”4” /> feComponentTransfer> feFuncA type = ”linear” declive = ”3 ”Interceptar =” 0 ”/> / feComponentTransfer> / filtro>
Você notará que usamos o feFuncA efeito, que está modificando o canal alfa multiplicando seu valor por três (o argumento de inclinação).
Em seguida, aplicamos esse filtro usando a marcação conforme mostrado abaixo:
whitetransfer {-webkit-filter: url (#whitetransfer); filtro: url (#whitetransfer); } div class = ”bluebg”> h1 class = ”whitetransfer”> WHITE GLOW FILTER / h1> / div>
Tudo o que precisamos fazer é combinar os resultados do nosso efeito de filtro com o texto original ao qual o aplicamos usando o FeMerge efeito de filtro.
A versão final de nossa cadeia de filtros acaba parecendo:
filter id = ”whiteglow”> feFlood flood-color = ”white” /> feComposite in2 = ”SourceAlpha” operador = ”in” /> feGaussianBlur stdDeviation = ”4” /> feComponentTransfer> feFuncA type = ”linear” declive = ”3 ”Intercept =” 0 ”/> / feComponentTransfer> feMerge> feMergeNode /> feMergeNode em =” SourceGraphic ”/> / feMerge> / filter>
E então podemos aplicá-lo à nossa marcação:
.whiteglow {-webkit-filter: url (#whiteglow); filtro: url (#whiteglow); } div class = ”bluebg”> h1 class = ”whiteglow”> WHITE GLOW FILTER / h1> / div>
Construindo um efeito cinzelado
Este segundo exemplo usa uma série de efeitos de filtro para criar um efeito esculpido de aparência 3D a partir de nosso conteúdo de texto. Os efeitos de filtro SVG usados aqui incluem ruído aleatório, morfologia, iluminação e muito mais. Não se preocupe, eles parecem assustadores, mas são realmente fáceis de usar.
A forma como este filtro funciona é combinando três etapas funcionais, cada uma das quais usa vários efeitos de filtro diferentes. Para que funcione, simplesmente fazemos o seguinte:
- Converta uma imagem em um 'mapa de relevo' (consulte a página ao lado para obter mais informações).
- Crie uma aparência em relevo de nosso texto original.
- Crie uma sombra projetada que aprimore nossa aparência 3D.
Criação do mapa de relevo
Mapas de relevo são usados em jogos 3D. Pense neles como uma textura áspera, como tecido ou uma cadeia de montanhas, onde cada pixel representa uma altura diferente.
Para criar o mapa de relevo, reunimos uma grande quantidade de efeitos de filtro. Aqui está o código de exemplo:
filter id = ”bumps”> feTurbulence type = ”turbulence” baseFrequency = ”0.1” numOctaves = ”2” result = ”texture” /> feMerge result = ”textureAndGraphic”> feMergeNode /> feMergeNode in = ”SourceGraphic” /> / feMerge > feColorMatrix type = ”luminanceToAlpha” in = ”texture” result = ”textureMap” /> feGaussianBlur in = ”SourceAlpha” stdDeviation = ”6” result = ”blur” /> feDiffuseLighting in = ”textureMap” surfaceScale = ”2” lighting- color = ”branco” diffuseConstant = ”1” resultado = ”backgroundDiff”> feSpotLight id = ”spotLight” x = ”50” y = ”50” z = ”150” pointsAtX = ”150” pointsAtY = ”150” pointsAtZ = ” 0 ”specularExponent =” 8 ”/> / feDiffuseLighting> feDiffuseLighting in =” blur ”surfaceScale =” 6 ”lightingcolor =” branco ”diffuseConstant =” 1,2 ”resultado =” foregroundDiffAll ”> feDistantLight id =” distanceLight ”azimute =” - 135 ”Elevação =” 40 ”/> / feDiffuseLighting> feComponentTransfer> feFuncR type =” gama ”amplitude =” 1 ”expoente =” 3 ”offset =” 0 ”/> feFuncG type =” gama ”amplitude =” 1 ”expoente =” 3 "deslocamento =" 0 "/> tipo feFuncB = amplitude" gama "=" 1 "expoente =" 3 "deslocamento =" 0 " /> / feComponentTransfer> feComposite operator = ”in” in2 = ”SourceAlpha” /> feConvolveMatrix order = ”3” kernelMatrix = ”0.0625 0.0625 0.0625 0.0625 0.5 0.0625 0.0625 0.0625 0.0625” result = ”foregroundDiff” /> / filter>
Adicionamos alguns novos blocos de construção: feTurbulência, feColorMatrix, feDiffuseLighting e feSpotLight. Os detalhes exatos de todos os parâmetros desses filtros estão um pouco além deste tutorial, mas você terá uma boa ideia de como ajustar os efeitos.
Tente pegar este filtro e aplicá-lo a esta marcação:
.bumps {-webkit-filter: url (#bumps); filtro: url (#bumps); } div> h1> EFEITO CHISELLED / h1> / div>
Criando uma aparência dourada em relevo
Para fazer uma bela versão dourada do nosso texto estilizado com uma bela aparência 3D, usamos mais alguns efeitos de filtro com o uso do feComponentTransfer efeito junto com um pouco mais feComposite e FeBlend efeitos.
O FeBlend efeito aplica modos de mistura de cores que são usados em muitos aplicativos de desktop como Photoshop e Inkscape, que permitem que efeitos complexos de mistura de cores sejam usados para todos os tipos de resultados agradáveis. No caso do filtro dourado, começamos alterando a cor de preenchimento de nosso texto original para ouro usando a propriedade CSS color. Então nós aplicamos FeBlend usando 'tela' e 'multiplicação', o que nos permite combinar as cores de cada camada e multiplicar os valores de cor dos pixels em cada uma das imagens de entrada do filtro. O código para gerar a aparência dourada em relevo está disponível para download aqui.
Criação da sombra projetada
Finalmente, para dar ao nosso texto estilizado uma aparência 3D realmente agradável, podemos criar uma sombra usando efeitos de filtro. Para criar a sombra que usamos feMorfologia (que dilui ou corrói a imagem de entrada), FeGaussianBlur (que usamos para o exemplo de brilho), feOffset (que muda uma imagem intermediária) e nosso confiável feComposite para colocar tudo junto novamente.
O código do efeito do filtro para a sombra projetada pode ser baixado aqui. Em seguida, aplicamos o resultado à nossa marcação:
.bumps {-webkit-filter: url (#bumps); filtro: url (#bumps); } div class = ”bumps”> h1> EFEITO CHISELLED / h1> / div>
O que é ótimo sobre os efeitos de filtro é que eles são limitados apenas pela sua imaginação. Experimente todos os blocos de construção do efeito de filtro SVG e combine-os da maneira que desejar para criar todos os tipos de cadeias de filtro que você pode usar por meio de CSS.
Usar filtros CSS pode fazer você se destacar da multidão com efeitos visuais impressionantes e atraentes para fazer seu site ser notado.
Palavras: Alex Danilo
Este artigo apareceu originalmente na edição 250 da net magazine.
