Dê efeitos às fotos com HTML

As imagens desempenham um papel importante no design da web. Nos sites, as imagens são incorporadas usando-as como pano de fundo e para melhorar a navegação. Se você não usar linguagens de script como JavaScript ou programas interativos como Adobe Flash, as opções de efeito serão limitadas. Você pode aplicar alguns efeitos simples com estilos, usando HTML e CSS.

HTML e CSS

A linguagem de marcação de hipertexto (HTML ou espanhol “linguagem de marcação de hipertexto”) é uma linguagem de autor comum usada pelos desenvolvedores da Web para criar sites estáticos. A estrutura de uma página da web é estabelecida com HTML. Embora seja bom na criação do esqueleto do seu projeto da web, não é muito para usar como estilo ou para efeitos. Para isso, as folhas de estilo em cascata (CSS) são usadas e complementadas com o HTML, permitindo adicionar elementos gráficos e estilos à sua página da web. Por exemplo, se você deseja que o texto apareça em negrito em todos os títulos de cada página, você pode fazê-lo com CSS

Opacidade da imagem

Um dos efeitos gráficos mais comuns é a opacidade. A opacidade determina o grau de transparência de uma imagem encontrada no site. Se você deseja colocar uma imagem de plano de fundo no seu site e precisa reduzir a opacidade para criar um efeito mais transparente, é possível fazê-lo com CSS. Coloque o código CSS correspondente na tag HTML :

Neste exemplo, a opacidade foi definida em “50”, reduzindo assim a visibilidade das imagens na página da web pela metade.

Efeito “Passe o mouse sobre”

Você pode ter o efeito de opacidade um passo adiante e alterar a opacidade de uma foto quando o cursor do usuário passa sobre ela. Este é um efeito de “passar o mouse”. O código é semelhante a uma simples alteração de opacidade e também é colocado dentro da tag HTML . Esse é um bom efeito do uso dos botões de navegação.

Você pode ver os comandos “onmouseout” e “onmouseover”. Ao carregar a página, esse código reduz a opacidade da imagem em 50%; quando você passa o cursor sobre ela, aumenta para% 100; quando você segue os cursos da imagem, é reduzido novamente para% 50.

Flutuar (flutuar)

“Flutuar” é outro efeito simples de HTML e CSS para uma foto. O “flutuador” define onde uma imagem aparecerá em uma tabela, célula ou documento. O comando “flutuar” usa as propriedades de esquerda, direita e centro. Você pode usar isso para colocar uma imagem no texto ou para criar uma série de imagens corretamente inseridas em uma galeria. Você pode definir isso dentro da tag HTML principal da seguinte maneira:

No exemplo anterior, foi indicado que todos os elementos HTML com a tag flutuam para a esquerda no documento.

Referências

 

Você pode estar interessado:

Deixe um comentário