Pagina inicial » Codificação » Propriedade de imagem de borda CSS3 Fazendo fotos muito legal!

    Propriedade de imagem de borda CSS3 Fazendo fotos muito legal!

    Este artigo faz parte do nosso "Série de tutoriais HTML5 / CSS3" - dedicado a ajudar a torná-lo um melhor designer e / ou desenvolvedor. Clique aqui para ver mais artigos da mesma série.

    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