Ao melhorar as imagens, podemos optar por fazê-lo com o Photoshop e depois montá-lo na página web ou também podemos escolher a opção B: faça-o com as técnicas HTML, CSS e Javascript disponíveis.
Depois do salto, existem muitas técnicas para melhorar as imagens, quase todas feitas com jQuery como base principal ou com CSS3 aproveitando os últimos padrões da web, embora eu lembre que nesse caso perdemos a compatibilidade com alguns navegadores.
Eles estão em inglês, mas são capturados na hora, prometido :)
Fonte | 1ºWD
Imagem CSS3 arredondada com jQuery
Aprenda a envolver uma tag span ao redor do elemento de imagem para obter imagens arredondadas que serão exibidas em todos os navegadores modernos.
2.
Vários planos de fundo e bordas com CSS 2.1
Aprenda a usar os pseudoelementos CSS 2.1 para fornecer até 3 telas de fundo, 2 imagens de apresentação de tamanho fixo e várias bordas complexas para um único elemento HTML.
3.
Dica rápida: várias bordas com CSS simples
Screencast rápido mostrando como obter várias bordas com CSS simples, adicionando mais profundidade aos seus designs. Versão muito mais simples do tutorial anterior.
4.
Múltiplas fronteiras em elementos de tamanho dinâmico com CSS2
Terceira versão de Nicholas Gallagher mostrando o que fazer se você não definir o tamanho do elemento.
5.
Divirta-se com bordas - chanfradas, prensadas e muito mais!
Aprenda como obter efeito pressionado com CSS e alguns truques simples de estilo de borda para obter vários efeitos.
6.
Polaroids com CSS3
Aprenda a usar CSS2 e CSS3 incríveis para transformar uma lista de imagens despretensiosa em um conjunto completo de fotos Polaroid.
7.
Imagem de fundo de página inteira perfeita
Aprenda como adicionar imagem de fundo com CSS que preenche a página inteira com imagem, sem espaço em branco, dimensiona a imagem conforme necessário, não gera barras de rolagem e muito mais.
8.
CSS3 Box Shadow e Image Hover Effects
Explore uma nova maneira de adicionar efeitos de sombra apenas editando uma folha de estilo.
9.
Fancy Thumbnail Hover Effect w / jQuery
Obtenha um efeito de estilo flash elegante com CSS e jQuery.
10.
Como criar um efeito de rollover de imagem CSS simples
Neste tutorial, você aprenderá como criar um efeito de rollover de imagem CSS simples com estilos básicos de HTML e CSS.
11.
tutorial
Floatutorial leva você pelos fundamentos de elementos flutuantes, como imagens, capitulares, botões avançar e voltar, galerias de imagens, listas embutidas e layouts de várias colunas. Confira 4 tutoriais dedicados à flutuação de imagens.
12.
Snazzy Hover Effects usando CSS
Neste tutorial, você examinará a criação de técnicas avançadas de focalização flexíveis usando propriedades CSS2.1.
13.
Rolagens rápidas sem
pré-carga
Ao usar rollovers de imagem CSS, duas, três ou mais imagens devem ser carregadas (e geralmente pré-carregadas para melhores resultados). Aprenda como colocar todos os estados em uma imagem torna as alterações dinâmicas mais rápidas e não requer pré-carregamento.
14.
cantos arredondados jQuery
Muitos efeitos jQuery para cantos arredondados e muito mais padrões.
15.
Dica de ferramenta e visualização de imagem mais fáceis usando jQuery
Veja 3 exemplos de uso do script de visualização de rollover do jQuery. Esse script simples pode ser aplicado para diversos fins.
16.
Superdimensionado - Fundo de tela inteira /
Slideshow
Plugin jQuery
Superzided é um plugin jQuery que redimensiona imagens para preencher o navegador, mantendo a proporção de dimensão da imagem e ciclos de imagens / fundos via apresentação de slides com transições e pré-carregamento.
17.
Sobreposição PNG
Você já se deparou com o problema de criar um site com fotos fornecidas pelo cliente, para descobrir mais tarde, depois que ele atualizou a fotografia, a aparência original não foi mantida? Essa solução envolve a criação de uma sobreposição PNG transparente que pode ser usada como máscara / quadro em torno de JPEG ou GIF regular. Dessa forma, uma instalação típica de CMS pode ser configurada para que os usuários possam fazer upload de fotos sem se preocupar em usar qualquer programa gráfico para aplicar filtros.
18.
BeZoom
Peso leve
JQuery
Plugin de Zoom
BeZoom é uma alternativa simples e leve para JQZoomGenericName. É mais leve e fácil de usar.
19.
Usando jQuery para animações de imagem de fundo
Brinque com jQuery e mude a posição da imagem de fundo para criar o tipo de efeito que você está procurando. Há um novo artigo respondendo à pergunta "Como faço para lidar com estados ativos?" - Tratamento do estado ativo para fundos animados jQuery.
20.
5 maneiras de incrementar suas imagens com CSS
Aqui estão alguns truques simples para adicionar um toque às suas imagens típicas sem graça. Usar o Photoshop para estilizar cada imagem pode ser tedioso e difícil de manter a longo prazo. As seguintes técnicas de CSS o ajudarão a aliviar essa dor.
21.
Como:
Redimensionável
Imagem de fundo
Aprenda a configurar uma imagem de fundo redimensionável com CSS. Você tem 3 opções para escolher.
22.
Estilize seus links de imagem
Deixar os usuários saberem que uma seção específica de nosso site deve ser clicada é mais bem conseguida através do efeito de passagem do mouse. Essas seções “clicáveis” certamente incluem imagens de conteúdo. Image Link é um script que permite aplicar estilos adicionais aos links de imagens.
23.
Várias imagens de fundo com CSS
Às vezes, faz mais sentido usar imagens de fundo do que inseri-las diretamente na página. E embora cada elemento - como sua tag corporal - possa conter apenas uma imagem de plano de fundo, eles podem ser aplicados a vários elementos.
24.
Bordas de imagem com CSS
Tutorial muito fácil que mostra como adicionar bordas sólidas a imagens usando CSS.
25.
Sprites CSS sem usar imagens de fundo
Aprenda como aplicar o efeito hover sem muito conhecimento sobre sprites CSS.
