Código Fonte - O melhor conteúdo para programadores

Este código tem nota

Autor

William Sousa

membro deste novembro de 2007

Compartilhe e guarde

Enquete

Google Chrome OS ameaça a liderança do Windows da Microsoft?

Não
Sim

Home Código Fonte JavaScript - DHTML Efeitos

Criar caixa de texto com cantos arredondados

Este exemplo você aprenderá como fazer uma caixa de texto com os cantos arredondados.
Não esqueça de baixar o script para funcionar corretamente.

<html>
<head>
<title>:: Caixa Arredondada com JavaScript ::</title>
<script type="text/JavaScript" src="rounded_corners_lite.inc.js"></script>
<style>

.myBox
{
    margin: 0 auto;
    border: 0px solid #ffffff;
    color: #ffffff;
    width: 60%;
    padding: 20px;
    text-align: left;
    background-color: #ff0000;
    border: 2px solid #ffffff;
}

html,body{
    height: 100%;
    text-align: center;
  	 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px;
    background-image: url(grass.jpg);
}

</style>
<script type="text/JavaScript">

  window.onload = function()
  {
      /*
      	Essa função em Javascript usaremos para definir
	as configurações da borda arrendondada.
      */
      settings = {
          tl: { radius: 20 },
          tr: { radius: 20 },
          bl: { radius: 20 },
          br: { radius: 20 },
          antiAlias: true,
          autoPad: true,
          validTags: ["div"]
      }

      /*
      Usage:

      newCornersObj = new curvyCorners(settingsObj, classNameStr);
      newCornersObj = new curvyCorners(settingsObj, divObj1[, divObj2[, divObj3[, . . . [, divObjN]]]]);
      */
      var myBoxObject = new curvyCorners(settings, "myBox");
      myBoxObject.applyCornersToAll();
  }
  
</script>
</head>

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" bgcolor="#000000">

    <br><br><br><br>

    <div class="myBox">
    <font face="verdana" size="1"><p align="justify">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi est, cursus sit amet, pellentesque et, ultricies a, ipsum. Nulla facilisi. Sed quis lacus. Aenean ut risus et lectus blandit gravida. Nam sed nunc. Aliquam non felis non diam aliquam gravida. Phasellus quis sem. Curabitur at velit. Vivamus libero velit, condimentum sit amet, tempus ut, aliquam sit amet, velit. Nunc hendrerit ante. Quisque egestas feugiat erat. Morbi tellus.
    <br /><br />
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac ante sit amet metus hendrerit euismod. Aenean vestibulum, lectus in eleifend tempor, quam libero iaculis dolor, pellentesque pellentesque lorem nibh ut urna. Nulla rhoncus, ante sit amet tristique interdum, eros nulla nonummy justo, eu dapibus risus quam sit amet metus. Maecenas tristique augue vel enim. Duis blandit euismod pede. Pellentesque facilisis. Fusce dapibus sapien tristique massa. Nunc accumsan. Integer pretium risus et odio. Phasellus tincidunt rhoncus velit. Donec eu neque at massa mollis iaculis. Aliquam pellentesque auctor mi. Cras ante justo, ultricies quis, iaculis eu, tincidunt ac, velit. Etiam nunc erat, tincidunt sit amet, luctus quis, interdum a, nunc. Suspendisse elit.
    <br /><br />
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac ante sit amet metus hendrerit euismod. Aenean vestibulum, lectus in eleifend tempor, quam libero iaculis dolor, pellentesque pellentesque lorem nibh ut urna. Nulla rhoncus, ante sit amet tristique interdum, eros nulla nonummy justo, eu dapibus risus quam sit amet metus. Maecenas tristique augue vel enim. Duis blandit euismod pede. Pellentesque facilisis. Fusce dapibus sapien tristique massa. Nunc accumsan. Integer pretium risus et odio. Phasellus tincidunt rhoncus velit. Donec eu neque at massa mollis iaculis. Aliquam pellentesque auctor mi. Cras ante justo, ultricies quis, iaculis eu, tincidunt ac, velit. Etiam nunc erat, tincidunt sit amet, luctus quis, interdum a, nunc. Suspendisse elit.
    </p></font>
    </div>


	<p><br>
	<br>
	<br>
	<font color="#FFFFFF">..: by Winters | </font>
	<a target="_blank" href="http://www.universodownloads.110mb.com/princ.htm">
	<font color="#FFFFFF">UniversoDownloads</font></a><font color="#FFFFFF"> :..<br>
	<br>
	</font><a target="_blank" href="http://www.codigofonte.com.br">
	<font color="#FFFFFF">CódigoFonte</font></a><font color="#FFFFFF"><br>
	<font style="font-size: 7pt">O melhor conteúdo para programadores.</font></font></p>


</body>
</html>

<html>
<head>
<title>:: Caixa Arredondada com JavaScript ::</title>
<script type="text/JavaScript" src="rounded_corners_lite.inc.js"></script>
<style>

.myBox
{
    margin: 0 auto;
    border: 0px solid #ffffff;
    color: #ffffff;
    width: 60%;
    padding: 20px;
    text-align: left;
    background-color: #ff0000;
    border: 2px solid #ffffff;
}

html,body{
    height: 100%;
    text-align: center;
  	 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px;
    background-image: url(grass.jpg);
}

