Publicado por: Paulo Fernandes | 21/set/2011

Enriqueça a experiência do website com personalização, utilize o ::selection

Olá pessoal.

As coisas na movin’ on andam muito bem e um novo cliente pediu uma funcionalidade muito peculiar. Ele queria que quando os usuários selecionassem alguma coisa no site, ele mudasse a cor de fundo e da seleção, fugindo do padrão azul e branco.

Esse cliente é muito bom e falou, tem que funcionar em browser moderno, foi o que precisava ouvir. 🙂

Alias é tudo que os desenvolvedores da nossa área querem né?!

Para fazer isso usei o pseudo-element ::selection

Só para variar um pouco, os navegadores não seguem um padrão, mas dessa vez o que foge do padrão é o Firefox.

Veja o código necessário para funcionar no IE e no Chrome.

::selection { background:#bada55; color:#ffffff; }

 

Agora veja o código para funcionar no Firefox.

::-moz-selection{ background:#bada55; color:#ffffff; }

 

Nesse elemento, você pode mudar a cor de fundo (background-color) e a cor do texto (color).

Veja o exemplo de uso do selection – CSS3

Até o próximo

Anúncios

Responses

  1. muito bom!

  2. 5 anos depois, e ainda usamos esta tecnologia para construção dos sites até mesmo mais modernos…
    Belo artigo, Dodilei, foi muito bom ler e saber mais curiosidades dessa tecnologia que tanto nos ajuda…
    Vale lembrar que o Google Developers ajuda bastante no uso dessa tecnologia. Inclusive a entender a propriedade de seletores CSS3.

    Alan Design


Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Categorias

%d blogueiros gostam disto: