- - Adicione efeito de sombra às imagens com o CSS3 Auto Code Generator

Adicionar efeito de sombra às imagens com o CSS3 Auto Code Generator

CSS permite estilizar suas páginas da Web com facilidade, muitofacilmente. Você pode definir mais de cem estilos de texto em uma página (é claro que sua página sairá como uma tenda de circo), mas trata-se da facilidade e flexibilidade oferecidas pelo uso de CSS em páginas da web.ThemeShock possui um gerador de codificador CSS que o ajudará a adicionarefeitos de sombra projetados diferentes para suas imagens em apenas alguns cliques. Você escolhe o efeito e ele escreve o código; efeitos podem ser adicionados à parte inferior, lados, superior e inferior, inferior esquerdo, inferior direito, superior direito e inferior esquerdo ou nos cantos diagonais.

css-shadow-generator_HQ

Antes de você começar; verifique a dimensão do seuimagem (a que você deseja adicionar o efeito). O gerador de código possui um limite superior e inferior predefinido de 130 - 347px para a largura e altura da imagem. Se as dimensões da sua imagem excederem isso, você poderá editar a largura e a altura posteriormente. O código também permite determinar a opacidade e a desfocagem da sombra. Você não pode carregar sua imagem no gerador de código, uma imagem padrão será usada para que você possa visualizar o efeito.

No menu suspenso, escolha qual sombraCom o efeito desejado, toda vez que você altera um dos seletores, um novo código é gerado, portanto, use o mais recente. Depois de escolher o efeito desejado, defina a largura e a altura da sua imagem usando a barra de rolagem horizontal. Use as teclas de seta para a direita e para a esquerda quando quiser pressionar um pouco o botão. Defina o desfoque e a opacidade e o código serão gerados. Aumentar ou diminuir um desses parâmetros criará um novo código.

Css3 Drop Shadow

Quando tudo estiver definido, copie o código CSS em umArquivo CSS e nomeie-o para sua página da web (ou tema). O código HTML que entra na sua página da web também é gerado (é único para cada efeito que você escolher no menu suspenso), copie-o e coloque o código da imagem (img src = "") onde diz 'seu código aqui'.

A melhor coisa sobre esse gerador de código é quefunciona e é grátis. Ele possui restrições de dimensão para imagens, mas elas podem ser editadas a partir do código. Se você usar uma imagem transparente (como a acima), ela terá um fundo cinza fosco. Você pode editar a cor do plano de fundo posteriormente no código. (Edite o fundo da linha de código: #ccc). O código também fornece um quadro de 5px para todas as imagens. Você também pode editar o quadro, mas aumentar e diminuir a largura ocultará ou revelará a sombra mais do que o necessário, por isso é melhor deixá-lo sozinho.

Visite o ThemeShock CSS Drop Shadow Generator

Comentários