Image drop shadow with DOM and CSS

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 20×20px, 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. ;)

Esta postagem foi criada em 5/11/06 às 7:01 pm e pertence à(s) seguinte(s) categoria(s): CSS, DOM, Desenvolvimento, Lab. Você pode receber os comentários para esta mensagem via RSS 2.0 feed. Você pode, também, inserir uma resposta, ou inserir um trackback em seu site.