1. #1
    Avatar de helldanger1
    Registo
    Aug 2007
    Localização
    in to the flames of hell
    Idade
    43
    Posts
    29.633

    Padrão Atributo gradiente de cores em borda com CSS e Firefox

    Possibilidade de definir um gradiente de cor na borda dos elementos com CSS, em um atributo não padronizado de Firefox.
    Por Miguel Angel Alvarez - Tradução de JML



    Investigando um pouco algumas das propriedades novas que vai trazer CSS 3, para completar a informação do artigo Introdução a CSS 3 , me deparei com um atributo para mudar a cor da borda dos elementos da página, que nos permite definir a cor com uma sucessão de distintos valores de cores. Atualmente, com CSS podemos definir separadamente as cores da borda de um elemento, de cima, direita, abaixo e esquerda. Porém, não nos referimos a poder dar uma cor separada para cada parte da borda, e sim, a aplicar várias cores distintas a uma parte, por exemplo, à parte de cima da borda.

    Vi esta propriedade comentada em algum lugar como de CSS 3, porém segundo vejo no rascunho da especificação de CSS 3 para bordas e fundos, publicado pelo W3C, não aparece esta nova característica como parte do novo padrão.

    Por isso, temos que ressaltar que esta propriedade não é de CSS 3, e sim que se trata de um atributo não padrão de CSS, criado por Mozilla e que, portanto, se pode ver em seu navegador mais conhecido: Firefox. Dito de outra forma, é uma extensão de CSS realizada por Mozilla. Na página de Mozilla podemos encontrar mais informação sobre esta extensão de CSS: https://developer.mozilla.org/en/CSS...-bottom-colors

    Os atributos aos que nos referimos que permitem definir várias cores para cada uma das partes da borda são os seguintes:

    -moz-border-top-colors
    -moz-border-right-colors
    -moz-border-bottom-colors
    -moz-border-left-colors

    Em cada um dos atributos se define a cor, podendo especificar uma lista de cores, separadas por espaços, que se aplicarão a cada uma das partes da borda, de dentro para fora. Claro que a borda tem que ter uma largura maior que 1 para que se vejam as distintas cores. Com uma largura de 2 pixel se poderão ver 2 cores diferentes, com uma largura de 3 poderemos definir 3 cores e assim sucessivamente.



    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

  2. #2
    Avatar de helldanger1
    Registo
    Aug 2007
    Localização
    in to the flames of hell
    Idade
    43
    Posts
    29.633
    Para ver uma das possibilidades que daria o uso deste atributo podemos ver um exemplo em uma página à parte. (Porém, há que ter em conta que só se verá corretamente em Firefox).

    O código para criar esse gradiente de cores seria o seguinte:

    <style type="text/css">
    .coresborda{
    border-style: solid;
    border-width: 10px;
    -moz-border-top-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300;
    -moz-border-right-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300;
    -moz-border-bottom-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300;
    -moz-border-left-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300;
    }
    </style>

    É uma pena que seja um atributo unicamente desenvolvido por Mozilla, embora se o suporte a estes atributos se realizar por mais navegadores e se W3C tiver bem, talvez em algum momento se converta em um padrão de CSS.

    No momento não passa de uma mera curiosidade e possibilidade de personalização especial para os usuários de Firefox e outros navegadores baseados em Mozilla.


    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

Tags para este Tópico

Permissões de Postagem

  • Você não pode iniciar novos tópicos
  • Você não pode enviar respostas
  • Você não pode enviar anexos
  • Você não pode editar suas mensagens
  •  

Conectar

Conectar