Eu e a galera do #horaextra organizamos as Lightning Talks e as sessões de Dojo. O pessoal do Dojorio e da PythOnRio completaram a turma.

Para quem viu e quer saber mais ou para quem não viu, segue a lightning talk que eu apresentei:

• A Mágica dos CSS Sprites (slideshare)
• Baixe o código exemplo

Tirando algumas restrições, como o uso de javascript em alguns casos e <span> em outros, fiz uma mistura entre estas soluções e adicionei ao recurso já criado Grid layout para formulários.

Veja um exemplo.

Peneirando…

As soluções [2] e [3] foram as que mais me agradaram, porém tinham o inconveniente do uso de <span> na marcação. Para não perder a viagem, gostei muito do estilo dos WII Buttons e usei a imagem deles como exemplo para a minha solução.

Criando os botões

A solução foi simples, pois o grid layout já tinha o <label> como container dos botões de submissão. Resolvi, então, explorar este ponto para gerar os botões arredondados.

Basicamente, criei apenas uma classe adicional para os labels que possuem botões. Chamei-a de lblbutton. A criação ficou da seguinte forma:

Antes…

1. <label class="small"><input type="submit" class="button" value="Enviar" /></label>

… Depois

1. <label class="small lblbutton"><input type="submit" class="button" value="Enviar" /></label>

E no estilo…

1. .lblbutton {
2. margin: 0;
3. padding: 0 0 0 8px;
4. background: #fff url(bg-button.gif) no-repeat 0 0;
5. }
6.  
7. .lblbutton .button {
8. border: 0;
9. padding: 0 8px 0 0;
10. background: #fff url(bg-button.gif) no-repeat top right;
11. height: 24px;
12. }

Então, é isso! Enjoy! :)

Baixe os arquivos via Google Code

Analizei a estrutura dos arquivos e fiquei entusiasmado. O projeto Blueprint é, sem dúvida, uma das melhores referências livres de CSS da atualidade.

O projeto é dividido nas seções que se seguem:

• Estilização de versões para impressão;
• Estilos para botões;
• Grid Layouts;
• Tipografia.

Planos futuros:

• Suporte a PNG para IE 5.5+;
• Desenho de layouts líquidos.

Vale a pena conferir, novamente, o link.

Blueprint é uma ótima solução para desenvolvedores experientes padronizarem seus trabalhos e para iniciantes pegarem o foco do que é, efetivamente, desenvolver para web semanticamente. :).

Hoje é dia de ficar nu!

Mas só até 00:00hs. :P

Atualização 2007-04-06 00:52 hs: Pronto! Vestido novamente. Até o próximo ano. :P

Inspirado pelos artigos do A List Apart, há um tempo venho pensando numa solução para criar sombras em imagens sem atrapalhar minha semântica, ou seja, com o mínimo de manipulação da marcação em torno da imagem. Depois de alguns estudos e testes, cheguei num resultado onde é necessário utilizar apenas uma classe para criar as sombras.

Inspired by two articles of A List Apart, I come thinking about a solution to create drop shadows on images without confuse my semantic, that is, with the minimum of manipulation in markup around the image. After some studies and tests, I arrived in a result where it’s necessary to use only one class to create the drop shadows.

Como funciona

How it works

O conceito da criação das sombras é o seguinte:

1. Adicionar um div, via DOM, em volta da imagem;
2. Setar este div com a mesma largura da imagem, para que a sombra fique proporcional à largura da mesma;
3. Inserir um background que simule uma sombra neste div via CSS;
4. Deslocar, levemente, a imagem para obter o tamanho de sombra desejado, também via CSS.
5. Pronto!

1. Insert a div, with DOM, around the image;
2. Set this div with the same width of the image;
3. Insert a shadow background on div with CSS;
4. Dislocate, lightly, the image to get the desired size of drop shadow, also with CSS.
5. That’s all!

Veja um exemplo:

Take a look:

1. <img src="../avatar-80x80.gif" class="shadow" />

Resulta em:

Results in:

Os códigos

The codes

Criando o container, via DOM, para receber a sombra da imagem.

1. setImageDropShadow = function (searchClass,tag) {
2.  
3. var browser=navigator.appName;
4. var agent = navigator.userAgent;
5. var b_version=navigator.appVersion;
6. var version=parseFloat(b_version);
7.  
8. var opera = false
9.  
10. if(agent.indexOf("Opera")!=-1){
11. var versionindex=agent.indexOf("Opera")+6;
12. if (parseInt(agent.charAt(versionindex))>=8)
13. opera = true;
14. }
15.  
16. var els = document.getElementsByTagName(tag);
17. var pattern = new RegExp("\\b"+searchClass+"\\b");
18. for (i = 0; i < els.length; i++) {
19. if ( pattern.test(els[i].className) ) {
20. var NewDiv = document.createElement('div');
21. NewDiv.className = "shadow-container";
22.  
23. if (((browser=="Microsoft Internet Explorer") && (version>=4) && (!agent.indexOf("MSIE 7") != -1)) || (opera)) { // Fix IE 6 and Opera width problem
24. NewDiv.style.width = (els[i].width - 4).toString() + "px";
25. } else {
26. NewDiv.style.width = (6 + els[i].width).toString() + "px";
27. }
28.  
29. var parentDiv = els[i].parentNode;
30. parentDiv.insertBefore(NewDiv, els[i]);
31. NewDiv.appendChild(els[i]);
32. }
33. }
34. }
35.  
36. window.onload = function() {
37. setImageDropShadow('shadow','img');
38. };

