12 de setembro de 2009

CSS Tutorial - Diferentes bordas e diferentes cores na mesma div.

Olá :) , vou tentar ensinar, como exibir em uma mesma div cores, espessuras e estilos diferentes, é bem fácil, vamos lá !

A propriedade border pode se subdividir nas propriedades:

border-left | border-right | border-top | border-bottom

Essas propriedades vão aplicar nossas alterações de cores, estilo e espessura em cada borda individulamente, respectivamente nas bordas esquerda, direita, superior, inferior. Depois de conhecida as propriedades que vamos usar, vamos aplicar em uma "div" qualquer, que chamaremos de "div colorida".

<div id="divcolorida">
Blablablablblabla
Blablablablblabla
Blablablablblabla
</div>

Editando com CSS:

Podemos colocar tres valores (cor, espessura, e estilo) em uma propriedade, são esses valores que irão diferenciar cada borda da div, agora é só usar a criatividade e editar como quizer, veja:

Legenda: estilo(amarelo) - espessura(cinza) - cor(azul)


#divcolorida{
border-left:solid 10px #003cff;
border-right:dashed 5px #00ff00;
border-top:dotted 5px #00ff00;
border-bottom:solid 10px #003cff;
width:200px;
height:200px;

}

Esse é o código fonte completo, para você ver como fica, basta colar no
bloco de notas e criar uma nova pagina .html:

<html>
<head>
<title>Div colorida</title>

<style type="text/css">
#divcolorida{
border-left:solid 10px #003cff;
border-right:dashed 5px #00ff00;
border-top:dotted 5px #00ff00;
border-bottom:solid 10px #003cff;
width:200px;
height:200px;

}
</style>

</head>
<body>

<div id="divcolorida">
Blablablablblabla
Blablablablblabla
Blablablablblabla
</div>

</body>
</html>

Um comentário:

  1. poo muito legal, valeu cara
    você me ajudou muito : )

    ResponderExcluir