• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

kalin

[CSS] <div> com cantos arredondados

74 mensagens neste tópico

É muito fácil obter este estilo só com css:

estilo css:

html {
        height:100%;
margin-bottom:1px;
}
body {
font-family:Arial, Tahoma, Verdana, sans-serif;
font-size: 100%;
font-weight: 400;
background-color: #808080;
text-align: center;/* centraliza a caixa de texto primeira parte */
margin: 0;
padding: 0;
}
div#round {
	width: 350px;
	text-align: left;
	margin: 10px auto 10px;/* centraliza a caixa de texto segunda parte */
	padding: 0;
}
div#round p {
	font-size: 100%;
	font-weight: 400;
	color: #ffffff;
	background: red;
	margin: 0;
	padding: 10px;
}
b.rtop, b.rbottom {
	display: block;
	background: #808080; /*cor branca*/
}
b.rtop b, b.rbottom b{
	display: block;
	height: 1px;
	overflow: hidden;
	background: red;
}
b.r1 {margin:0 5px;}
b.r2 {margin:0 3px;}
b.r3 {margin:0 2px;}
b.rtop b.r4, b.rbottom b.r4 {
margin: 0 1px;
height: 2px;
}

código html para o body:

<div id="round">
<!-- cantos de cima-->
<b class="rtop">
    <b class="r1"></b>
    <b class="r2"></b>
    <b class="r3"></b>
    <b class="r4"></b>
</b>

<p><a href="javascript:history.back(-1)">voltar</a></p>
<p>Algum conteúdo</p>

<!-- cantos de baixo -->
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>

Artigo no Wiki

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Muito interessante, gostei.

Ainda assim, faz-me impressão usar <b> para isto. Além disso, há um pequenino problema com as esquinas arredondadas, porque o fundo não é transparente (o espaço para lá do vermelho, em cada canto, que teve que ser definido como branco). Isto podia notar-se quando o fundo de um elemento-mãe (no caso, body) não fosse de uma só cor (por exemplo, se fosse uma imagem).

No exemplo abaixo corrigi esse pequeno problema e mudei o <b> para span (piquinhices  :P).

O HTML e CSS são válidos, e funciona no IE 7, Firefox 2.005 e Opera 9.22 (os únicos que consegui testar) desde que o doctype seja strict (senão há problemas com o overflow).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Round corners</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
text-align: center;
margin: 0;
padding: 0;
}
div#box {
width: 350px;
text-align: left;
margin: 20px auto 0px;
}

.round span{
display: block;
background: red;
overflow: hidden;
}
.round .r1 {margin:0 5px; height: 1px;}
.round .r2 {margin:0 3px; height: 1px;}
.round .r3 {margin:0 2px; height: 1px;}
.round .r4 {margin:0 1px; height: 2px;}

.conteudo {
background:red;
overflow:hidden;
padding:10px;
}
</style>
</head>
<body>
<div id="box">
    <!-- cantos de cima-->
    <div class="round">
         <span class="r1"></span>
         <span class="r2"></span>
         <span class="r3"></span>
         <span class="r4"></span>
    </div>
    <!-- conteudo -->
    <div class="conteudo">
    <p><a href="javascript:history.back(-1)">voltar</a></p>
    <p>Algum conteúdo</p>
    </div>
    <!-- cantos de baixo -->
    <div class="round">
         <span class="r4"></span>
         <span class="r3"></span>
         <span class="r2"></span>
         <span class="r1"></span>
    </div>
</div>

</body>
</html>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

podiam colocar umas imagens a mostrar o resultado...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

É só escreveres isso no wordpad e gravares como HTML para poderes ver...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
(...)Ainda assim, faz-me impressão usar <b> para isto.(...)

O uso do <b> é fixe porque é um elemento que está a cair em desuso, portanto em termos de estilos estás a vontade, já sabes que á partida os únicos elementos <b> que vais ter vão fazer parte dos cantos redondos.

EDIT: cosmética.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

quando tiver tempo, vou ver se experimento isso, normalmente recorro a imagens para conseguir este efeito, o que dá bastante trabalho, para além de obrigar a usar muitas imagens no site...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

O uso do <b> foi mesmo para só ser usado nos cantos e em mais lado nenhum, quanto à dica do colega Bjecas do fundo ser transparente, posso dizer que ficou bem melhor obrigado.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Muito bom o código.

Facilita no carregamento da página, uma vez que não usa imagens.

Cumps.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Há alguma forma de aumentar a curvatura do canto?

Cumps.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Penso que dá se variarmos estes parâmetros:

.round .r1 {margin:0 5px; height: 1px;}
.round .r2 {margin:0 3px; height: 1px;}
.round .r3 {margin:0 2px; height: 1px;}
.round .r4 {margin:0 1px; height: 2px;}

mas para obter um estilo bem redondo penso que seja necessário usar mais declarações, estive a olhar para o código nifty http://www.html.it/articoli/niftycube/index.html que é bem complicado, mas o estilo obtido também é diferente:

b.niftycorners,b.niftyfill{display:block}
b.niftycorners *{
display:block;
height: 1px;
line-height:1px;
font-size: 1px;
    overflow:hidden;
border-style:solid;
border-width: 0 1px;}

/*normal*/
b.r1{margin: 0 3px;border-width: 0 2px;}
b.r2{margin: 0 2px}
b.r3{margin: 0 1px}
b.r4{height: 2px}
b.rb1{margin: 0 8px;border-width:0 2px}
b.rb2{margin: 0 6px;border-width:0 2px}
b.rb3{margin: 0 5px}
b.rb4{margin: 0 4px}
b.rb5{margin: 0 3px}
b.rb6{margin: 0 2px}
b.rb7{margin: 0 1px;height:2px}
b.rb8{margin: 0;height:2px}
b.rs1{margin: 0 1px}

