CSS

Efeito Serra com Css3

Publicado por antlou em 13/06/2017

Hoje vou mostrar como criar uma borda serrilhada somente com o poder do CSS3.

Este efeito poderá ser bem útil para aplicar num layout.

Este efeito poderá trabalhar em qualquer browser actual como por exemplo Internet Explorer, Firefox, Opera...

Resultado:

- Efeito serrilhado -

Vamos dar início criando o nosso elemento.

Observe com atenção as regras CSS a seguir e na sequência explicarei as declarações mais relevantes de cada uma das regras.

Primeiro vou colocar um estilo no blockquote sómente para limitar o comprimento junto com um fundo de cor cinza.
Depois vamos passar para a tarefa mais elaborada - a aplicacao do linear-gradiente.

Neste exemplo vou utilizar o “blockquote” mas podem adicionar qualquer outro elemento html que possa conter texto.

Este efeito poderá trabalhar em qualquer browser actual como por exemplo Internet Explorer, Firefox, Safari, Opera...

efeito_serra.html



    <!--
    ********************************************
    * Efeito serrilhado aplicado num bockquote                                      
    * Author:antlou                            
    * Version:1.0                              
    * Date:12/06/2017                          
    ********************************************
    -->
    
    <style>
    blockquote {
    background: gray;
    width: 210px;
    text-align: center;
    position: relative;
    padding: 10px 5px;
    margin: 0px 10px;
    }
    
    *serrilhado inferior */
    blockquote:after {
    content:"";
    display:block;
    position: absolute;
    width: 100%;
        /*comprimento total do serrilhado*/
    max-width:230px;
    height: 29px;
    right: 0;
    /* posicao do serrilhado */
    bottom: -24px;
    left: 0;
    background:
    linear-gradient(-45deg, transparent 70%, gray 75%);
    linear-gradient( 45deg, transparent 70%, gray 75%);
    background-repeat: repeat-x;
    background-size: 25px 20px, 25px 20px;
    background-position: center;
    }
    
    /* serrilhado superior */
    blockquote:before {
    content:"";
    display:block;
    position: absolute;
    width: 100%;
    max-width:220px;
    height: 29px;  
    right: 0;
    /* posicao do serrilhado */
    top: -4;
    left: 0;
    background:
    linear-gradient(-45deg, transparent 70%, white 75%);
    linear-gradient(45deg, transparent 70%, white 75%);
    background-repeat: repeat-x;
    background-size: 25px 20px, 25px 20px;
    background-position: center;
    }
    </style>

        <blockquote>
            Efeito serrilhado - Efeito serrilhado
        </blockquote>

Vou detalhar de uma maneira simples.

Como viram eu adicionei a marcação “blockquote:after”.
Significa que “APÓS” o blockquote ele vai aplicar o efeito que foi determinado.

O blockquote:before significa que irá aplicar o efeito “ANTES” do blockquote.

É também muito importante que seja adicionado o content:” “; porque é com ele que o código criará um pseudo-elemento vazio no qual aplicarei a borda serrilhada.

Para que o height funcione corretamente precisamos colocar a marcação como display: bock.
Para determinar o posicionamento 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.

Observe as declarações para a propriedade background porque é aqui que a "magia" ocorre.

Agora a parte de mais chata do código é a aplicação do line-gradient.

Para obter o efeito a propriedade background-repeat foi definida com valor para repetição no eixo x, ou seja, ele vai estender o serrilhado na horizontal.

A propriedade background-size com os valores de largura 25px e altura 20px definem o tamanho de cada um dos "triângulos" do serrilhado.

A propriedade background-position faz com que a borda seja aplicada de modo a se distribuir de forma simétrica em relação ao eixo mediano vertical do elemento.

voltar para o topo ↑

Download Código

Espero ter sido útil e motivados a fazer mais experiências.
Deixe aqui a sua avaliação.

1 votos - 5 pontos - 20 downloads
Média : 5,000

Infoscript - Desenvolvimento de websites, e-commerce e programação

Infoscript tem soluções para desenvolvimento web e programação para aproximar os seus clientes às necessidades atuais do mercado.
O design de produto, a criação de websites e lojas online entre outros, são os principais serviços que temos para lhe oferecer.
Contate-nos através do endereço geral@infoscript.pt
Nós teremos uma solução para si à medida.