Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17563
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Divs arredondadas sem figuras

31-12-2007 21:41

Abaixo segue um link de um site onde foi feito uma div com cantos arredondados sem usar figuras.

http://www.cssplay.co.uk/boxes/snazzy2.html

Segue abaixo o exemplo do código:

<style type="text/css"> .xsnazzy h1, .zsnazzy h1 { margin:0; font-size:1.2em; padding:0 10px 5px 10px; border-bottom:1px solid #444; } .xsnazzy p, .zsnazzy p { margin:0; padding:5px 10px; font-size:10px; } .xsnazzy { background: transparent; width:240px; float:left; margin:0 3px; } .xtop, .xbottom { display:block; background:transparent; font-size:1px; } .xb1, .xb2, .xb3, .xb4 { display:block; overflow:hidden; } .xb1, .xb2, .xb3 { height:1px; } .xb2, .xb3, .xb4 { background:#fff; border-left:1px solid #444; border-right:1px solid #444; } .xb1 { margin:0 5px; background:#444; } .xb2 { margin:0 3px; border-width:0 2px; } .xb3 { margin:0 2px; } .xb4 { height:2px; margin:0 1px; } .xboxcontent { display:block; border:0 solid #444; border-width:0 1px; height:auto; } * html .xboxcontent { height:1px; } .color_a { background:#c9ba65; color:#fff; } .color_b { background:#d4d8bd; color:#000; } .color_c { background:#758279; color:#fff; } .color_d { background:#b2ab9b; color:#000; } </style>


<div class="xsnazzy"> <b class="xtop"><b class="xb1"></b><b class="xb2 color_a"> </b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b> <div class="xboxcontent"> <h1 class="color_a">Blah Blah Title</h1> <p>You are not currently logged in.</p> <p>If you don't have a login you can <a href="#nogo">register here</a>.</p> <p>If you have one, then LOGIN <a href="#nogo">here</a>.</p> <p>If you don't know if you should have one - and need convincing that free, confidential, fast and useful is not enough then click <a href="#nogo">here for a demo</a>.</p> </div> <b class="xbottom"><b class="xb4"></b><b class="xb3"></b> <b class="xb2"></b><b class="xb1"></b></b> </div>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Mensagens: 348
Sexo: Masculino
Localização: Paraná/São Mateus do Sul/Brasil
Contato:

Divs arredondadas sem figuras

01-01-2008 22:12

nossa, acabei de testar aki no bloco de notas online
realmente, mto bom e perfeito!!

vlw amigo :)
0
Está precisando de um Website?
Acesse ww.listasms.com/web e faça um orçamento sem compromisso!
Ígor
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17563
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Divs arredondadas sem figuras

02-01-2008 07:45

Como foi feito é o que espanta! :o

Apesar que as bordas estão um pouco tremidas, mas, enfim, está bem legal. :)
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado