Internet, CSS e Photoshop
CSS
Por que usar CSS Reset?
25/07/10
Muito se discute sobre o uso de CSS Reset em desenvolvimento web. É um verdadeiro divisor de águas. Há quem o odeia e quem não viva sem (meu caso).
Especialistas divergem entre si e são muito políticos em suas defesas quanto ao uso ou não de resets. Tanto que confundem a cabeça de novatos nessa área e só fazem aumentar a necessidade de um veredito.
Pois bem, resolvi peitar uma defesa baseada em problemas que enfrento diariamente. E defino minha conclusão com uma pergunta mais que direta: “Como eu criava sites antes sem usar um CSS Reset?”
@font-face CSS com ajuda do Google font API
20/05/10
Em um artigo que escrevi sobre o uso de @font-face e a conversão de fontes do formato TTF para EOT abordei o modo mais prático de implementação de fontes diversas para criação de sites mais, digamos, elaborados. Expliquei como e com o que converter fontes, e as linhas de código em CSS para implementação.
Agora vou explicar novamente o uso do @font-face abordando uma, na verdade duas, ajudas muito bem-vindas do gigante do Vale do Silício: a Google font API e o Google font directory.
Lista de itens contornando imagem
15/04/10
Já tentou fazer uma lista de itens (<ul>) contornar uma imagem? Simples. Um float:left (ou right) na própria imagem resolve de imediato.
E se os itens da lista (<li>) forem estilizados com alguma imagem de fundo, já viu o que acontece?
Lista de itens horizontal
12/04/10
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.
Borda arredondada com Javascript
09/04/10
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:
- Dá pra implementar usando somente CSS e algumas poucas imagens ou é necessário Javascript?
- Se for por CSS+imagens, funciona direitinho no IE?
- 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.
Alê Mazzariolli
Barril de Ideias
Cozinha Travessa
Diego Franco
Flávio "Japs" Kaminisse
Leonardo Ota
Revolução etc.
Tiago Lemos