/*transparent inside*/
b.t1{border-width: 0 5px}
b.t2{border-width: 0 3px}
b.t3{border-width: 0 2px}
b.t4{height: 2px}
b.tb1{border-width: 0 10px}
b.tb2{border-width: 0 8px}
b.tb3{border-width: 0 6px}
b.tb4{border-width: 0 5px}
b.tb5{border-width: 0 4px}
b.tb6{border-width: 0 3px}
b.tb7{border-width: 0 2px;height:2px}
b.tb8{border-width: 0 1px;height:2px}
b.ts1{border-width: 0 2px}

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ois

Para aumentares a curvatura do canto (usando o exemplo com DIVs) basta aumentares o numero de DIVs, por exemplo no exemplo do niftycube ele para fazer

um canto normal usa 4 estilos r1, r2, r3, r4. Para fazer um canto grande usa os rb1 a rb8 se quiseres fazer como ele basta em vez de 4 DIVs pores 8 e dás a cada

um deles o seu estilo(de rb1 a rb8).

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

O uso do <b> é fixe porque é um elemento que está a cair em desuso, portanto em termos de estilos estás a vontade, já sabes que á partida os únicos elementos <b> que vais ter vão fazer parte dos cantos redondos.

Exacto, penso que o termo correcto é "deprecated". Isso quer dizer que em algum ponto no futuro podem desaparecer, e o código deixava de servir :P

Enfim, isto é daquelas minhas picuinhices, hehe.

Quanto a aumentar a curvatura, como muito bem foi dito, é só aumentar a quantidade de spans com cada vez com maiores heights. O que poderias fazer é criar um canto arredondado no Photoshop por exemplo, ao teu gosto, e depois fazer zoom até veres os pixeis. Contas quantos espaços brancos tem cada linha, multiplicas por dois e tens o border-width para essa linha! (Nota: não podes é usar "anti-alising" ao criar o canto, têm que ser pixeis "sólidos").

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Pegando no código do Bjecas, criei uma versão para cantos maiores.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Round corners</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
text-align: center;
margin: 0;
padding: 0;
}
div#box {
width: 350px;
text-align: left;
margin: 20px auto 0px;
}

.round span{
display: block;
background: red;
overflow: hidden;
}

.conteudo {
background:red;
overflow:hidden;
padding:10px;
}


/*normal*/
.round .r0 {margin: 0  1px; height: 3px}
.round .r1 {margin: 0  2px; height: 2px}
.round .r2 {margin: 0  3px; height: 2px;}
.round .r3 {margin: 0  4px; height: 1px;}
.round .r4 {margin: 0  5px; height: 1px;}
.round .r5 {margin: 0  6px; height: 1px;}
.round .r6 {margin: 0  7px; height: 1px;}
.round .r7 {margin: 0  9px; height: 1px;}
.round .r8 {margin: 0 11px; height: 1px;}
.round .r9 {margin: 0 14px; height: 1px;}
</style>
</head>
<body>
<div id="box">
    <div class="round">
         <span class="r9"></span>
         <span class="r8"></span>
         <span class="r7"></span>
         <span class="r6"></span>
         <span class="r5"></span>
         <span class="r4"></span>
         <span class="r3"></span>
         <span class="r2"></span>
         <span class="r1"></span>
         <span class="r0"></span>
    </div>
    <div class="conteudo">
    <p>Algum conteúdo</p>
    </div>
    <div class="round">
         <span class="r0"></span>
         <span class="r1"></span>
         <span class="r2"></span>
         <span class="r3"></span>
         <span class="r4"></span>
         <span class="r5"></span>
         <span class="r6"></span>
         <span class="r7"></span>
         <span class="r8"></span>
         <span class="r9"></span>
    </div>
</div>
</body>
</html>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Só funciona em Firefox certo?!

Em todos os browsers que usem a Gecko engine, sim.
0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Isso é um bocado mau,  o grande dilema do CSS é sempre a porcaria do engine da Microsoft.

Usar isso não cria solução nenhuma, a não ser que utilizes comentários condicionais com recurso a diferentes CSS que se torna uma grande SECA!

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Eu não coloco a questão de se o IE suporta ou não, para mim o que interessa é se isso está nos standards do CSS. Se não está, está fora de questão usar isso.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Eu não coloco a questão de se o IE suporta ou não, para mim o que interessa é se isso está nos standards do CSS. Se não está, está fora de questão usar isso.

Está no draft do CSS3. :D
0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Está no draft do CSS3. :D

Que até chegar a recomendação, ainda deve ter um longo caminho a percorrer.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Que até chegar a recomendação, ainda deve ter um longo caminho a percorrer.

CSS3 só vai ajudar neste tipo de coisas que agora só é possível fugindo aos standars ou "brincando" com imagens, mas daqui a lá temos que nos aguentar :D

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

A solução aqui apresentada não é exactamente brincar com imagens, nem fugir ao standards (no entanto, é capaz de ter algumas limitações que os outros métodos não têm).

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

A solução aqui apresentada não é exactamente brincar com imagens, nem fugir ao standards (no entanto, é capaz de ter algumas limitações que os outros métodos não têm).

Mas é uma solução um pouco 'bruta'  pois são precisos alguns span's e fica um pouco 'feio'

just my two cents

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Embora fique bonito, para sites minimamente com tráfego, penso que é um exagero estas técnicas.

Para um div é preciso enviar pelo menos 8 tags, que tornam o HTML enviado maior, mais pesado de renderizar etc.

Acho que tem de se encontrar equilibrios entre design/performance. Eu aconselho a usar as propriedades do gecko e do safari, e deixar os cantos rectos para outros browsers.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora