Siga-nos em...
Follow us on Twitter Follow us on Facebook Watch us on YouTube
Registro

Alpha Servers
Resultados 1 a 2 de 2
  1. #1



    Avatar de Ayrton Ricardo
    Data de Ingresso
    May 2012
    Localização
    Joao Pessoa - PB
    Idade
    28
    Posts
    1.379
    Agradecido
    262
    Agradeceu
    171
    Peso da Avaliação
    26

    Cool Borda da Box arredondada sem img

    Olá galera estou aqui para Postar um tutorialzinho sobre css, creio que muitos já saibam fazer isso, mais eu irei postar mesmo assim ^^' !

    Criando Box com Bordas arredondadas sem Img!

    Vamos lá, irei ultilizar o seguinte código css:


    Código HTML:
    @charset "utf-8";/* CSS Document */
    .bordaBox {   
        bbackground: ttransparent; 
        width:90%;
    }
    .bordaBox .b1, .bordaBox .b2, .bordaBox .b3, .bordaBox .b4, .bordaBox .b1b, .bordaBox .b2b, .bordaBox .b3b, .bordaBox .b4b {
        display:block;
         overflow:hidden;
         font-size:1px;
    }
    .bordaBox .b1, .bordaBox .b2, .bordaBox .b3, .bordaBox .b1b, .bordaBox .b2b, .bordaBox .b3b {
        height:1px;
    }
    .bordaBox .b2, .bordaBox .b3, .bordaBox .b4 {
        background:#000;
         border-left:1px solid #999;
         border-right:1px solid #999;
    }
    .bordaBox .b1 {
        margin:0 5px;
         background:#999;
    }
    .bordaBox .b2 {
        margin:0 3px;
        border-width:0 2px;
    }
    .bordaBox .b3 {
        margin:0 2px;
    }
    .bordaBox .b4 {
        height:2px;
         margin:0 1px;
    }
    .bordaBox .conteudo {
        padding:5px;
        display:block;
         background:white;
         border-left:1px solid #999;
         border-right:1px solid #999;
    }


    Bom é bem básico fazer isto basta criar uma div para a box com a class: bordaBox
    Código HTML:
    <div id="box" class="bordaBox">Exemplo</div>
    Até o momento nenhum efeito foi colocado na div.

    Agora iremos acrescentar o seguinte código a nossa div
    Código HTML:
    <div id="box" class="bordaBox">
    <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><div class="conteudo">
    
    Vejam o Exemplo</div>
    Este código definirá a parte superior da nossa borda.

    Continuando:
    Agora adicionaremos o seguinte código a parte inferior da div
    Código HTML:
    Vejam o Exemplo</div>
     <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></div> 
    Esta parte irá criar a parte inferior da borda.

    Pronto, box com cantos arredondados basta agora você modificar do seu gosto

    Resultado final:

    Espero que ajude vocês


    Minha box:
    ---------------------------------------------------------------------------------------

    Dica do LucasHP

    Estilo (CSS):

    Código HTML:
    @charset "utf-8";
    .box{
        background:#fff;
        border-radius:5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border:1px solid #999;
        border-top:3px solid #333;
        border-bottom:3px solid #333;
        padding:5px 10px;
    }
    Estrutura (HTML):

    Código HTML:
    <div class="box">    Conteudo do box aqui...</div>






    Créditos

    FuryousⱣɃ pelo Tutorial
    CodigoFonte Pelo código css
    Imagens Anexas Imagens Anexas
    Última edição por Ayrton Ricardo; 05-09-2012 às 07:47 AM.

  2. #2

    Avatar de LucasHP
    Data de Ingresso
    Sep 2009
    Localização
    Contagem / MG
    Idade
    30
    Posts
    9
    Agradecido
    2
    Agradeceu
    2
    Peso da Avaliação
    0

    Padrão

    Boa dica, porém hj em dia, não tem a nescessidade dessa 'complicação' toda, nem dessa quantidade de tags / estilos...

    Um meio mais simples:
    Estilo (CSS):
    Código HTML:
    @charset "utf-8";
    .box{
    	background:#fff;
    	border-radius:5px;
    	-moz-border-radius:5px;
    	-webkit-border-radius:5px;
    	border:1px solid #999;
    	border-top:3px solid #333;
    	border-bottom:3px solid #333;
    	padding:5px 10px;
    }
    Estrutura (HTML):
    Código HTML:
    <div class="box">
    	Conteudo do box aqui...
    </div>
    Resultado:
    [Somente usuários registrados podem vem os links. ]
    Atenciosamente,
    LucasHP - Webdesigner
    CTM TEAM - Hidden Content

  3. O Seguinte Usuário Agradeceu LucasHP Por este Post Útil:


 

 

Informações de Tópico

Usuários Navegando neste Tópico

Há 1 usuários navegando neste tópico. (0 registrados e 1 visitantes)

Tópicos Similares

  1. |Pedido| DLL minimize com borda
    Por sfs no fórum Pedidos
    Respostas: 0
    Último Post: 03-10-2015, 06:36 PM
  2. |Tutorial| Borda Modela
    Por Leo Lima no fórum Intermediários
    Respostas: 2
    Último Post: 09-01-2011, 03:00 AM
  3. |Download| Borda TECH.
    Por AsR no fórum Intermediários
    Respostas: 4
    Último Post: 15-07-2010, 12:13 AM
  4. |Download| Borda TECH.
    Por AsR no fórum Vídeo-aulas
    Respostas: 4
    Último Post: 15-07-2010, 12:13 AM

Marcadores

Permissões de Postagem

  • Você não pode iniciar novos tópicos
  • Você não pode enviar respostas
  • Você não pode enviar anexos
  • Você não pode editar suas mensagens
  •