Posts Tagged CSS
Firefox 3.1 Alpha 2 liberado
A versão Beta do Firefox 3.1 Alpha 2, esta liberada para download no site do Mozilla Foundation, esta versão conta com vários recursos, dentre eles:
Suporta novas Tags do HTML 5;
Suporte aos códigos CSS 2.1 e CSS 3;
Agora também é possível como no google Chrome arrastara a aba e transforma-la em uma janela diferente.
A engine utilizada na renderização das páginas é o mesmo Gecko, porém na versão 1.9.1, como foi citado acima, sendo capaz de reconhecer diversas funções do CSS.
Versão para Windows aqui.
Versão para MacOS X aqui.
Versão para Linux aqui.
Dicas de CSS3 – Na prática
Posted by root in CSS, Programação, web 2.0 on 25/08/2008
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.