Photo Booth

Não é nenhuma novidade que iPods, iPhones, iMacs e MacBooks ganham mais força a cada dia que passa, mas este post não é para falar sobre a Apple, mas em especial sobre um software muito legal disponível nos produtos Apple que possuem webcams integradas.

O Photo Booth é um software de captura que possui diversos efeitos visuais, podendo ser aplicados em tempo real nas imagens capturadas pela webcam. Aproveitei o embalo para brincar um pouco:

Desse jeito Steve Jobs vai acabar me convencendo a ter um Mac!

CRIR: Checkbox & Radio Input Replacement

Para aqueles que se recusam a aceitar aquela aparência crua e sem-graça dos checkboxes e radio buttons, o CRIR (Checkbox & Radio Input Replacement) pode vir a ser um forte aliado. Utilizando Javascript e CSS, ele permite personalizar esses elementos, dando mais graça e interatividade aos formulários.

Além da questão estética, outro ponto a ser ressaltado é o fato dos elementos manterem a renderização padrão caso o script não seja carregado pelo browser. Você pode fazer o download e aprender a implementar o CRIR no site do autor

Adobe Cards

Foi com um conceito impecável e muita criatividade que a Adobe lançou recentemente o hotsite Adobe Cards, para a divulgação do Creative Suite 3.

CSS Sprites

CSS Sprites nada mais é do que unirmos diversas imagens em apenas um arquivo, utilizando CSS para posicioná-las e mostrá-las em seu HTML. O principal objetivo da utilização desta técnica é a economia de requisições HTTP, fazendo com que seu Site ganhe performance e economize banda. Vamos à prática:

Imagem

Unimos as imagens utilizadas em apenas um arquivo:

XHTML

Montamos uma lista inserindo uma classe para cada “a”, desta forma conseguiremos manipular cada imagem separadamente:

<ul>
	<li><a href="#" title="Aspira Soldier" class="aspira_soldier">Aspira Soldier</a></li>
	<li><a href="#" title="Elite Soldier" class="elite_soldier">Elite Soldier</a></li>
	<li><a href="#" title="Sniper Soldier" class="sniper_soldier">Sniper Soldier</a></li>
	<li><a href="#" title="Gas Soldier" class="gas_soldier">Gas Soldier</a></li>
</ul>

CSS

Definimos no “a” o background com a nossa imagem e nas classes criadas manipulamos onde serão buscados os trechos desejados da imagem através da propriedade “background-position”. Seguindo esta mesma linha, definimos o “a:hover” de cada classe:

ul li{float:left}
ul li a{float:left;display:inline;margin-right:5px;border:1px solid #EEE;width:100px;height:100px;text-indent:-15000px;background-image:url(soldiers.gif)}
ul li a:hover{border-color:#999}

/* Aspira Soldier */
ul li a.aspira_soldier{background-position:0 0}
ul li a.aspira_soldier:hover{background-position:0 -100px}

/* Elite Soldier */
ul li a.elite_soldier{background-position:-100px 0}
ul li a.elite_soldier:hover{background-position:-100px -100px}

/* Sniper Soldier */
ul li a.sniper_soldier{background-position:-200px 0}
ul li a.sniper_soldier:hover{background-position:-200px -100px}

/* Gas Soldier */
ul li a.gas_soldier{background-position:-300px 0}
ul li a.gas_soldier:hover{background-position:-300px -100px}

Resultado

Temos o famoso efeito rollover, onde passando o mouse sobre cada imagem ela é trocada por outra, confira.

Olá mundo dos Blogs!

O Blog veio no intuito de substituir o convencional portfolio online por um conteúdo útil aos profissionais da área, abrangendo temas relacionados à Design, Padrões Web, Tecnologia e disponibilizando alguns dos meus trabalhos.