6 replies to this topic

[haguen]

pessoal como consigo fazer um css para criar o efeito de botões e links do site abaixo:

http://www.deviantart.com/

valew!

[kaduzick]

PEGA O CÓDIGO FONTE DA PÁGINA

[haguen]

mais é muito código! não consegui entender!

[Lengrat]

Olhei o código fonte do Devian e vi que ele é Tableless.
Segue aqui o resultado de uma pesquisa que eu fiz na net.

Cantos arredondados sem TABELAS E SEM IMAGENS:

CSS:

#curve1{
font:9px Verdana, arial, georgia, sans-serif;
width: 150px;
height: auto;
float: left;
background-color : transparent;
margin: 5px 5px 10px 5px;
}
.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12 {
font:1px/1px verdana, arial, georgia, sans-serif;
padding: 0px 0px 0px 0px;
height: 1px;
background-color : Maroon;}
.c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12 {
border-right: 1px solid Maroon;
border-left: 1px solid Maroon;}
.c1{
margin: 0px 10px 0px 10px;
border-right: 3px solid Maroon;
border-left: 3px solid Maroon;}
.c2{margin: 0px 8px 0px 8px;}
.c3{margin: 0px 6px 0px 6px;}
.c4{margin: 0px 5px 0px 5px;}
.c5{margin: 0px 4px 0px 4px;}
.c6{margin: 0px 3px 0px 3px;}
.c7{margin: 0px 2px 0px 2px;}
.c8{margin: 0px 2px 0px 2px; border-right: none; border-left: none;}
.c9{margin: 0px 1px 0px 1px;}
.c10{margin: 0px 1px 0px 1px; border-right: none; border-left: none;}
.c11{ margin: 0px 0px 0px 0px;}
.c12{
font:11px/17px verdana, arial, georgia, sans-serif;
margin: 0px 0px 0px 0px;
padding: 10px 15px 10px 15px;
border-right: none;
border-left: none;
height: auto;
}

HTML:

<div id="curve1">
<div class="c1"> </div> <div class="c2"> </div><div class="c3"> </div><div class="c4"> </div>
<div class="c5"> </div><div class="c6"> </div><div class="c7"> </div><div class="c8"> </div>
<div class="c9"> </div><div class="c10"> </div><div class="c11"> </div><div class="c11"> </div>
<div class="c11"> </div>
<div class="c12">
<!--AQUI VAI O CONTEÚDO-->
</div>
<div class="c11"> </div>
<div class="c11"> </div><div class="c10"> </div><div class="c9"> </div>
<div class="c8"> </div><div class="c7"> </div><div class="c6"> </div><div class="c5"> </div>
<div class="c4"> </div><div class="c3"> </div><div class="c2"> </div><div class="c1"> </div>
</div>

------

No meio todas as DIV´s, colocar o espaço "& nbsp;" (sem aspas)

Edição feita por: Lengrat, 15/08/2005, 16:05.

[Xandão Grunge]

olhem o que achei:

input.button {
border:1px solid;
padding:0 .1em;
cursor:pointer;
border-radius:.4em;
}

Creio que o que destaquei em vermelho seja o que seixa as quinas da borda arredondada.

mas tentei usar esta classe e não tive o resultado esperado. Alguém conhece esta propriedade?

Se alguém souber, poste ai.

[Klaus]

Na verdade, a implementação:

-moz-border-radius

Faz isso, mas só no Mozilla (Firefox)...

[haguen]

isso mesmo pessoal, obrigado por ajudarem, e desculpe por não responder antes, mais percebi que só funcionava no mozilla FireFox mesmo, mais valew a todos!