Vídeo aula

DIV com bordas arredondadas com Jquery

Olá para todos! Meu nome é Matheus Moura, e nesta vídeo aula vou ensinar a colocar bordas arredondadas em uma div utilizando o jquery com o p lugin corner. Boa aula!

Link do Jquery: jquery
Link do Plugin: Corner

Obs. VAB: O autor informa na sua vídeo aula que está usando ajax para criar bordas arrendondas, sendo que ajax é um acrônimo Asynchronous Javascript And XML. Isso significa, de modo simplificado que seu navegador irá solicitar informações ao servidor sem necessidade de atualizar a página. Então ele não está usando AJAX para criar esse efeito.

bordas arrendondadas com jquery, bordas com corner jquery, efeito bordas com jquery, plugin corner

Deixar um comentário

Comentários (39 Comentários)

webson sousa : 21.12.09 às 21:38

os scripts desta video aula está no forum? nao estou conseguindo acha, obrigado
webson : 21.12.09 às 14:50

parabens super video aula…. vivendo e aprendendo.. obrigadão pessoal da vab
Leonardo Tavares : 04.11.09 às 12:26

Matheus parabéns! Teria como aplicar esse efeito em campos input?
Sacramento : 28.10.09 às 19:43

Não é um bom plugin. Ele só é bom com background Branco, se tiver uma imagem atrás ou um degradé, só funcionará nos navegadore que suportam CSS3, os IE e Opera não funcionam porque deixa as pontas brancas da DIV que foi arredondada.

O melhor que já vi é o http://www.curvycorners.net/

Funciona em todos os navegadores idependente da imagem ou fundo atrás.
David CHC : 27.10.09 às 8:06

@Alexandre, não há necessidade de 3 script, apenas 2, o do jquery e do plugin. O Do plugin vc vai encontrar sempre 2 arquivos, pq um é para desenvolvimento, o q isso significa? Quer dizer ele é organizado e comentado para vc olhar e saber como é feito. E outro é o de produção (sempre é o q tem menor tamanho), ele já não tem comentário, espaços, e as vezes usado função para criptografar pra ficar menor ainda. Qual usar? Os dois scripts são iguais, mas use o de produção (o menor), e para ver como funciona, vc ver o de desenvolvimento.
Alexandre : 26.10.09 às 22:02

Boa noite(a hora que escrevo).
nessa videoaula vc fala em usar 3 scripts, porem no site só tem 2 links, como eu consigo o corner.src ?

obrigado desde já
David CHC : 26.10.09 às 19:55

Blz @Dimas
Dimas : 26.10.09 às 19:54

David, muitíssimo obrigado funcionou blz.
David CHC : 26.10.09 às 11:52

@Dimas, em vez de vc usar $ para seletor, use o jQuery para evitar conflito, exemplo:

jQuery(document).ready(function() {
jQuery(‘#id_da_Div’).corner();
});
Dimas : 26.10.09 às 11:46

Show a video aula.
Gostaria que alguém me dissesse como trabalhar com jquery no wordpress, tipo atualizar o jquery e trabalhar com ele no wordpress, pois tentei colocar este plugin em um site que fiz só que dava conflito com alguns scripts do wordpress.
Ou funcionava um ou outro.
Agradeço desde já.
Guilherme : 24.10.09 às 16:11

Vlw mesmo cara! parabens pelo video… o meu aqui deu certinho!

abraços!
Matheus : 23.10.09 às 19:36

Então por favor enviem para ma.us100@hotmail.com os arquivos em anexo. Para eu dar uma olhada. Ou podem me adicionar no msn!
rollou : 23.10.09 às 18:26

O meu também não esta dando certo. Já refiz o código 3vezes. O que pode estar errado. Desde já Obrigado.
Matheus : 23.10.09 às 18:14

Gente, é só fazer o que a aula diz.. Exatamente igual. Qualquer coisa falem-me.
marcello lima : 23.10.09 às 13:32

ola amigo tudo bem, aqui o meu tambem nao deu certo o que sera que fiz errado. vc pode me ajudar.
Matheus : 23.10.09 às 9:52

Bom dia rapaziada! Bom, com certeza existem diversas formas de fazer isto, e, esta (<-) é uma dessas. Se não funcionou com algumas pessoas, recopie o codigo, por que está tudo certo com a maioria das pessoas. Obrigado. Vlw.
David CHC : 23.10.09 às 7:26

@Gustavo, existe nº maneiras de fazer box com cantos arrendondados, essa pode ser uma alternativa muito eficaz.
Sobre a Obs proposto pelo VAB, apareceu pequeno devido algumas configurações no itálico, agora está num tamanho legivel.
Rafael : 23.10.09 às 0:01

Vlw Matheus, a questão que fiz o códigos como vc fez na vídeo aula e não funcionou.
Ai surgiu a dúvida sobre o terceiro JS a razão de não funcionar.
Enfim a BOX ficou quadrada.
Não sei o que fiz de errado, fiz o código da mesma forma que a vídeo aula.
Peço uma ajuda
Muito obrigado
Abraço
Alex Rodrigues - 30 anos - Campinas-sp : 22.10.09 às 21:31

Olá Matheus tudo bem , cara video aula ótima cara muito ótima.
Cara se vc souber wordpress sera que vc pode fazer uma video aula de query_post.

Muito Obrigado pela video aula e continue assim!!!
Gustavo : 22.10.09 às 21:24

Peço que estude andes de realizar as video aulas. OBS na barra de STATUS ninguem le. E vamos dizer que esta não é a forma conselhavel de se fazer isto. Muitos kbs, desperdiçados.
marcelo lima : 22.10.09 às 16:26

muito bom mesmo, parabens e ja aproveitando a oportunidade quero soliciatar se possivel fazer um borda arredondada igual o do logo do site:www.r7.com , muito obrigado estou esperando essa aula ate mais.
Allan lima : 22.10.09 às 1:53

Comentario atrasado é q eu tava andando muito ocupado =) mas valeu , ajudo eu muitoooo , mto obrigado mesmo =]
Allan lima : 22.10.09 às 1:24

