Como criar lindas bordas de imagens usando as novas opções da Divi

No tutorial Divi de hoje, mostraremos como criar lindas bordas de imagens no próximo site que você construir. O objetivo deste post é demonstrar como você pode criar belos resultados que combinem com as imagens que você está usando (e com o resto do seu site também).

Com as novas opções do Divi, é mais fácil do que nunca alcançar resultados impressionantes. Você só terá que fazer algumas modificações que mostraremos como fazer e você estará pronto para levar seu design da web para o próximo nível. Todos os 8 exemplos que compartilharemos com você não usarão nada mais do que as opções integradas que o Divi Builder e o Módulo de imagem oferecem.

Espiada

Vamos dar uma olhada nos resultados que você pode esperar desta postagem:

Como criar lindas bordas de imagens usando as novas opções da Divi

Inscreva-se no nosso canal no Youtube

Fundo Gradiente

A primeira possibilidade de obter lindas bordas de imagem é usar apenas um fundo gradiente. Experimentando as várias configurações de fundo gradiente, você pode obter resultados simples, mas elegantes. Mostraremos três exemplos de bordas de imagem que consistem unicamente em um fundo gradiente.

Padrão

O primeiro exemplo que lidaremos é o mais simples e modesto de todos; uma borda de imagem de gradiente padrão. O resultado, vamos mostrar a você como criar se parece com isto:

Guia de Conteúdo

Comece escolhendo um fundo gradiente na guia Conteúdo. Para este exemplo, usamos as seguintes configurações:

• Primeira cor: # 081e8c
• Segunda cor: # 764f9b
• Tipo de gradiente: Linear
• Direção do gradiente: 269 graus
• Posição inicial: 40%
• Posição final: 60%

Guia Design

A próxima e última coisa que você precisa fazer é adicionar um pouco de preenchimento à imagem. É simples assim. Vá para a guia Design e adicione '10px' ao preenchimento superior, inferior, direito e esquerdo.

Lados

Em seguida, temos uma borda da imagem que só aparece no lado esquerdo e direito da imagem. Usar esse tipo de borda da imagem dá um toque extra legal à imagem sem colocar muito foco na própria borda.

Guia de Conteúdo

Para obter esse tipo de borda de imagem, comece adicionando o seguinte fundo gradiente à sua imagem:

• Primeira cor: rgba (255,255,255,0)
• Segunda cor: # 0a8da8
• Tipo de gradiente: Linear
• Direção do gradiente: 166deg
• Posição inicial: 29%
• Posição final: 52%

Guia Design

Na guia Design, a única coisa de que você precisa é '10px' de preenchimento para o lado direito e esquerdo.

One Corner

Continuando, você também pode criar fundos de canto para as imagens em seu site. Esse tipo de borda é excelente para usar quando você deseja enfatizar uma cor que está sendo usada na imagem.

Guia de Conteúdo

Para o terceiro exemplo de imagem, use o seguinte fundo gradiente:

• Primeira cor: rgba (58,8,1,0,58)
• Segunda cor: rgba (41,196,169,0)
• Direção do gradiente: 152deg
• Posição inicial: 34%
• Posição final: 28%

Guia Design

Em seguida, adicione '20px' a cada um dos preenchimentos também.

Borda da imagem e fundo gradiente

Outra possibilidade que você tem é combinar um fundo gradiente com uma borda de imagem. Isso também pode fornecer resultados impressionantes, como você poderá testemunhar nos próximos quatro exemplos.

Gradiente Sutil

A primeira combinação de fundo gradiente e borda da imagem é simples, mas bonita. Usando as mesmas cores para o fundo gradiente e a borda, a borda da imagem de alguma forma parece que está ficando cheia de cor.

Guia de Conteúdo

Comece adicionando as seguintes configurações de fundo gradiente à sua imagem:

• Primeira cor: rgba (255,255,255,0)
• Segunda cor: # 777777
• Tipo de gradiente: Linear
• Direção do gradiente: 180 graus
• Posição inicial: 65%
• Posição final: 78%

Guia Design

Vá para a guia Design e use as seguintes configurações na subcategoria Borda:

• Borda de uso: Sim
• Cor da borda: # 777777
• Largura da borda: 3px
• Estilo de borda: sólido

Por último, adicione um preenchimento de '7px' a todas as opções de preenchimento.

Moldado

