Criar efeitos de colagem no navegador com CSS

Sep 11, 2025

Como

Se você já desejou que pudesse replicar os efeitos de um tradicional máquina de colagem na tua layouts de site , este é o tutorial para você.

O Tutorial Web Design vai olhar para três propriedades CSS: Imagem de máscara , Clip-path e Forma-fora . Mesmo se você os usou, não se preocupe. Eu mostrarei exemplos que ajudarão você a criar efeitos que você provavelmente não viu em muitos sites.

Procurando por um tipo diferente de tutorial? Ver Como fazer uma colagem de fotos no Photoshop . E para guias úteis, veja a nossa escolha do topo Construtor de sites e hospedagem na web. serviço.

18 principais exemplos de animação CSS

Minha maior inspiração em termos de uso das propriedades mencionadas é uma colagem tradicional. Eu queria saber se era possível criá-los em um navegador da Web, sem usar os editores ou softwares gráficos. Com a magia do CSS, é totalmente factível! Outro bônus de criá-los com código está sendo escalável, animado e interativo. Antes de começar, certifique-se de ter o seguinte:

Você precisará:

Suas ferramentas favoritas do desenvolvedor do navegador da Web - eu recomendo usar o Google Chrome, pois suporta todos os recursos que uso neste tutorial
Um editor de código
Ativos como imagens ou arquivos SVG - você pode baixar os que estamos usando neste tutorial aqui

Imagens de máscara que se sobrepõem ao texto

CSS masks example — As máscaras CSS permitem que você crie efeitos especiais - como ativar uma posição de site para aparecer e desaparecer seletivamente à medida que o usuário rola para cima e para baixo na página (contraste esta imagem para a acima)

Mascaramento é o primeiro recurso que gostaria de te mostrar. Isso ajuda a construir formas e layouts mais criativos na Web informando ao seu navegador que os elementos de ativos devem ser visíveis. O mascaramento pode ser feito de três maneiras diferentes: usando uma imagem raster (que está no formato PNG com peças transparentes); Gradientes CSS; ou elementos svg. Note que, ao contrário de uma imagem típica raster, a SVG pode ser dimensionada ou transformada sem uma perda significativa na qualidade.

O que eu gosto especialmente em mascarar é a sua capacidade de aplicar as mesmas propriedades que fundo - Podemos definir a posição, o tamanho e a repetição de uma máscara, por exemplo, usando: MASK-Repetir: não repetir e Tamanho da máscara: capa .

Graças ao mascaramento CSS, podemos criar efeitos mais sofisticados na web. Um deles pode ser encontrado em nosso exemplo, onde partes de uma imagem cobrem algum texto; Quando um usuário rola para cima e para baixo a página algumas partes do texto são mostradas / ocultas. Isso dá a impressão de que o título da página está localizado atrás das montanhas. Para criar este efeito, alguns truques são necessários e a aplicação inteligente das máscaras CSS nos ajudará a conseguir isso.

Vamos criar um cabeçalho com uma imagem de fundo selecionada e dois cabeçalhos dentro. Um deles será o principal (primeiro nível de rubrica).

 & lt; cabeçalho e gt;
        & lt; h3 & gt; isto é & lt; / h3 & gt;
        & lt; h1 & gt; & lt; span & gt; minha aventura & lt; / span & gt; & lt; / h1 & gt;
& lt; / header & gt;

