Photoshop: Criando uma textura de background para seu site

20/04/10

Escrito por ed1nh0 em Photoshop

8 comentários

Você encontrou “aquela” textura pela internet e deseja usá-la como background no seu site. Mas a imagem não é grande o suficiente para cobrir a tela toda. Ao perceber que quando a textura se multiplica pela página (formando um pattern), as bordas dessa imagem ficam visíveis “quebrando” a homogeneidade da textura.

Tomemos o exemplo abaixo (clique na imagem para ampliar).

textura original com vigas de madeira horizontais

Mais >

, , ,

Lista de itens contornando imagem

15/04/10

Escrito por ed1nh0 em CSS

3 comentários

Já tentou fazer uma lista de itens (<ul>) contornar uma imagem? Simples. Um float:left (ou right) na própria imagem resolve de imediato.

lista de itens com list-style-type:square; contornando a imagem corretamente

E se os itens da lista (<li>) forem estilizados com alguma imagem de fundo, já viu o que acontece?

Mais >

,

Salvando favicons direto do Photoshop

13/04/10

Escrito por ed1nh0 em Photoshop

6 comentários

Existem algumas dezenas de serviços online que podem tanto gerar quanto salvar uma imagem criada por você como favicon para seu site (alguns até hospedam o arquivo).

Cito alguns que gosto de testar:

exemplo de favicon

Mais >

, ,

Lista de itens horizontal

12/04/10

Escrito por ed1nh0 em CSS

7 comentários

Criar uma lista de itens é simples.

<ul>
  <li>Box 1</li>
  <li>Box 2</li>
  <li>Box 3</li>
</ul>

Para que os itens fiquem na horizontal você pode usar display:inline; ou float:left; nos itens e tudo certo.

Neste exemplo vou expôr um problema que me ocorreu há algum tempo: Um destaque de notícias de 3 em 3 em blocos em linha, com largura e altura fixa.

lista de itens contendo 3 box com largura e altura definidos e em linha

Mais >

,

Borda arredondada com Javascript

09/04/10

Escrito por ed1nh0 em CSS

3 comentários

Borda arredondada (rounded corner) ou border-radius em CSS é uma técnica amplamente utilizada em sites. Mas devido a velha ladainha de ter que fazer “funcionar” no IE, vez ou outra temos que recorrer a soluções alternativas. E, sempre que busco (falo por mim) uma solução de implementação para isso, sei que não vai ser possível de usá-la devido às limitações do IE. Ainda assim me faço essas três perguntas:

  1. Dá pra implementar usando somente CSS e algumas poucas imagens ou é necessário Javascript?
  2. Se for por CSS+imagens, funciona direitinho no IE?
  3. Se for por Javascript, qual o resultado quando eu o desabilito?

Sem fazer qualquer menção ao CSS3 e seja qual for o método de implementação, sempre coloco o conceito de Graceful Degradation em primeiro lugar nessas situações. Ou seja, se sem a borda arredondada meu layout não perder muito em detalhes, ótimo. Caso contrário tenho que repensar o projeto.

Mais >

, , ,
«1234»