A seguir, temos um exemplo que é ótimo para chamar a atenção dos visitantes. A imagem em si contém, neste caso, principalmente cores mais claras, o que cria um bom equilíbrio com a borda mais escura.

Guia de Conteúdo

As configurações de fundo gradiente de que você precisará para essa borda de imagem são as seguintes:

• Primeira cor: rgba (53,0,188,0,1)
• Segunda cor: # 680061
• Tipo de gradiente: radial
• Direção Radial: Centro
• Posição inicial: 80%
• Posição final: 80%

Guia Design

Prossiga para a guia Design e use a seguinte borda:

• Borda de uso: Sim
• Cor da borda: # 9a00bc
• Largura da borda: 1px
• Estilo de borda: sólido

Role para baixo e adicione o seguinte preenchimento à imagem:

• Superior: 7px
• Certo: 5px
• Inferior: 7px
• Esquerda: 5px

Borda Dupla

Usar uma borda dupla em combinação com um fundo gradiente também pode fornecer alguns resultados impressionantes. Dê uma olhada:

Guia de Conteúdo

A cor de fundo gradiente que usamos neste exemplo é a seguinte:

• Primeira cor: rgba (224,43,32,0,61)
• Segunda cor: rgba (12.113.195,0.87)
• Tipo de gradiente: radial
• Direção Radial: Centro
• Posição inicial: 71%
• Posição final: 93%

Guia Design

Continuando, use as seguintes configurações para a subcategoria Fronteira:

• Borda de uso: Sim
• Cor da borda: # f4f4f4 (combinar com a cor de fundo da seção)
• Largura da borda: 8 px
• Estilo de borda: duplo

E adicione '10px' ao preenchimento superior, inferior, direito e esquerdo da imagem.

Triangle Corners

Continuando, você também pode criar alguns pequenos cantos em sua borda usando a opção de fundo gradiente em combinação com uma borda tracejada.

Guia de Conteúdo

Para atingir a borda da imagem que mostramos acima, use as seguintes configurações de fundo gradiente:

• Primeira cor: rgba (163,103,6,0)
• Segunda cor: # e09900
• Tipo de gradiente: radial
• Direção Radial: Centro
• Posição inicial: 97%
• Posição final: 97%

Guia Design

Na guia Design, precisaremos ter as seguintes configurações de borda também:

• Borda de uso: Sim
• Cor da borda: # e09900
• Largura da borda: 2 px
• Estilo da borda: tracejado

Por último, precisaremos de um preenchimento de '8px' para o preenchimento superior, inferior, esquerdo e direito.

Padrão e fundo gradiente

A última possibilidade que queremos destacar é usar um padrão e um fundo gradiente ao mesmo tempo. Isso permite que você brinque com a aparência de suas imagens.

Brincalhão

Essa borda contém um fundo gradiente de duas cores que também são usadas na própria imagem. Ao adicionar também um padrão de fundo, a imagem dá um pouco mais de atmosfera ao seu site.

Guia de Conteúdo

Para o último exemplo, usaremos as seguintes configurações de fundo gradiente:

• Primeira cor: rgba (4,49,96,0,51)
• Segunda cor: rgba (119,74,15,0,51)
• Tipo de gradiente: Linear
• Direção do gradiente: 180 graus
• Posição inicial: 0%
• Posição final: 100%

Guia Design

Em seguida, estamos adicionando um plano de fundo padrão também. O padrão que usamos neste exemplo vem de Toptal. Você pode usar seus padrões para todos os tipos de propósitos, apenas certifique-se de creditá-los em seu código conforme mencionado em seu FAQ. Depois de adicionar o plano de fundo padrão, use as seguintes configurações também:

• Tamanho da imagem de fundo: capa
• Posição da imagem de fundo: centro
• Repetição da imagem de fundo: sem repetição
• Mistura de imagem de fundo: multiplique

A última coisa que você precisa fazer é adicionar um preenchimento de '12px' ao preenchimento superior, inferior, direito e esquerdo de sua imagem.

Pensamentos finais

Neste post, mostramos algumas maneiras diferentes de criar lindas bordas de imagens. Essas opções fornecem uma perspectiva sobre o que você pode fazer com as novas opções do Divi sem usar CSS adicional. Se você tiver dúvidas ou sugestões; certifique-se de deixar um comentário na seção de comentários abaixo!

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!

Imagem em destaque por Mr Aesthetics / shutterstock.com