01/06/2009 - 2:22 > 20.831 Visualizações > 99 comentários
Box com cantos arredondados
Salve Amigos do Mxmasters, David CHC, em mais uma vídeo aula de Tableless. Nessa aula iremos aprender a fazer uma div com bordas arredondadas. É algo bem simples, mas é uma duvida bem recorrente no fórum.
Tenham uma boa vídeo aula!
Posts relacionados
David CHC
Trabalha como free-lance em desenvolvimentos de sites,desde o projeto completo à parte do projeto. Tem conhecimentos em Padrões Web( xhtml, css), javascript( jquery), php, mysql , (iniciando no python e ruby também), photoshop, fireworks, corel draw, enfim, um eterno aprendiz...
Siga o autor
Comentários / Deixe seu Comentário
99 respostas para 'Box com cantos arredondados'
Deixe seu Comentário
Publicidade
Nossos cursos
-
Curso Sony Vegas 8 PRO
por R$ 34,90
Comprar -
Curso de ActionScript
por R$ 89,00
Comprar -
Curso completo de PHP
por R$ 99,00
Comprar -
Wordpress V2 – criando portais
por R$ 39,90
Comprar -
Criando e gerenciando lojas virtuais com magento E-commerce
por R$ 80,00
Comprar -
Dreamweaver CS4 avançado com PHP e Mysql
por R$ 80,00
Comprar -
Curso de Indesign CS4
por R$ 55,00
Comprar -
Curso Pacotão MX
por R$ 24,90
Comprar -
Curso de Flash CS4
por R$ 45,00
Comprar -
Curso de Fireworks CS4
por R$ 39,90
Comprar -
Curso de lógica de programação
por R$ 75,00
Comprar -
Curso de Dreamweaver CS4 Completo
por R$ 99,00
Comprar -
Curso de Efeitos Digitais
por R$ 39,90
Comprar -
Tableless – Padrões web
por R$ 39,90
Comprar -
Wordpress V1
por R$ 39,90
Comprar -
PHP e Mysql com Dreamweaver
por R$ 65,00
Comprar -
Curso de CorelDraw X4
por R$ 79,90
Comprar -
Criando um site completo V.2
por R$ 39,90
Comprar -
Curso de Photoshop CS4
por R$ 39,90
Comprar
Últimas atualizações
-
/CSS3
Utilizando Fontes estilizadas com CSS
-
Iluminação de Três Pontos com 3D Max – Parte 2
-
Curso de Magento lançado com promoção de 50%
-
/Java
Java para Web – Criando um CRUD – parte 4
-
/Java
Java para Web – Criando um CRUD – parte 3
-
Iluminação de Três Pontos com 3D Max – Parte 1
-
/PHP
Criando Newsletter – parte 3
-
/Java
Java para Web – Criando um CRUD – parte 2
1/06/09 às 7:02
Era isso que eu tava precisando, bão dimais da conta sô… brigado!!!
1/06/09 às 10:04
Parabéns David CHC, você acertou em cheio cara já estava com essa duvida fazia tempos…
Obrigado pela vídeo aula solucionatica.
(rsrsrs)
Abraços.
1/06/09 às 10:55
Opa boa aula
1/06/09 às 12:05
muito bom David…
tenho certeza que irá ajudar muita gente…
parabéns!
1/06/09 às 13:18
Yahoooooooooo!
Mais uma de Tablelles eba.
Pena que tou saindo pra escola mais assim que chegar
assisto e se tiver alguma duvida posto no forum ou aqui ^^
flw
(@_+) – ochii
1/06/09 às 13:58
Muito boa a aula, parabens david.
1/06/09 às 17:17
Tenho certeza que muitas pessoas do fórum vão adorar essa vídeo aula.
Parabéns David!
1/06/09 às 17:37
como sempre uma otima video aula…
parabens!!!
1/06/09 às 18:59
Ola David blz…
parabens pela iniciativa, muito boa a video com esse tipo de informação,eu mesmo não imaginava que dava para fazer isso…
Parabens
Abraços
1/06/09 às 19:10
Muito massa David!
Pra quem tah aprendendo, é um bom tutorial, muito util!
Abraços.
1/06/09 às 19:12
Ai David vlw mesmo! Muito boa essa aula, agradeço por compartilhar.
vlww
1/06/09 às 19:23
Muito boa essa video aula. Parabéns \o/.
2/06/09 às 1:45
Muito boa a video aula!
mais uma duvida persiste…
se eu usa um degradê dentro do box arredondado como eu devo proceder?
2/06/09 às 12:23
Rangel, creio que você tenha que jogar o degradê na imagem de cima, na parte do meio fatiar ele na horizontal. Na imagem de baixo, você coloca com a cor do bg do bloco central.
2/06/09 às 18:52
Muito bom david você poderia fazer uma video aula de oucultar e exibir as divs neh? ;} . to precisando =/
muito boa video aula cara parabens e continue sempre assim!
vlw abraços
3/06/09 às 4:19
hmm..
vlw a resposta felipe!
MxMasters o melhor conteudo da web!
4/06/09 às 3:12
David, aula show, impressionante como você transforma estas dificuldades em soluções tão simples e objetivas.
Parabéns mesmo.
4/06/09 às 18:06
Olá pessoal, muito boa video aula! rs, dificil dizer que uma vídeo aula do MX não seja boa, mas enfim, quero parabenizar toda a equipe pelo ótimo trabalho.
Aproveitando a oportunidade:
Queria saber se é possível alterar a aparência da barra de rolagem dos boxes através de CSS. Isso é possível?
Abraços
25/06/09 às 20:11
hey muito show de bola david tinha a uns tempos atraz postado um topico no forum sobre div com canto arredondados vlw
5/07/09 às 12:36
Muito boa essa video aula, consegui fazer certinho, mas quando colo o texto no conteudo do box, ele ultrapassa o mesmo, saido do box, porque isso acontece?
5/07/09 às 13:04
@Wilson, provavelmente vc está definindo uma altura para ele.
6/07/09 às 0:50
Amigos, ficou ótimo!
Do jeito que tem quer ser, simples e inteligente.
Valewwww
8/07/09 às 15:30
Ótimo video, mas fiz e não consegui, acho que estou errando em alguma linha comando…
8/07/09 às 15:56
@Rodrygo, na descrição da video aula, tem o link para script utilizado na video aula, está no forum do mxmasters, assim vc pode conferir o seu código
13/07/09 às 19:17
Cara meus parabéns por essa vídeo aula, já tinha visto outras m eu n tava entendendo nada e essa sua aula foi bem explicativa e de fácil entendimento. Continue assim.
Vamos nessa q o Brasil é nosso!
15/07/09 às 1:57
Não é mais facil criar 3 divs (#topo #meio #base) colocando no css os 3 juntos com 200px geral e colocar as imagens para cada um, sendo que dentro da div #meio colocar definindo o padding do texto
15/07/09 às 7:09
David explica a logica das col_direita onde fica conteudo do mx masters com menu, estou tentando aqui e não consigo ja tentei de tudo obrigado pela video aula e que deus te ilumine mais.
15/07/09 às 9:14
@Luiz, na verdade tem q ter 4 elementos pq o efeito é para borda, se vc tiver apenas 3 como vc tá sugerindo, não terá o controle na hora de criar mais box’s
15/07/09 às 9:21
@Ricardo Politi, qual a duvida q vc tá tendo em relação a isso?
15/07/09 às 11:32
Na verdade minha dúvida é o seguinte:
Monto 2 div id ex
Quando vou adicionar listas no menu no sentido horizontal as divs entre topo e menu se separam me dando um espaço e eu quero colar e não consigo, é o que faz espaçar, agora na minha coluna fiz o topo o conteudo e quando adiciono a lista ul o mesmo efeito se separa.
Olha o exemplo site teste.
http://www.split.hpg.com.br/
15/07/09 às 11:40
@Ricardo Politi, todos os elementos tem um margin e padding por padrão, nesse caso é ul, por isso q vc não consegue “colocar as divs”
#menu ul{
margin:0;
padding:0;
}
15/07/09 às 11:56
Valeu David agradeço muito e que Deus continue te iluminando para as video aulas
http://www.split.hpg.com.br/
27/07/09 às 17:47
nÃO TO CONSEGUINDO VER O VIDEO FAVOR ARRUMAR
27/07/09 às 18:17
@Daniel Ribeiro, limpe o cache do seu navegador, e depois tente assistir a video aula
28/07/09 às 17:06
@Daniel Ribeiro
para assistir os videos é preciso ter um plugin “flash player” istalado em sua máquina, talvez seja isso. Instale o flash player e tente novamente. Também pode ser baixado clinado aqui -> http://www.adobe.com/go/getflash
30/07/09 às 20:27
po esse tutorial e muito bom resolveu muita coisa aqui nos website q faço….
31/07/09 às 14:11
David
Valeu pelo video vai me ajudar muito
mais não to conseguindo é colocar um embaixo do
outro com espaço só fica colado um no outro
31/07/09 às 21:58
@Marcos, como assim? tem como vc dá um print o q tá ocorrendo?
13/08/09 às 11:46
Oi David, gostei da dica, fiquei super empolgado, mas esbarrei num problema que me parece meio grave (salvo se estou lendo informação atrasa nos sites). Como é que ALINHA VERTICALMENTE um texto numa DIV? Pelo que pude apurar nem mesmo o W3C conseguiu sanar esse bug.
Abraço!
13/08/09 às 12:46
@Ismael, dá uma olhada nesse artigo do Bruno Dulcetti q pode te ajudar: http://www.brunodulcetti.com/blog/2007/01/17/vertical-align-no-css-como-quando-e-por-que-usar.html
16/08/09 às 8:24
Show de bola hein, tava procurando isso mesmo.
16/08/09 às 11:48
Felipe Cardoso se for pedir de mais pofavor avelei esse sites aki
http://www.tavdesign.com.br
18/08/09 às 13:54
Nossa, muito bom.
19/08/09 às 7:05
Muita Boa Campeãoo! abraços
2/09/09 às 17:45
Sensacional a aula! estou tentando utilizar num layout, mas esta dando um problema com o Firefox que detona todo layout…são duas Div’s filha, uma topo e a outra o conteudo com esse box. No IE fica bom mas no Firefox some o topo do box, teria alguma dica? valeu! abraço
2/09/09 às 18:00
@Luis Armando, especifique uma altura para essa div, caso o contrario não vai aparecer no firefox
3/09/09 às 18:46
valeu a força! abraço
5/09/09 às 20:24
Cara Ja Aprendi muito com esse site Esse Site e 10!
PARABÉN’s PELO SITE Tomara Que Ele Creca Muito Muito Mais Vlw!
MSn: suporte@twister-downs.com !
16/09/09 às 8:04
Blz David..
Algumas dúvidas
Esta video-aula me ajudou a ter idéia de como criar um box, mas no final notei que o texto topo e rodapé não ficam próximos da linha.
01- Como fazer para que o texto fica próximo da lina ?
02 – Quero criar um box igual ao que tem na página inicial do MXmasters lá onde tem o nome Desenvolvimento e o link para esta video-aula.
Veja que o texto fica próximo da linha e é assim que quero fazer. E dentro do box tem linhas dividindo textos. No menu do Box tem Lá DESENVOLVIMENTO dai vem a linha e o conteúdo logo abaixo.. Show este Box.. gostaria de criar um assim.
Vc poderia ajudar a criar Box assim com uma nova video-aula ?
18/09/09 às 12:38
@Aprendizweb, vou tentar responder suas duvidas:
1 – lembre-se ali tem uma imagem, ele não vai fica colocado, vc pode diminuir o padding ou margin usados pra tentar diminuir, não ficará encontrado no topo por causa da imagem
2 – Sobre essa caixa, ela é apenas uma imagem unica, se estiver usando o firefox, clique nessa parte do topo do menu com o botão direito, e coloque em exibir imagem de fundo, vc vai ver q é uma imagem unica colocada em uma tag de titulo, veja o codigo fonte do site, vc vai perceber q é bem facil fazer.
18/09/09 às 12:55
Só uma aviso para que for Comentar.
No Mxmasters não está tendo atualização de video aulas, isso pq temos o Video Aulas Brasil onde as video aulas estão sendo publicadas, está tendo uma variedade enorme de temas no Video Aulas Brasil, q tenho certeza irá agradar a todos. Então, caso for perguntar alguma coisa sobre as video aulas, peço que façam no Video Aulas Brasil (http://www.videoaulasbrasil.com.br), pq o tempo de resposta será menor. Eu darei prioridade apenas os comentários do Video Aulas Brasil, pq vai fica mais fácil e rápido de responder.
Agradeço a Compreensão de Todos
David CHC – Administrador do Video Aulas Brasil
27/09/09 às 0:19
no css da div produtos, o que significa center center???
3/10/09 às 10:59
@andre, esse center é o posicionamento. Pq o background é uma sintase de varios comandos:
background-color – define a cor
background-image – define a imagem
background-repeat – se tiver imagem, definir se vai repeti-la, e para q orientação
background-attachment – se será fixa na tela ou em scroll
background-position: a posição da imagem (é nessa q colocaria center center, q é na horizontal center, e vertical center)
Todas essas propriedades pode ser definida apenas com background, isso diminui a quantidade de linhas digitadas
4/10/09 às 20:36
pocha as de vcs são otimas,mas vcs deveriam liberar pra downloard.
ok
4/10/09 às 20:37
pocha as video aulas de vcs são otimas,mas vcs deveriam liberar pra downloard.
desculpe está escrevendo denovo foi que da outra vez eu escreve errado foi mal.
5/10/09 às 0:50
Meu amigo, muito show a video aula! após ter assistido, tentei fazer fazer, só que no código css tentei fazer da minha meneira. dentro da div principal ficou a div_cima div_meio e div_baixo, quando acabei ficou um espaço entre cada div.
teria como me ajudar a tirar essa dúvida, desde já agradeço! eduardo.
5/10/09 às 8:19
@evandro, um dos motivos por não liberar para download, é q estavam vendendo as vídeo aulas do mxmasters
5/10/09 às 8:21
@eduardo, vc pode colocar um overflow:hidden, nas div_cima e div_baixo, e remover a margin e padding dos elementos
13/10/09 às 21:13
Eu gostei muito da video aula, me ajudou muito. Agora eu tenho uma duvida, que é como colocar mais submenus nos menus. Ex: home – empresa – negócios. Me ajude por favor, to precisando urgente.
13/10/09 às 21:36
@Daniel , vc tem certeza q comentou na vídeo aula certa? Mas vou postar um link com exemplo q fiz, para vc ter uma idéia como pode ser feito.
http://pastebin.com/f411e2642
22/10/09 às 11:05
isso aí é massa só que se fosse o felipe cardozo ensinando era bem melhor!
essa cara complica muito!
22/10/09 às 11:21
@paulo, não posso agradar a todos, mas as minhas video aulas só servirão se a pessoa tiver um conhecimento prévio, caso não tenha, não vai conseguir aproveitar mesmo.
9/11/09 às 13:27
bom galera adorei o tuto, mais tenho dúvida, não consegui fazer funcionar isso no firefox ele fica fora, no ie fica certin
alguem teve esse problema?
se si conseguiu resolver? como?
abrax
9/11/09 às 14:15
@saulo, veja no Forum do Mxmasters o código que disponibilizei, ai você pode comprar , se tiver a mesma coisa, poste o css aqui pra eu dá uma olhada.
8/12/09 às 17:02
olha David eu tenho uma duvida q ñ tem muito haver com essa videoaula
como faço para com que quando eu clico no menu ela abra só no meio sem ter que carregar a página toda de novo
mas eu queria fazer isso em tableless
desde ja agradeço
sou muito fã do seu site
assisto todas video aulas q consigo
e indico também para meus amigos e etc…
abraços
8/12/09 às 18:54
@Reginaldo, então para fazer isso vc terá usar javascript, ou utilizando iframes. Com apenas tableless não tem como, pelo menos ainda. Existe uma vídeo aula minha ensinando a fazer utilizando javascript.
http://www.videoaulasbrasil.com.br/ajax/carregando-a-pagina-sem-atualizar-utilizando-ajax-com-jquery/
9/12/09 às 9:28
valeu David muito obrigado vou assistir
11/12/09 às 13:19
Daew David
da uma olhada no site que estou fazendo
http://reginaldocompany.hd1.com.br
só a página index ta feita
me fala se estou indo no caminho certo em tableless
lembrando que é o primeiro site que hospedo na internet
valew
11/12/09 às 13:26
olha só esse site que estou fazendo em tableless
lembrando que é meu primeiro trabalho com tableless e css
http://reginaldocompany.hd1.com.br
me de sua opinião e me diga o que posso melhorar
valew!!!
12/12/09 às 20:48
@Reginaldo, então não vou falar do design, q não é minha praia, vou falar do código, ok?
Quando vc for criar nome para id e class, tente colocar nomes que identifiquem o conteudo, evitando colocar col-esq, col-dir, pq isso representa aparencia, o html tem ser apenas o conteudo, sei q é complicado no começo, mas é bom vc se acostumando.
O efeito do menu, vc poderia fazer com css, em vez usar o fireworks para gerar o script pra vc. Evite q esses programas, como fireworks, photoshop gerem os códigos, prefira sempre vc fazer, é até melhor pra aprender.
Como todo começo é dificil, mas é importante vc quer já desenvolver em tableless, e ao longo do tempo vai ficar mais claro q facil, já é um começo, agora é só dá continuidade, e sempre tentar melhorar.
14/12/09 às 11:21
obrigado por sua opinião
vou tenntar melhorar isso
21/12/09 às 16:30
Essa técnica é muito interessante. Uso essa mesma quando quero arredondar minhas divs.
22/12/09 às 16:42
Olá David boa tarde,
Já venho a algum tempo criando esse tipo de funcionalidade porém faço de uma forma um poquinho diferente, a lógica é a mesma porém faço uso de mais elementos do tipo DIV do que vi em seu vídeo. Estou enviando aqui meu código e lhe peço por favor dê uma olhada e me diga se também faço da forma correta ou se existe alguma irregularidade com minha estrutura, além disso, tenho uma dúvida com relação a propriedade “display:block” que foi utilizada no seu css, eu até entendi que sem ela os spans “top” e “bottom” não são exibidos, porém não entendo o porque! Poderia me explicar? Desde já agradeço a atenção.
- CSS –
#box {
width:200px;
}
#box_top {
background:red;
height:20px;
}
#box_body {
background:green;
}
#box_bottom {
background:red;
height:20px;
}
- HTML –
texto
22/12/09 às 16:48
…desculpe, meu HTML foi interpretado pelo navegador e não deu postar, deixa eu tentar denovo aqui, seria algo mais ou menos assim:
div box
div box_top
div box_body
tag p – texto
div box_bottom
até.
22/12/09 às 16:53
@Leandro, o html não foi mostrado pq o wordpress interpreta, vc pode usar pastebin.com e depois postar o link.
Pq temos que colocar o display:block, o principal motivo, pq span é um elemento inline, e para que possamos inserir uma imagem, que tenha altura, teremos que mudar o comportamento do span, pra que possamos colocar essa imagem via CSS, e é por isso q como block.
O elemento block ele ocupa 100% de largura do espaço, e é inserido uma quebra de linha antes e depois dele, com como tivessemos inserido br
O elemento inline ele irá ter uma largura necessária do objeto que está envolvendo, e não criar quebra de linha.
Vc pode inserir um elemento inline dentro de um elemento de block, como um span dentro da tag de paragrafo (p), mas um elemento em block não pode ser inserido dentro do elemento inline.
Vc pode utilizar sim div’s em soan, sem problema algum.
22/12/09 às 17:29
Obrigado David. Perfeito.
22/12/09 às 21:53
Oi eu gostaria de saber se vcs podem ou ja tem algum video que ensine como unir tabelas no dremewever cs4.
23/12/09 às 6:02
Olá Gustavo, tudo bem?
Como assim unir tabelas?
23/12/09 às 8:41
Assim o tirei um print http://img694.imageshack.us/i/14237131.png/ da uma olhada la fazendo favor fiz tudo igual manda la no Tutorial mas fica assim
23/12/09 às 8:42
a minha dúvida é a seguinte:
por favor, tem como vcs ensinarem a fazer um site com aquelas linhas azul que separam os conteúdos, essas que tem no mx masters.
23/12/09 às 8:45
@Lucas, basta usar o css, a propriedade border, aqui um tutorial para vc conhecer essa propriedade:
http://maujor.com/tutorial/bordertut.php
23/12/09 às 11:41
Oi ADMIN te mandei um link erado
ve nesse: http://img694.imageshack.us/img694/9117/14237131.png
24/12/09 às 9:17
FALA DAVID CHC, GOSTARIA DE SABER O QUE QUER DIZER CHC NO SEU SOBRENOME, PORQUE O MEU É DAVID PHP.
PARABÉNS PELAS AULAS. SÃO MUITO BOAS. TEM ME AJUDADO MUITO.
ABRAÇO.
24/12/09 às 10:39
Muito obrigado David, fazia tempo que queria uma solução legal dessa ai que vc trouxe pra nós. Agradeço bastante.
Código enxuto heim, o cara que é bom é outra coisa…..!
Vlw!
Maceió – Alagoas
24/12/09 às 13:55
Blz xará, são as iniciais do meu sobrenome – Correia Holanda Cavalcante, como é grande eu simplifiquei, rs
24/12/09 às 13:56
vlw @THIAGO LINO
29/12/09 às 22:18
Através das video-aulas fica facil aprender, agradeço aos “professores” aí pela ajuda. Valeu mesmo!!!
30/12/09 às 17:51
Olá Filipe, tudo blz? Preciso de uma ajudinha meu camarada, é o seguindo, tenho construido layouts no Fireworks mais não tenho coseguido adita-los no Dreamweaver. Na verdade não estou conseguindo converter as imagems em html.
Desde já agrace.
Feliz ano novo a todos!
30/12/09 às 18:32
@Cedemilson, não é aconselhavel fazer dessa maneira, pq cria um código sujo. Aprenda criar o seu código, html e css, vc vai tirar um proveito maior.
Sobre o Fireworks tem um mini-curso do CS4, pode te ajudar.
http://www.videoaulasbrasil.com.br/categoria/fireworks/
5/01/10 às 19:27
Valeu pessoal pelos comentários, para falar a verdade fui eu que fiz a vídeo aula.
5/01/10 às 19:29
Opa, desculpe eu postei a outra vídeo aula, Box com cantos arredondados em CSS3, desculpem pessoal.
5/01/10 às 19:29
Boa a vídeo aula, valeu David !
5/01/10 às 19:35
@Mike, desde quando vc tem essa voz de macho , hehehehe. tô brincando, rs
6/01/10 às 13:30
KKKkkkkk ….
28/02/10 às 2:12
Equipe Mx sempre me quebrando galho . vlw David e toda equipe do Mxmasters .. Flw
16/04/10 às 11:11
nossa gente. esse video está conrtado, ja carreguei varias vezes e mvarios navegadores, e está só um pedacinho pra assistir aqui, logo depois de uns dois minutitos, acaba e suge um botões, um deles é pra replay!! é asim como todos os videos mxmasters? temos que pagar pra assisitir?
16/04/10 às 11:29
@hercules souza, tente limpar o cache do seu navegador. Se vc estiver usando Internet Explorer basta vc apertar CTRL + F5, caso esteja usando o No Firefox, aperte CTRL + SHIFT + DEL, e deixe marcado apenas cache, e clique Limpar Agora. Veja se isso resolve. Caso isso não funcione, tente atualizar o flash player.
16/04/10 às 11:29
desculpem todos, não é que os videos estão cortados… estão completos sim, e muito bons por sinal, o problemas está entre o encosto da mnha cadeira e o laptop rsrsr é que tenho um defeitinho… fico conectado por dias sem desligar ele, até quando durmo…e quando durmo, deixo ele fazendo umas tarefas…e sempre que faço qualquer coisa é online… o modem que uso é um smrtphone que quando esquenta, e net fica cainda, não percebia porq ele reconecta no silecio. Obrigado a todos da mxmasters.
10/07/10 às 19:52
[...] Clique Aqui para ver o Video [...]