Estilizando a sombra.

1. .shadow-container {
2. position: relative;
3. background: url(bg-small-shadow.png);
4. }
5.  
6. .shadow-container img {
7. position: relative;
8. display: block;
9. top: -3px;
10. left: -3px;
11. margin: 0;
12. padding: 2px;
13. background: #fff;
14. border: 1px solid #e1e1e1;
15. }

Para criar a sombra, utilizei uma imagem de 20x20px, em tom de cinza claro (#d8d8d8) e 50% de transparência. A imagem pode ser vista aqui!

Get the drop shadow background here!

Detalhe importante! A parte em negrito, a seguir, é a que determina a distância da sombra em relação à imagem. Quanto menores os valores inseridos para top e left, maior será a distância da sombra em relação à imagem.

Important detail! The lines in boldface, below, are that determine the distance between the image and the drop shadow. Change the values for better use.

1. .shadow-container img {
2. position: relative;
3. display: block;
4. top: -3px;
5. left: -3px;
6. margin: 0;
7. padding: 2px;
8. background: #fff;
9. border: 1px solid #e1e1e1;
10. }

Tudo o que você precisa para usar sombras em suas imagens

All you need to work with it

• image-drop-shadow.js
• image-drop-shadow.css
• bg-small-shadow.png

Esta solução foi testada no Opera 9.x, Firefox 1.5.0.7, IE 6.0, IE 7.0 RC1 e Safari 2.0.4.

Reportes de erros, bugs, e, pricipalmente, sugestões são muito bem-vindos. ;)

Pensando nisso, um dos meus últimos projetos foi efetuado completamente sem tabelas (até para textos tabulados). O resultado foi interessante, mas ainda assim não foi possível chegar à todos os recursos (como larguras flexíveis) que as tabelas proporcionam. Caso eu fosse tentar me aventurar nisso, com certeza perderia um pouco de tempo, em vão.

Darei um exemplo. Ele funciona bem no IE, Opera e Firefox (ou firer0x, apelido carinhoso).

O código

Definindo as colunas e células da nossa “tabela”.

Definindo o título:

1. <div class="row-order">
2. <div class="col-title-1">Código</div>
3. <div class="col-title-2">Produto</div>
4. <div class="col-title-3">Quantidade</div>
5. </div>

Definindo o conteúdo:

1. <div class="row-order">
2. <div class="col-1">102</div>
3. <div class="col-2">Arroz</div>
4. <div class="col-3">1kg</div>
5. </div>

Definindo o CSS:

1. #content .row-order {
2. width: 500px;
3. background: #fff;
4. margin: 0;
5. border-bottom: 1px dotted #c7c7c7;
6. }
7. /**/
8. #content .row-order .col-title-1 { /* Título tabela - primeira coluna */
9. display: table-cell;
10. margin: 0;
11. padding: 10px;
12. width: 60px;
13. background: #f1f1f1;
14. font-weight: bold;
15. color: #0678b3;
16. border-left: 1px solid #fff;
17. }
18. /**/
19. * html #content .row-order .col-title-1 { /* Título tabela - primeira coluna (hack IE) */
20. display: list-item;
21. float: left;
22. }
23. /**/
24. #content .row-order .col-1 { /* Conteúdo tabela - primeira coluna */
25. display: table-cell;
26. margin: 0;
27. padding: 10px;
28. width: 60px;
29. border-left: 1px solid #fff;
30. }
31. /**/
32. * html #content .row-order .col-1 { /* Conteúdo tabela - primeira coluna (hack IE) */
33. display: list-item;
34. float: left;
35. }
36. /**/
37. /* E assim sucessivamente até chegar até a terceira coluna respeitando o tamanho total de 500px para cada célula da tabela. Ou seja: com três colunas, divida os 500px em três como desejar.*/

Esta técnica dá certo, porém vejam o trabalho para a construção de toda a marcação, além do inconveniente do uso dos hacks para IE. Todas as colunas posteriores à primeira precisarão de ajustes via hack para ficarem com seu tamanho similar ao apresentado em outros browsers.

A solução

Na realidade não é bem uma solução, já que, ao meu ver, deve ser a forma correta de marcação. Fica como uma conscientização, então. Lá vai:

1. <table>
2. <caption>Minha tabela de produtos</caption>
3. <thead>
4. <tr>
5. <th>Código</th>
6. <th>Produto</th>
7. <th>Quantidade</th>
8. </tr>
9. </thead>
10. <tbody>
11. <tr>
12. <td>102</td>
13. <td>Arroz</td>
14. <td>1kg</td>
15. </tr>
16. </tbody>
17. </table>

Para este trabalho, uma simples tabela de três colunas resolveria o problema. E melhor: sem grandes truques de CSS. Tabelas servem para isso! Use-as para isso!