Pinceladas da WebMovido a: XHTML, CSS, PHP e WebStandards

A cada dia eu fico mais surpreendido com o poder do CSS, e uma propriedade muito interessante do CSS3 que está por vir é o text-overflow, onde ele nos dá a possibilidade de recortar o texto que por exemplo não cabe dentro de um box, e para nos ajudar mais ainda, ele coloca no final da frase 3 pontinhos(…), característica para dizer de que a frase continua. As propriedades disponíveis são as seguintes:

• text-overflow: ellipsis-word;
• text-overflow: clip;

Por exemplo, se pegasse-mos o seguinte texto:

Lorem ipsum dolor sit amet, consectetur

E utilizasse-mos o text-overflow, ele seria renderizado da seguinte forma:

Lorem ipsum dolor sit…

Dessa forma é possível fazer resumos sem usar sequer nenhuma linguagem de programação.

Você é Desenvolvedor Web? Então não pode deixar de conhecer esse site, um repositório com 638 ferramentas divididas por categorias e linguagens de programação.

Mini Tabbed Pages é um método de agregar informação em 6 simples mini-guias(abas), testado e aprovado nos melhores browsers.

<update 23-02-2007>Pra você que teve dificuldades em estar entendendo o código no artigo original, fiz um arquivo HTML somente com o código necessário para estar utilizando esses Mini Tabbeds, só peço que se você estiver o utlizando em seu site, que dê os créditos ao autor do artigo.</update>

Este simples exemplo mostra como inserir quebras de página em nossos documentos, que será usado quando você quiser imprimir alguma página Web:

Veja o exemplo em funcionamento.

O CSS fica da seguinte forma:

.quebrapagina {
page-break-after: always;
}

E o HTML fica da seguinte forma:

<h1>Primera Página</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<br class="quebrapagina" />
<h1>Segunda página</h1>
<p>Texto segunda página...</p>
<br class="quebrapagina" />
<h1>Terceira página</h1>
<p>Texto terceira página...</p>

Testei no Firefox e IE7 e funcionou OK, mas infelizmente no Opera não funcionou, se alguém puder testar em mais browsers e me dizer eu agradeço. Baseado no artigo original de Web Intenta.

Muitas pessoas pensam que a cor de fundo de um site por padrão é branco, não é? Muitos usuários também utilizam a cor de fundo de sua página como branco, não é? Errado. Os navegadores nos permitem sempre definir uma cor de fundo padrão para nossas páginas a nosso gosto, e isso pode trazer efeitos desastrosos dependendo do website, para vocês terem uma idéia, olhem só a página do Yahoo com um background pink:

Referência: CSS Tip: Always define a background color.

Com essa simples técnica você pode identificar cada link com seu respectivo ícone, dando maiores informações aos visitantes do seu site sobre o que ele poderá encontar aos clicar nos seus links. Funciona praticamente em todos os browsers, menos no IE 6, já quem usa o IE 7 pode ficar feliz por que também funciona.

<update>Pra quem não quiser ir até o site e baixar o arquivo, pode estar baixando diretamente por aqui. Seu funcionamento é simples, é só enviar as imagens para o servidor, abrir o arquivo css que está no zip, copiá-lo e mesclar com o seu, está pronto. Se alguém tiver mais algum problema é só entrar em contato.</update>

<update 2>Veja uma outra solução aqui também.</update 2>

Você algum dia já chegou a usar Mapas Mentais?, Não sabe o que é isso? Um mapa mental é basicamente um gráfico com ramificações ao redor de um tema central, cada ramo contendo uma palavra-chave. Útil para organizar muitas idéias em pouco espaço físico, podendo ver tudo de uma só vez, ter uma visão geral, explicação essa muito bem dada pelo Aurélio.

Se não usou, procure usar, e se você já usa, agora é possível criar um Mapa Mental do seu arquivo CSS, veja como ficou o do meu blog:

13Styles.com é um site que oferece gratuitamente vários menus prontos em css para download. Alguns já vem com o arquivo Photoshop incluso para customização. Existem alguns modelos mais sofisticados são pagos, mas se você tem cartão de crédito internacional, o custo dos mesmos é de $10,00.

CSS Docs é um ótimo site que serve como referência sobre CSS, como ele funciona? Vá até o site, digite a propriedade que deseja pesquisar e ele lhe levará até o site da W3C com a propriedade citada, então você sabe que terá uma referência com conteúdo confiável, ótimo pra você que quer começar a aprender, ou pra você que já sabe bastante coisa e precisa de um repositório de consulta de última hora.

Se lembram daquela frase “By feedburner” que fica embaixo do botão do Feedburner que indica o número de assinantes do Feed? Existe uma forma muito simples de “retirar” aquela frase e mostrar somente o botão própriamente dito com CSS:

Vamos ao nosso código CSS:

.feedburner {
height: 19px;
width: 88px;
overflow: hidden;
}

Nosso HTML ficaria assim:

<div class="feedburner">Aqui você coloca o código do seu botão</div>

Veja um exemplo em funcionamento. O que ocorre é que foi criada uma div com 19px de altura, sendo que o botão normal tem 26px, com isso, usando overflow:hidden, ele não cria uma barra de rolagem para o conteúdo excedente, e o mesmo fica invisível.