Scroll Top

Aprenda tudo que você precisa para criar o seu negócio na internet.  São 30 vídeos aulas totalmente gratuitas. Basta se cadastrar em um de nossos formulário.

Tutoriais

Criar molduras em sites usando a CSS

criar moldurasCriar molduras ou bordas em um site pode ser usado em muitas coisas, por exemplo, como elemento decorativo ou para servir de linha de separação entre dois objetos. Criar moldura em CSS proporciona infinitas possibilidades de uso de bordas na página dando um designer muito mais atraente e profissional. Se você usar as cores que combinam com o seu site e colocar nos lugares certos, com certeza fará muito sucesso entre os seus leitores e usuários.

 O código usado  para criar molduras ou bordas definindo a espessura  é [border-width]

A espessura das bordas é definida pela propriedade border-width, que pode assumir os valores thin, medium, e thick (fina, média e grossa), ou um valor numérico em pixels. A figura a seguir ilustra algumas espessuras de bordas em pixels:

criar molduras

 

 As cores das bordas [border-color]

criar molduras-1

 

A propriedade border-color define as cores para as bordas. Para criar molduras  coloridas, os valores são expressos em código ou nome de cores, por exemplo, “#123456”, “rgb(123,123,123)” ou”yellow”.

 

O código para criar molduras e definir os tipos de bordas é o [border-style]

Existem vários tipos de bordas disponíveis para criar molduras. A seguir apresentamos 8 tipos diferentes de bordas e como elas são renderizadas no Internet Explorer 5.5. Todos os exemplos são mostrados na cor “gold” e com espessura “thick”, mas você pode usar qualquer cor e espessura ao seu gosto.

Os valores none ou hidden podem ser usados quando não se deseja a existência de bordas.

cores de bordas

 

Exemplos de definição de bordas


As três propriedades explicadas acima podem ser definidasjuntas para cada elemento e resultam em diferentes bordas. Para exemplificar, foram estilizadas diferentes bordas para os elementos <h1>, <h2>, <ul> e <p>. O resultado poderão não ser uma obra prima, mas, ilustra bem algumas das inúmeras possibilidades de estilização de bordas.

Para criar molduras vamos praticar com o código abaixo:

Digite o código usando um editor de códigos HTML, que eu recomendo o Notepad+ + e salve o arquivo como index.html na pasta que o seu servidor local indicar, caso não tenha um servidor local e um editor de código, basta clicar nas respectivas palavras e poderá baixar  e instalar um em seu computador. Você pode usar também a sua hospedagem para textar.

<html>
<head>
<title>Meu Primeiro Estudo de CSS</title> /* Título da página*/
<link rel=”stylesheet” type=”text/css” href=”estilo.css”/> /* Link para chamar o arquivo estilo.css*/
</head>
<body>
<h1>Article 1:</h1>
<h2>All human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood.</h2>
<p>Criar Molduras pontilhadas </p>
<ul> Criar Molduras com linha</ul>
</body>
</html>

Agora digite o código abaixo e salve como estilo.css na mesma pasta que você salvou o arquivo anterior:

h1 {

border-width: thick;
border-style: dotted;
border-color: gold;
}
h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}
p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}
ul {
border-width: thin;
border-style: solid;
border-color: orange;

Clique no botão abaixo para visualizar o resultado:

visualizar

 

É possível ainda definir propriedades especialmente para as bordas top, bottom, right ou left (superior, inferior, direita e esquerda). Veja o exemplo a seguir.

Digite o código abaixo em seu editor de código e salve no mesmo arquivo que você usou acima o estilo.css, depois que você abrir no seu navegador o resultado deverá ser igual ao que você verá a clicar no botão visualizar logo abaixo:

h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-width: thick;
border-right-style: solid;
border-right-color: green;
border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}

 

visualizar

 

 

Compilando [border]

Assim como para muitas outras propriedades, ao criar molduras  você também pode usar uma declaração abreviada para bordas. Vamos a um exemplo:

 

p {
border-width: 1px;
border-style: solid;
border-color: blue;
}

Pode ser abreviada assim:

p {
border: 1px solid blue

}

avançar

voltar

Está Gostando do Artigo?

Se inscreva em nossa lista e receba 30 vídeos aulas grátis, ensinando como criar o seu negócio na internet a partir do zero.

| Website

Sou blogueiro por que gosto de ler e escrever. Criei este blog para te ajudar a criar o seu negócio na internet e ter um novo estilo de vida.

  • Great product… Works wonderful. No side effects. I have told my friends all about this solution and how I missing 1 lbs in a single month. Ready to reorder..Thanks

    Traduzido com Google tradutor:
    Grande produto … obras maravilhosas. Sem efeitos colaterais. Eu disse a todos os meus amigos sobre esta solução e como eu faltando £ 1 em um único mês. Pronto para reordenar .. Obrigado

    • Muito obrigado, é muita gentileza sua.

      Traduzido com Google Tradutor:
      Thank you, that’s very kind of you.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.
error: Este conteúdo está protegido ! Se precisar de alguma coisa envie mensagem pelo formulário de contato.