O texto do cabeçalho será mantido no & lt; span & gt; marcação. Não é uma coisa comum, mas, neste caso, estamos aplicando mascaramento para a rubrica, não para o recipiente.

 cabeçalho {
    Largura: 100VW;
    Altura: 80vh;
    top: 0;
    Esquerda: Auto;
    Antecedentes: URL (../ images / paise.jpg) Centro Top sem-repetição;
    Fundo de tamanho: capa;
}
h1 {
    máscara: url (../ imagens / mask.svg # maskid);
    -webkit-máscara: url (../ imagens / paisagem-mask.png)
Centro top sem repetição;
    Tamanho de máscara: capa;
    -webkit-máscara-tamanho: capa;
    Largura: 100VW;
    Altura: 80vh;
    cor: #fff;
    Tamanho da fonte: 100px;
    Posição: Relativo;
}
H1 Span {
    Posição: fixo;
    Exibir: bloco inline;
    Alinhamento de texto: centro;
    Font-família: 'Libre Baskerville', Serif;
    Largura: 100VW;
    TOP: 80px;
    Estilo de fonte: itálico;
}

Cortar imagens usando recorte de css

CSS clipping example — Caminhos de recorte permitem cortar a imagem da planta neste exemplo

Vamos explorar outro exemplo e descubra mais sobre o recorte de CSS. Em suma, o recorte define qual área de imagem deve ser visível. Recorte é semelhante a cortar pedaços de papel. O limite da forma é chamado de caminho de clipe: qualquer coisa fora do caminho será escondida, enquanto qualquer coisa dentro do caminho será visível. Com um caminho de clipe, você pode remover o fundo da sua imagem, em vez de usar arquivos PNG pesados. Para isso, precisamos já ter preparado a forma para o corte.

O objetivo neste exercício é cortar a planta fora da imagem, removendo o fundo. Podemos copiar o código SVG do nosso arquivo e colá-lo para um documento HTML. O caminho do clipe deve ser colocado dentro & lt; defs & gt; & lt; / defs & gt; Tag.

 & lt; svg & gt;
  & lt; defs & gt;
      & lt; clippath id = "clip-plant" & gt;
     & lt; path d = "M293.2.524.8C0,3.3,0 ... [e mais números]" & gt;
     & lt; / clippath & gt;
  & lt; / defs & gt;
& lt; / svg & gt;
& lt; div classe = "planta" & gt; & lt; / div & gt;

Mais tarde podemos facilmente referenciar o caminho definido no código SVG adicionando um URL. função.

 .plant {
    Altura: 700px;
    Background-Image: URL (../ images / plant.jpg);
    Fundo de tamanho: capa;
    Posição: Relativo;
    Fundo-Repetir: Não repetir;
    -Webkit-clip-path: URL ("# planta clip");
    Clip-Path: URL ("# clip-plant");}

Pense fora da caixa

clipping in CSS example — Você pode usar **forma-dentro** e **Forma-fora** Para criar todos os tipos de formas

Quem disse que os recipientes de texto sempre precisam ser retangulares? O conteúdo pode ser cortado em todos os tipos de formas diferentes, aplicando Forma-fora e forma-dentro Propriedades que permitem envolver seu conteúdo em torno de caminhos personalizados no CSS.

Então, como isso funciona? Simplesmente aplicar Forma-fora para a imagem ou recipiente flutuante. É importante notar que o flutuador Propriedade e as dimensões do elemento - altura ou largura - devem ser definidas, caso contrário, não funciona. Você pode usar o URL () função, que permite a Forma-fora Propriedade para definir uma forma de elemento com base no caminho de um arquivo SVG.

 .a-letra {
    Background-Image: URL ('../ imagens / gold-bg.jpg');
    Fundo de tamanho: 1000px;
    -Webkit-Mask-Image: URL ('../ imagens / a-letter2.svg');
    -webkit-máscara-composto: saw-out;
    -webkit-máscara-repete: não repetir;
    -Webkit-mask-size: 300px;
    Largura: 100%;
    Altura: 60vh;
    Posição: Relativo;
    Top: 0px;
    Anexo de fundo: fixo;
    flutuar: esquerda;
    Exibir: bloco inline;
    Largura: 310px;
    Margem de forma: 23px;
    Forma-fora: URL ('../ imagens / mask.svg');
}

O Forma-fora propriedade não muda nada sobre um elemento diferente da sua área de flutuação. Isso significa que quaisquer imagens de bordas e fundo não se adaptarão à forma criada no elemento. Esta é a razão pela qual também precisamos aplicar o Imagem de máscara propriedade - para cortar o fundo do elemento para combinar com a forma definida.

Uma coisa importante a notar é que o Forma-fora O recurso funciona apenas com arquivos habilitados para o CORS. CORS significa compartilhamento de recursos de origem cruzada.

Neste caso particular, a melhor maneira de visualizá-lo é usar localhost, caso contrário, não funcionará se você apenas abri-lo no seu navegador.

Ao experimentar, por favor, tenha em mente que nem todos os recursos mencionados são suportados por todos os navegadores, por isso vale a pena conectá-los aqui . O exemplo mais recente não funciona no Firefox, no Opera e ou seja, mas esperamos estar disponível em breve para todos os navegadores. E se você tem muitos documentos para armazenar para o seu projeto, mantenha-os seguros em segurança armazenamento na núvem .

Consulte Mais informação:

Comece com fontes variáveis em CSS
Um guia abrangente para usar a grade CSS
Como as novas regras de CSS tentarem agora

Criar efeitos de colagem no navegador com CSS

Você precisará:

Imagens de máscara que se sobrepõem ao texto

Cortar imagens usando recorte de css

Pense fora da caixa

Como - Artigos mais populares

Como repostar no Instagram

Obtenha mais de grafite com estas dicas

Criar texto 3D no Photoshop: um guia passo a passo

Domine a ciência da otimização da taxa de conversão

Como protótipo de um aplicativo móvel com o Profami Studio

Como pintar miniaturas deliciosas

4 passos para melhor vdm com zbrush

Como esculpir no cinema 4D

Categorias