</style>
<script type="text/JavaScript">

window.onload = function()
  {
      /*
      	Essa função em Javascript usaremos para definir
	as configurações da borda arrendondada.
      */
      settings = {
          tl: { radius: 20 },
          tr: { radius: 20 },
          bl: { radius: 20 },
          br: { radius: 20 },
          antiAlias: true,
          autoPad: true,
          validTags: ["div"]
      }

/*
      Usage:

newCornersObj = new curvyCorners(settingsObj, classNameStr);
      newCornersObj = new curvyCorners(settingsObj, divObj1[, divObj2[, divObj3[, . . . [, divObjN]]]]);
      */
      var myBoxObject = new curvyCorners(settings, "myBox");
      myBoxObject.applyCornersToAll();
  }
  
</script>
</head>

<div class="myBox">
    <font face="verdana" size="1"><p align="justify">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi est, cursus sit amet, pellentesque et, ultricies a, ipsum. Nulla facilisi. Sed quis lacus. Aenean ut risus et lectus blandit gravida. Nam sed nunc. Aliquam non felis non diam aliquam gravida. Phasellus quis sem. Curabitur at velit. Vivamus libero velit, condimentum sit amet, tempus ut, aliquam sit amet, velit. Nunc hendrerit ante. Quisque egestas feugiat erat. Morbi tellus.
    <br /><br />
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac ante sit amet metus hendrerit euismod. Aenean vestibulum, lectus in eleifend tempor, quam libero iaculis dolor, pellentesque pellentesque lorem nibh ut urna. Nulla rhoncus, ante sit amet tristique interdum, eros nulla nonummy justo, eu dapibus risus quam sit amet metus. Maecenas tristique augue vel enim. Duis blandit euismod pede. Pellentesque facilisis. Fusce dapibus sapien tristique massa. Nunc accumsan. Integer pretium risus et odio. Phasellus tincidunt rhoncus velit. Donec eu neque at massa mollis iaculis. Aliquam pellentesque auctor mi. Cras ante justo, ultricies quis, iaculis eu, tincidunt ac, velit. Etiam nunc erat, tincidunt sit amet, luctus quis, interdum a, nunc. Suspendisse elit.
    <br /><br />
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac ante sit amet metus hendrerit euismod. Aenean vestibulum, lectus in eleifend tempor, quam libero iaculis dolor, pellentesque pellentesque lorem nibh ut urna. Nulla rhoncus, ante sit amet tristique interdum, eros nulla nonummy justo, eu dapibus risus quam sit amet metus. Maecenas tristique augue vel enim. Duis blandit euismod pede. Pellentesque facilisis. Fusce dapibus sapien tristique massa. Nunc accumsan. Integer pretium risus et odio. Phasellus tincidunt rhoncus velit. Donec eu neque at massa mollis iaculis. Aliquam pellentesque auctor mi. Cras ante justo, ultricies quis, iaculis eu, tincidunt ac, velit. Etiam nunc erat, tincidunt sit amet, luctus quis, interdum a, nunc. Suspendisse elit.
    </p></font>
    </div>

<p><br>
	<br>
	<br>
	<font color="#FFFFFF">..: by Winters | </font>
	<a target="_blank" href="http://www.universodownloads.110mb.com/princ.htm">
	<font color="#FFFFFF">UniversoDownloads</font></a><font color="#FFFFFF"> :..<br>
	<br>
	</font><a target="_blank" href="http://www.codigofonte.com.br">
	<font color="#FFFFFF">CódigoFonte</font></a><font color="#FFFFFF"><br>
	<font style="font-size: 7pt">O melhor conteúdo para programadores.</font></font></p>

</body>
</html>

Arquivo	Tipo	Tamanho	Hits
rounded_corners_lite.inc.js	Arquivo JS	24,5 Kb	1774
border_script.html	Arquivo HTML	4,2 Kb	2095

Este código foi útil para você?

Nota	Comentário
9	denunciar danilowzn comentou em 5/9/2008 muito bom adaptando fica no estilo web 2.0
10	denunciar l34ndro comentou em 8/7/2008 Impressão Este script é muito bom visualmente, mas as bordas não aparecem quando é feita a impressão da página. Se alguém souber de uma solução, poste aí. []’s

Regras:
Os comentários seguem as seguintes regras:

Todos os comentários são enviados por membros cadastrados no site.
A pontuação de comentários de conteúdo do próprio membro não serão computados.
Os comentários serão pré-aprovados, porém a equipe do site revisará o conteúdo de todos os comentários podendo ser invalidados (inclusive a pontuação).
Os comentários precisam ter, obrigatóriamente, coerência sobre o conteúdo que será comentado.
O membro que atingir 5 comentários invalidados não poderá mais comentar dentro do site. Com isso o membro não poderá mais ganhar pontos com comentários.
Há um limite de 10 comentários por dia para cada membro.
Qualquer comentário após ter sido publicado poderá ser retirado através da opção ( denunciar)

Comente

Autenticação:	Apelido: Senha: (ainda não tem cadastro? clique aqui!)

Título:	Máximo de 30 caracteres
Comentário:	Máximo de 255 caracteres
Avaliação:

Equipe | Tabela de Pontos e Estrelas | Política de Privacidade | Mapa do Site | Fale Conosco