Como alterar a cor da imagem apenas com CSS

Neste post, vou mostrar como mudar (parte da) cor da imagem com CSS puro. Isso é muito útil se você deseja criar um seletor de cores de produto em seu site. Vamos dar uma olhada? 

ORGANOGRAMAS E DIAGRAMAS DE BLOCO

Com alguns poucos minutos de pesquisa eu encontrei o Gliffy, um site que faz criação de diagramas online em Flash, muito fácil de se cadastrar e usar, basta arrastar os objetos para o diagrama da forma como desejar.

Você consegue criar diagramas em: UML, Flowchart (fluxograma), Processo de Desenvolvimento, Floorplan (Planta de andar), Diagramas de Classe, Diagramas de Rede e até um Diagrama de percurso de um campo de Golfe!?!?!?

Visite a página de Exemplos do site e confira o que é possível fazer.

Agora pense um pouco...

Um diagramador Online, some a isso os vários programas de e-mail gratuito de grande capacidade de armazenamento da internet, o Google Docs e Google Sprendsheet para criar seus textos e planilhas, o Google Agenda (ou Google Calendar) para agendar seus compromissos e ainda ser notificado via SMS, o Picasa Web ou o Flickr para armazenar as suas fotos, um site pra gerar seus próprios PDFs um Desktop Virtual como o Page Flakes e um aplicativo online para criar suas apresentações já saindo do Forno, logo mais tudo o que nós iremos precisar é de uma máquina com um Sistema Operacional, um navegador Web e um ponto de rede!

Venha logo Windows Seven.

EVENTO ONMOUSEOVER

Os eventos são a maneira que temos em Javascript de controlar as ações dos visitantes e definir um comportamento da página quando se produzam. Quando um usuário visita uma página web e interage com ela se produzem os eventos e com Javascript podemos definir o que queremos que ocorra quando se produzam.

Com Javascript podemos definir o que acontece quando se produz um evento como poderia ser que um usuário clique sobre um botão, edite um campo de texto ou abandone a página.

Como se define um evento

Para definir as ações que queremos realizar ao produzir um evento utilizamos os manipuladores de eventos. Existem muitos tipos de manipuladores de eventos, para muitos tipos de ações do usuário. O manipulador de eventos se coloca na etiqueta HTML do elemento da página que queremos que responda às ações do usuário.

Evento ONMOUSEOVER é ativado quando o cursor passa por cima (sem clicar) de um link ou de uma imagem.
Este evento é bastante prático, por exemplo, para inserir explicações na barra de status ou mesmo como uma pequena janela tipo info-objeto.

O exemplo abaixo otiliza esse evento para mudar a cor de fundo da página ao passar o mouse no link.
Caso não esteja conseguindo ler baixe o arquivo.