Valeu cara….. Muito Obrigado . tava precisando demais desse video =) Otima aula !
David CHC : 21.10.09 às 17:05

Ricardo, cada usuario terá um Id único. Lembre-se q é criado uma chave primaria, isso q dizer ela será unica. Peço apenas q poste essas duvidas no comentários referente a esse video aula.
Ricardo : 21.10.09 às 16:43

E como q faz pra quando a pessoa se cadastrar crie ID_USER diferente?
Ricardo : 21.10.09 às 16:40

E como é que faz pra q cadastre ids diferentes ?
Matheus Moura : 21.10.09 às 10:13

RAFAEL, é porque na aula eu que coloquei arquivo demais. Você só precisa de um arquivo do plugin e do arquivo do jQuery, apenas estes. Só é necessario colocar o “jquery.js” e o “jquery.coner.js”. O “jquery.corner.src.js” não é necessário colocar. Vlw.
David CHC : 21.10.09 às 7:11

Ricardo, vamos dizer q vc quer q pessoa cadastre fotos, então sua tabela teria q ser assim:

fotos

id_fotos
id_user
foto
legenda

O id_user será o id do usuário quando logar no sistema, vc recuperar esse id pela sessão
Rafael : 21.10.09 às 0:50

Matheus, muito boa sua vídeo aula, realmente está muito bem explicado, sei que vc fez de coração para disponibilizar seus conhecimnetos para os irmões da net.
Matheus fiz o código Html,css e coloquei e fiz o down dos arquivo, Mas tá faltando um arquivo JS.
Tem como vc colocar dispnível para down por gentileza.
Um forte abraço e sucesso!
ricardo : 20.10.09 às 21:30

David eu tenho uma dúvida,fiz esse login e senha desse site por sinal muito bom, mais eu preciso tbm de uma coisa… tem como vc fazer uma página pra tipo quando a pessoa se cadastrar ele ter uma página individual… Que ele possa colocar as fotos dele e tal . Por favor faz isso pra mim, espero resposta … abraço!
Matheus : 20.10.09 às 21:14

Tutorial City, por isso que os administradores colocaram uma observação no final da descrição da aula. Bom, acredito que o mais importante seja passar o conteúdo, e todo mundo comete erros, então perdoem-me por falar AJAX e não jQuery, que seria o correto! Vlw!
Tutorial City : 20.10.09 às 20:35

Pra bordas arredondadas acho melhor usar as extensões específicas dos navegadores(que suportam)(CSS3), e deixar quadrado nos outros, a não ser que a borda arredondada seja realmente necessário.
Cuidado com a nomenclatura, o vídeo não teve absolutamente nada de AJAX, somente javascript.
Matheus : 20.10.09 às 16:59

Bom, ai já é com você! Eu ensinei a fazer com background em css, assim que tenho conhecimento. Nunca testei com imagens, então…
Vlw!
Emmerson Siqueira : 20.10.09 às 12:59

Acontece que quando você utiliza imagem, ele deixa as bordas arredondadas, mas… ele deixa as pontas com a cor branca! e isso não fica bom com layout de background que seja diferente de branco.
Matheus : 20.10.09 às 11:18

Boa dia pessoal! Bom, vocês podem baixar o plugin e o jQuery no link que tem na descrição desta vídeo aula. No link do plugin também tem todos os modos de cantos, porque na aula só ensinei alguns. Vlw gente!
Sergio Araujo - SP : 20.10.09 às 10:34

Ola Matheus, blz…

Fantastica essa video aula, muito bom saber essa como Jquery, mais uma vez aprendi uma boa novidade e espero encontrar outras. Agora pergunto, todas aquelas formas de cantos que vc menciona, existe alguma listagem para conhecer todas ?

Abraços e parabens.
Junior Batista : 20.10.09 às 9:07

Opá!!! Massa! fazer isso só com o CSS da muito trabalho, Otima dica!! Valeu!
David CHC : 20.10.09 às 7:47

@Reginaldo, não necessidade de colocar aqueles dois plugin, q são os mesmos, um é para produção, removido os espaços, e outro para desenvolvimento, q tem os comentários, então não necessidade de colocar os dois, apenas usar jquery.corner
Reginaldo Santana : 20.10.09 às 7:40

Olá Matheus! tudo blz parabéns pelas suas aulas são show…
Tenho uma dúvida sobre a vídeo “DIV com bordas arredondadas com Jquery”, onde encontrar o pluguin jquery.corner.src.js, não consegui encontrar. Pode me ajudar…
E aproveitando a oportunidade gostaria de sugerir uma vídeo aula que acho ser bem interessante. Como criar o recurso autocompletar do google, ou seja, a pessoa começa a digitar a palavra e automaticamente vão surgindo as opções? Fica ai a sugestão té+