É possível fazer um efeito de papel rasgado nas bordas da imagem

Question

Mar 30, 2015, 04:40 PM

É possível fazer um efeito de papel rasgado nas bordas da imagem

Atualização 3

Olá pessoal, atualizei ocódigo (http://codepen.io/anon/pen/VYRJLp) e agora as bordas parecem realmente com efeito de papel rasgado. Ele usa SVG a propósito.

O único problema é que não sei como fazer a imagem como plano de fundo do svg AO MESMO TEMPO manter as bordas rasgadas.

Por favor, dê uma olhada. Quaisquer esforços são apreciados.

Atualização 2

Parece que é impossível conseguir esse efeito sem a ajuda do PhotoShop (PS), então eu gostaria de adicionar o PS como parte da solução.

Não sou especialista em PS, mas, pensando bem, acho que há algumas etapas que preciso fazer:

Use PS para criar uma "casca" de papel rasgada, digamos que seja shell.png Ela só deve ter cores nas bordas e a cor deve ser branca; a área interna é transparente, para que possamos colocar a imagem nela.Coloque shell.png em cima da imagem, digamos banner.jpg, o que significa definir o índice z da div que usa shell como imagem de fundo como 1.Use outra div para conter o banner.jpg e defina o índice z abaixo da div da shell.

Perguntas para esta abordagem:

É responsivo?

Caso contrário, é possível torná-lo responsivo? Como eu tenho que fazê-lo funcionar corretamente em dispositivos móveis.

Lembro que vi um site lindamente projetado, há uma imagem no fundo e as bordas dessa imagem parecem efeito de papel rasgado, o que é fantástico!

Pesquisei as perguntas semelhantes aqui, mas verifica-se que os efeitos nas respostas são primitivos, que são linhas pretas robustas muito simples.

O que eu quero:

Quero que essa imagem seja tão larga quanto a tela do dispositivo, o que significa responsivo.As bordas desta imagem parecem papel rasgado.Colocarei essa figura como um banner depois da barra de navegação superior, mas antes do conteúdo.

Deve parecer com a área branca nesta imagem. Mas, no meu caso, precisarei preencher minha foto para substituir a área branca.

Aqui está o meu código: Aviso: neste código, o css usa uma imagem como borda, mas não é o que eu quero. Eu só quero que as bordas sejam efeitos CSS puros (isso é possível?) Portanto, será semelhante a esta (a do lado direito, você pode ver que não há bordas brancas e ásperas)

<div class="row">
    <div id="letter" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

    </div>
</div>

#letter { /*torn paper border*/
    height:450px;
    position:relative;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-image:url('img/background.jpg');
    background-size:cover;
    opacity:0.8;
    border-style: solid; 
    border-width: 40px 40px 40px; 
       -moz-border-image: url('http://news.unchealthcare.org/images/backgrounds/paper.jpg') 80 80 80 repeat; 
    -webkit-border-image: url('http://news.unchealthcare.org/images/backgrounds/paper.jpg') 80 80 80 repeat; 
         -o-border-image: url('http://news.unchealthcare.org/images/backgrounds/paper.jpg') 80 80 80 repeat; 
            border-image: url('http://news.unchealthcare.org/images/backgrounds/paper.jpg') 80 80 80 repeat;
}

Atualizar

Oi pessoal,

Eu acho que encontrei algo bem parecido com o que eu imagino. Aqui está o efeito que eu quero:

leaveComments