A lista de postagens do blog LearningjQuery.com tem uma data legal à esquerda, assim:
Podemos ver na imagem que “2009” está organizado verticalmente no lado direito. Use o Firebug para visualizar o elemento. O texto "2009" aparece na estrutura HTML. Este artigo apresenta dois métodos para obter esse efeito.
1. Use a tecnologia Sprite para alcançar
O processo de implementação foi apresentado em detalhes por Chris Coyier no artigo " Técnica de exibição de data com Sprites ". Aqui está uma breve descrição do processo de implementação. Obviamente, não queremos usar uma imagem separada para cada data, então integramos em uma imagem e organizamos o ano, o mês e o dia em diferentes áreas da imagem, conforme mostrado na figura:
1. HTML
A estrutura HTML da página é a seguinte:
junho
30
2009
O contêiner .postdate contém três áreas, correspondentes ao ano, mês e dia, o que garante a integridade semântica.
Em um sistema CMS como o wordpress, o código backend é assim:
2.CSS
CSS é onde os sprites realmente entram em ação, usando os atributos de classe definidos em HTML para permitir a exibição das imagens correspondentes.
Primeiro, deixe o container com o atributo de classe .postdate ser posicionado relativamente, para que as três áreas contidas nele sejam posicionadas de forma absoluta e utilizem a mesma imagem de fundo. Defina suas respectivas largura e altura e mova o texto para fora para revelar a imagem de fundo.
Em seguida, defina posições de fundo específicas para cada mês (12), todos os dias (31) e todos os anos (com base em 10 anos) para exibir as imagens correspondentes.
.postdata {
posição: relativa;
largura: 50px;
altura: 50px;
flutuar: esquerda;
}
.mês, .dia, .ano {
posição: absoluta;
recuo do texto: -1000em;
imagem de fundo: url(/wp-content/themes/ljq/images/dates.png);
repetição em segundo plano: sem repetição;
}
.mês { topo: 2px esquerda: 0; largura: 32px;
.dia {topo: 25px; esquerda: 0; largura: 32px;
.ano {inferior: 0; direita: 0; largura: 17px altura: 48px;}
.m-01 {posição de fundo: 0 4px;}
.m-02 {posição de fundo: 0 -28px;}
.m-03 {posição de fundo: 0 -57px;}
... mais assim ...
.d-01 {posição de fundo: -50px 0;}
.d-02 {posição de fundo: -50px -31px;}
.d-03 {posição de fundo: -50px -62px;}
... mais assim ...
.y-2006 {posição de fundo: -150px 0;}
.y-2007 {posição de fundo: -150px -50px;}
.y-2008 {posição de fundo: -150px -100px;}
... mais assim ...