Elementos de largura idêntica – Jacob Filipp

Neste tutorial, pegaremos as bordas gráficas do século XIX e as transformaremos em uma borda CSS repetida para o seu site. A técnica a seguir funcionará para bordas feitas de elementos repetidos quase idênticos. Usaremos o software de ilustração gratuito Inkscape.

O resultado final será esse tipo de borda que preenche perfeitamente o elemento pai, independentemente da largura do pai. Vá em frente e puxe a guia “redimensionar” para torná-la mais larga ou mais estreita:

Seguiremos estas etapas:

• Vetorizando a imagem de uma borda
• Separando cada elemento repetido de seus vizinhos
• Reorganizando os elementos para que possam ser repetidos facilmente usando CSS
• Criando código CSS para garantir que nunca cortaremos nosso elemento intermediário da borda

Obtendo a imagem

Vamos trabalhar com as bordas na Coleção de diversos personagens, vinhetas e enfeites da fundição e impressão de JG Gillé de 1808 – cultivados organicamente e livres de direitos autorais!

Escolha uma borda que seja composta pelo mesma largura personagens se repetindo.

Eu escolhi este para o nosso exercício:

Nós ampliamos e tiramos uma captura de tela.

Vetorização

Transformaremos esta imagem plana em um vetor (SVG) para que possamos separar facilmente as guirlandas e espaçá-las para uma repetição uniforme.

Importe a imagem para o programa Inkscape (embora o Adobe Illustrator também funcione)

Vá para Caminho-> Rastrear para Bitmap

Você acabará com um vetor preto e branco como este:

Separando os elementos

Agora, dividimos esse grande caminho em partes. Vá para Path->Split Path e você terminará com um monte de pequenas porções não sobrepostas.

Você pode ver os contornos azuis mostrando caminhos distintos agora:

Mas observe as setas vermelhas onde algumas das guirlandas se fundiram. Isto se deve à forma como a impressão original foi feita – onde a tinta se sobrepunha entre elementos separados.

Podemos dividir esse caminho mesclado criando um retângulo no topo (mostrado em vermelho), selecionando o retângulo e o caminho, e então indo para Caminho->Diferença para cortar o caminho subjacente, então vá para Caminho->Dividir Caminho para dividi-los em 2 caminhos separados.

Você também pode dividir a forma ao longo de uma curva fina desenhando com a ferramenta Caneta (não feche a curva – apenas pressione ENTER para deixar um segmento de linha). Em seguida, selecione a curva e o caminho subjacente e vá para Caminho->Fratura.

Vá em frente e corte todas as formas umas das outras

Em seguida, selecione os caminhos que compõem cada elemento do padrão (selecione-os e agrupe-os com CTRL+G). Quando terminar de agrupar, você obterá caminhos que correspondem aproximadamente a elementos de padrão individuais:

Fazendo cada guirlanda com a mesma largura

A seguir, queremos que cada elemento seja o mesma largura para que possamos repetir o padrão de forma previsível a cada X pixels.

Descubra uma boa largura e altura médias para um desses elementos. Eu faço isso selecionando um e observando a Largura e a Altura em pixels na barra superior. No exemplo, o elemento repetidor tem 22,924px de largura por 21,815px de altura.

Vamos em frente e fazer cada elemento 22px largo. Selecione um objeto e altere sua largura manualmente para 22px enquanto mantém a altura “travada” na mesma proporção do ícone de cadeado.

Selecione seu único objeto e copie-o. Em seguida, selecione todos os outros objetos:

Vá em Editar->Colar->Tamanho Separadamente. Isso dará a todos eles a mesma altura e largura do “objeto de referência” que você acabou de copiar. Esta é apenas uma maneira rápida de forçar todos eles a terem a mesma largura – provavelmente existem outras maneiras de fazer a mesma coisa.

Então vamos para Objeto->Alinhar e Distribuir->Grade

As configurações na captura de tela irão distribuí-las horizontalmente, sem espaços entre elas. Se o seu padrão for do tipo que fica bem com espaços entre os elementos, você pode inserir 1 ou 2 px no campo “X:”.

Aplicamos a grade e obtemos elementos de mesma largura e altura, tocando em:

Você pode ajustar a altura e o deslocamento vertical para quebrar um pouco o padrão, se desejar:

Dê a eles a cor de preenchimento desejada e exporte como “Plain SVG”

Criando CSS que nunca corta o elemento intermediário

A seguir, configuraremos o padrão SVG como um plano de fundo repetitivo em um

elemento. Se simplesmente deixarmos o padrão se repetir em 100% da largura do elemento, ele geralmente cortará o meio do elemento:

A parte principal do nosso CSS: apenas deixar

têm um valor de largura múltiplo de 22px (a largura de cada elemento repetido). A largura nunca será definida com um valor que corte um elemento.

Podemos fazer isso com CSS round() função:

width: round(down,100%,22px);

Acima, estamos definindo a largura do elemento para 100% de seu pai, mas arredondando-o abaixo para o múltiplo mais próximo de 22px.

Aqui está a aparência do código completo, com a declaração “imagem de fundo”, repetição horizontal e largura:

hr {
		width: round(down,100%,22px);
		background-image: url( 'exported-image.svg' );
		background-repeat: repeat-x;
		height: 25px;
		border: 0;
	}

Nota: se o

elemento tem um largura máxima declarado a montante, ainda poderá criar problemas de corte. A largura máxima sempre tem precedência sobre a largura arredondada que definimos aqui e corta a borda repetida de qualquer maneira.

Você obterá efeitos de corte como este:

Uma solução é cercar seu

elemento em um

A postagem mensal do blog em sua caixa de entrada é como uma desintoxicação: