Propriedade de imagem de borda CSS3 Fazendo fotos muito legal!
Criar bordas não é novidade em HTML E CSS; Nós conseguimos adicionar bordas desde o começo. Você pode estar familiarizado com bordas sólidas, bordas pontilhadas, bordas tracejadas e assim por diante.
Mas, com a nova propriedade de imagem de borda CSS3, a criação de bordas no elemento HTML está se tornando mais avançada; Bem, basta colocar, agora podemos adicionar uma borda usando uma imagem como a fonte que nos permitirá adicionar bordas mais atraentes. Tudo bem, agora vamos ver como essa propriedade funciona.
Suporte de Sintaxe e Navegador
A imagem da borda em CSS3 é definida usando a seguinte sintaxe abreviada:
border-image: [fonte da imagem] [slice] [width] [outset] [repeat];
A sintaxe acima é a versão oficial do W3C que é suportada apenas no Chrome, enquanto o Opera, Firefox e Safari ainda precisam da versão prefixada (-o-, -moz-, -webkit-), e o Internet Explorer, sem surpresa, não suporta essa propriedade.
Além disso, o [largura] e a [início] valor neste border-image propriedade ainda não são suportados em nenhum navegador, no entanto, o valor de largura pode ser substituído usando o largura de borda propriedade.
Então, em resumo, por enquanto só podemos aplicar o valor de [fonte da imagem], [fatia] e [repetir] .
border-image: [fonte da imagem] [slice] [repeat];
Fatia de Imagem
Antes de prosseguirmos para demonstrar essa propriedade, vamos falar sobre o “fatia de imagem” primeiro, porque é algo novo em declarar uma propriedade. A fatia da imagem aqui definirá o corte da imagem que, respectivamente, pega o ponto de início a partir da parte superior, direita, inferior e esquerda das bordas da imagem, que subsequentemente também dividirá a imagem em nove seções, conforme ilustrado na imagem a seguir..
Na imagem acima, você verá que as seções 1, 3, 7 e 9 vai se tornar os cantos da fronteira, e as seções 2, 4, 6 e 8 vai se tornar a borda ou linha de borda, certificando-se de que a seção onde ela se tornará a borda é repetível ou elástica.
O valor das fatias pode ser declarado com um pixel unidade ou um percentual (%) unidade para medição flexível.
mais referências:
- Fundos e Bordas CSS Nível 3
Criando um quadro de foto
Agora, vamos demonstrar a propriedade em um exemplo real.
Desta vez, vamos implementar o border-image propriedade para criar uma moldura de foto e estaremos usando a imagem abaixo como a fonte. Medimos cuidadosamente a imagem para que ela possa ser corretamente fatiada, repetida e esticada, independentemente da largura do conteúdo e da altura..
Nota: você pode baixar a imagem acima deste link.
Além disso, nesta demonstração, vamos usar este deslumbrante Cinemagraph de From Me to You como a foto.
(Fonte da imagem: De mim para você)
A marcação
A marcação é tão simples como esta:
Não esqueça de substituir o images_2 / css3-border-image-propriedade-making-photos-really-cool_3.jpg com sua própria foto.
Os estilos
E então, vamos dar um quadro usando border-image.
Se você olhar a imagem acima, a largura da nossa imagem é 180px no total. Este valor pode então ser dividido em 6 qual cada divisão sendo 30px; e então vamos cortar a imagem para 30px.
Se você usar o valor length para o slice, você deve excluir o px unidade, uma vez que será traduzido automaticamente para pixel, mas se você decidir usar porcentagem, você ainda precisará adicionar o (%).
Quanto à repetição da imagem, usaremos o padrão; repetir. Alternativamente, você pode usar esticam e não se preocupe, a imagem da borda ainda parecerá graciosa.
img border-image: url ("images / frame.png") 30 repetição; -o-border-image: url ("images / frame.png") 30 repetição; -moz-border-image: url ("images / frame.png") 30 repetição; -webkit-border-image: url ("images / frame.png") 30 repetição; largura da borda: 30px; Além disso, também queremos colocar a imagem no centro da janela do navegador, além de adicionar uma textura de plano de fundo ao documento para torná-lo mais atraente.
html background: url ('images / lightpaperfibers.png'); .wrapper margin: 20px auto; altura: 476px; largura: 675px; texto-alinhar: centro; Tudo bem, acho que terminamos aqui, agora vamos ver em um navegador.
- Demonstração
- Fonte de download
Você sente como se estivesse olhando para uma pintura mágica em Hogwarts??
Pensamento final
este border-image sem dúvida é uma boa adição na família CSS3; não devemos mais nos limitar às simples fronteiras simples.
E neste post, mostramos como podemos criar um quadro de imagem sem nos preocuparmos com o conteúdo ou, neste caso, com as dimensões da foto (largura e altura). A altura e a largura podem ser flexíveis, desde que a fonte da borda seja repetível ou elástica.
Por fim, se você ainda está um pouco confuso sobre border-image, existe uma ferramenta que você pode usar para ajudá-lo a criar um mais facilmente: ferramenta de imagem de borda
