Archive for category CSS

Dicas de CSS3 – Na prática

Resolvi traduzir parte do tutorial, sobre as novas especificações do CSS3, e explicando o código detalhadamente.

A observação importante que tratarei neste caso é de que só funciona os códigos no Firefox versão 3 em diante ou no Safari, pois utiliza como engine de interpretação de hipertexto o webkit.

Infelizmente não obtive êxito com o IE, mas em breve creio que deverão haver correções a respeito.

Bom vamos a primeira opção de criarmos bordas arredondadas:

[sourcecode language='css']

.borda {

background-color: #666;
color: #fff;
line-height: 20px;
width: 200px; background-color: #666;
padding: 10px;
-moz-border-radius: 10px;
}
[/sourcecode]

Referencie em um parágrafo em seu html como o exemplo abaixo:

<p class=”borda”>CSS3 – Borda Arredondada</p>

O Resultado que você irá obter será o seguinte:

Agora vamos a explicação do código:

background-color: #666;

Esta linha Define a cor do plano de fundo de sua borda.

color: #fff;

Esta Linha Define a cor do Texto.

line-height: 20px;

Aqui é definida a largura da linha da borda.

width: 200px; background-color: #666;

Aqui define a largura da borda.

padding: 10px;

Define a altura da borda.

-moz-border-radius: 10px;

Eis aqui a tag mais importante, pois aqui esta referenciando que a borda seja arredondada (border radius), mas atentem ao “-moz-”, justamente este comando caracteriza criar uma borda arredondada no firefox.

Agora também podemos criar bordas com efeito gradiente com muita facilidade:

<style>
.box{
border: 8px solid #000;
-moz-border-bottom-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors:    #033 #039 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors:   #033 #039 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors:  #033 #039 #777 #888 #999 #aaa #bbb #ccc;
width:400px;
}

</style>

Coloque em seu html um tag assim:

<p class=”box”>TESTE EM BOX GRADIENTE</p>

O Resultado que você irá ter é o seguinte:

Agora vamos a explicação do código:

A primeira linha define o contorno da borda, a segunda linha define as cores da linha de baixo da borda (bottom), a terceira define as cores da linha de cima (top), a quarta define as cores do lado esquerdo(left), a quinta as cores do lado direito(right) e por fim a última linha define a largura do comprimento do box.

Atentem ao prefixo “-moz-” que serve para ser interpretado pelo mozilla, assim como também no css3 existe o webkit, utilizado no Safari!!!

Vimos que o css3 veio com muito mais recursos para nós desenvolvedores, facilitando nossa vida e ampliando nossas possibilidades!

O material original pode ser encontrado aqui.

Do mais agradeço a visita e espero ter sido útil.

, ,

Nenhum comentário.

CSS 3 – Novidades a Vista

No site Guia do Hardware em sua página de notícias esta destacando algo que interessa aos desenvolvedores web, novas especificações do css3, incluindo um site com novas especificações para por exemplo criar bordas arredondadas somente utilizando o css!

Muito interessante!Vale a pena conferir, pois é de grande ajuda para nós desenvolvedores!!!:)

Veja a notícia aqui.

Acesse o site com um breve tutorial, aqui.

Nenhum comentário.