Para quem não conhece, colorpicker é um seletor de cores. Ou seja uma “janela” com n cores predefinidas.

Esse exemplo simula o colorpicker da Macromedia, disponível no Flash, Dreamweaver, Fireworks e etc. Como o picker da Macromedia, ele possui um display para pre-visualizar a cor e o seu valor hexadecimal ao passar o mouse sobre ela (onmouseover).

Possui métodos getColor para resgatar o valor escolhido, onchange para efetuar uma ação ao escolher uma determinada cor, entre outros.

É totalmente estilizado por CSS, logo poderá deixá-lo como quiser. Personalizando-o.

Para utilizá-lo basta indexar-lo a sua página com a tag <script> e depois criar uma nova variável do tipo Colorpicker().

Ex:

...

<script type="text/javascript" src="colorpicker.js"></script>

...

var meuCP = new ColorPicker(100, 38); // x , y

meuCP.setVisible(true);

...

Para visualizar-lo funcionando clique aqui.

Há algum tempo postei sobre como centralizar verticalmente e horizontalmente usando CSS, o que gerou alguns posts de visitantes revoltados porque não funcionava no IE7, fato que na época eu não tinha testado para essa versão do IE. Então, mesmo depois de muito tempo da versão já lançada, deixo um novo post testados nos browsers [...]

Há algum tempo eu fiz um script de uma tooltip (aquela caixa que abre ao passar o mouse sobre algum link). Infelizmente o código não é dos menores, o que deixaria muito grande o post e sua explicação. Mas não está difícil de entender. Qualquer dúvida é só deixar um comentário que eu comento logo [...]

Muitos sites, portais, adotaram o banner flutuante, aquele no qual ao você passar o mouse por cima ele “cresce” pela página e mostra os detalhes da propaganda, promoções, etc. A idéia então consiste em posicionar o filme por cima dos outros elementos e ele tem que ter o fundo transparente para não “tampar” o conteúdo. [...]

Uma grande dúvida que sempre surge é como centralizar um elemento no HTML, tanto verticalmente quanto horizontalmente, usando CSS. Há duas maneiras de se fazer isso sem muito trabalho. A primeira consiste em definir a posição do objeto como absolute e suas posições top e left com 50% e tirando a diferença (subtraindo) da metade [...]

Sempre é bom estarmos observando, conhecendo, novos layouts e aprendendo com eles. Já existem inúmeros sites indexadores de sites Tableless (CSS Layout). Abaixo segue uma listagem de alguns deles: http://www.cssdrive.com/ http://cssvault.com/ http://www.cssbeauty.com/gallery/ http://www.cssimport.com/ http://www.stylecrunch.com/ http://www.csselite.com/ http://www.unmatchedstyle.com/ http://cssmania.com/ http://www.cssreboot.com/gallery/ http://www.css-website.com/ http://www.cssbloom.com/ http://www.css-design-yorkshire.com/ http://cssbrain.hu/ http://screenfluent.com/ http://www.isquare.it/ http://www.webdigity.com/cssGallery/ http://www.creative-pakistan.com/ Quer mais? CSS Galleries

Pullquote é um efeito utilizado em jornais (revistas) para destacar uma certa parte do texto. Um exemplo aqui: link. Esses efeitos podem ser criados na sua página usando CSS, há quem use também Javascript. Nesse exemplo usaremos apenas CSS. Crie um novo arquivo HTML. O texto que receberá um destaque ficará assim, dentro da tag [...]

Esses dias no Fórum do Flashmasters perguntaram como poderia fazer um campo de texto que não pudesse ser alterado, modificado. Mas que tivesse uma barra de rolagem. A minha sugestão foi que ao invez de usar um textArea como ele queria, usa-se uma div mesmo, com overflow auto. Exemplo: CSS #contrato { width: 400px; height: [...]

Esse post será voltado para ensinar fazer um menu estilo navbar igual a esse. Para ser mais específico será esse o menu. Vejamos as principais características do menu: imagem de fundo, inline e efeito over. Primeiramente vamos desenhar os botôes do menu, feito isso vamos exportar como gif, para que o fundo fique transparente. Você [...]

Nessa segunda estrutura vamos ver um exemplo de site “tipo portal”. Sem largura fixa, se estendendo na tela e mudando o tamanho (largura) dependendo da resolução do usuário (fluido). Dividido em 5 partes – topo, coluna esquerda, coluna central, coluna direita e rodapé. Você pode ver um exemplo desse layout aqui. Estruturando o XHTML: <!DOCTYPE [...]