Hoje eu vou mostrar para vocês como criar borda serrilhada somente com CSS3, normalmente para realizar esse efeito de serrilhado precisamos fazer com uma imagem de background e as vezes temos que adicionar em um objeto separado para aplicar esse efeito, mas nesse tutorial eu vou mostrar para vocês como fazer o mesmo efeito somente com o poder do CSS3 em um único objeto só.
Aviso: Essa tutorial só funciona nos browsers mais atuais, porque vamos utilizar mascações como o “linear-gradient” e o mesmo não irá funcionar no IE9 para baixo.
Vamos dar início criando o nosso objeto, nesse exemplo eu vou utilizar o “blockquote” mas vocês podem adicionar em qualquer outro objeto que possa envolver um bloco de texto.
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue massa nec velit tincidunt tincidunt. Sed sit amet ullamcorper tellus. </blockquote>
Com o nosso bloco de texto criado vamos passar para a parte do CSS, primeiro de tudo eu vou colocar um estilo no blockquote somente para limitar a largura dele junto com a cor branca:
blockquote {
width: 336px;
background: #fff;
padding: 10px 5px;
margin: 0 auto;
}
Agora vamos passar para a parte mais complicada, que vai ser a parte da aplicação do linear-gradient:
blockquote:after {
content: "";
display:block;
position: relative;
width: 346px;
bottom: -34px;
left: -5px;
height:29px;
background: -webkit-linear-gradient(45deg, transparent 70%, white 75%) 0 50%, -webkit-linear-gradient(130deg, transparent 70%, white 75%) 0 50%;
background: -moz-linear-gradient(-45deg, transparent 70%, white 75%) 0 50%, -moz-linear-gradient(45deg, transparent 70%, white 75%) 0 50%;
background: -o-linear-gradient(-45deg, transparent 70%, white 75%) 0 50%, -o-linear-gradient(45deg, transparent 70%, white 75%) 0 50%;
background: -ms-linear-gradient(-45deg, transparent 70%, white 75%) 0 50%, -ms-linear-gradient(45deg, transparent 70%, white 75%) 0 50%;
background: linear-gradient(-45deg, transparent 70%, white 75%) 0 50%, linear-gradient(45deg, transparent 70%, white 75%) 0 50%;
background-repeat: repeat-x;
background-size:25px 20px, 25px 20px;
}
Eu vou tentar detalhar de um jeito bem simples para vocês o que foi feito acima.
Como vocês viram que eu adicionei a seguinte marcação “blockquote:after” esse :after significa que “APÓS” o blockquote ele vai aplicar o efeito que foi determinado acima, mas se eu tivesse colocado :before ele iria adicionar o efeito “ANTES” do blockquote.
É muito importante que seja adicionado o content: ” “; porque é com ele que o código vai determina que terá um “espaço em branco” e assim podemos aplicar uma altura para o objeto.
Para que o height funcione corretamente precisamos colocar a marcação como display: bock; e já para determinar o posicionamento que ele será apresentado temos que aplicar o position: relative; junto com o o bottom e o left.
Aviso: O bottom e left pode variar dependendo do tamanho do seu objeto.
Agora é a parte de mais chatinha do nosso código é a aplicação do line-gradient, como vocês podem ver ele é replicado 5 vezes, por causa dos diferentes browsers:
-webkit-linear-gradient = /* WebKit browsers */ -moz-linear-gradient = /* Mozilla Firefox 4 to 18 */ -o-linear-gradient = /* Opera */ -ms-linear-gradient = /* Internet Explorer 10+ */ linear-gradient = /* Mozilla Firefox 19+ */
Aviso: Poderá ter variações o posionamento “%” para cada um dos browsers.
Eu vou especificar para vocês o modelo do Mozilla Firefox:
background: linear-gradient(-45deg, transparent 70%, white 75%) 0 50%, linear-gradient(45deg, transparent 70%, white 75%) 0 50%;
Terá duas aplicações de linear-gradient para cada um deles, a primeira eu apliquei com -45deg “esquerda” e na segunda com 45deg “direita” elas são responsáveis pelo rotação do objeto por isso que tem que ser duas aplicações porque cada uma tem que girar para o inverso da outra, assim dará a aparência de serrilhado.
As partes “transparent 70%” e “white 75%” são responsáveis pela parte de sobriamento do objeto, nelas eu determino a cor do objeto que é “white” junto com a parte da opacidade e altura do sombriamento do objeto.
Já na parte final “0 50%” é responsável pela parte de posicionamento do serrilhado.
Já estamos quase finalizando o nosso tutorial, agora finalizar o CSS vamos aplicar o background-repeat e o background-size:
background-repeat: repeat-x; background-size:25px 20px, 25px 20px;
Aviso: É muito importante que essa parte esteja abaixo da aplicação anterior.
Como vocês viram eu determinei que o background-repeat será somento no eixo x ou seja ele vai repetir somente na horizontal e no background-size eu determinei que a largura será de 25px e a altura de 20px.
Abaixo vocês podem ver o resultado final do nosso tutorial:
https://codepen.io/chrdesigner/full/fzvFp/
Espero que vocês tenham gostado deste post e até breve, por favor se gostou compartilha o post e se tiver dúvida ou sugestão, por favor deixe um comentário. Até Mais…
