25 titorías para mellorar imaxes con CSS e jQuery

Ao mellorar as imaxes, podemos optar por facelo con Photoshop e despois montalo na páxina web ou tamén podemos escoller a opción B: faino coas técnicas HTML, CSS e Javascript dispoñibles.

Despois do salto hai moitas técnicas para mellorar as imaxes, case todas feitas con jQuery como base principal ou con CSS3 aproveitando os últimos estándares web, aínda que lembro que nese caso perdemos a compatibilidade con algúns navegadores.

Están en inglés pero son collidos ao voo, prometidos :)

Fonte | 1º WD

Imaxe redondeada CSS3 con jQuery

Aprende a axustar unha etiqueta de espazo ao redor do elemento de imaxe para conseguir imaxes redondeadas que se amosarán xusto en todos os navegadores modernos.

2.

Varios fondos e fronteiras con CSS 2.1

Aprende a usar pseudoelementos CSS 2.1 para proporcionar ata 3 lenzos de fondo, 2 imaxes de presentación de tamaño fixo e varios bordos complexos para un único elemento HTML.

3.

Consello rápido: varios bordos con CSS simple

Screencast rápido que mostra como conseguir varios bordos cun CSS sinxelo dese xeito engadindo máis profundidade aos teus deseños. Versión moito máis sinxela do tutorial anterior.

4.

Varios bordos en elementos de tamaño dinámico con CSS2

Terceira versión de Nicholas Gallagher amosándolle que facer se non fai o tamaño do elemento.

5.

Divírtete con fronteiras: biseladas, presionadas e moito máis.

Aprende a conseguir un efecto premido con CSS e algúns simples trucos de estilo de bordo para obter varios efectos.

6.

Polaroids con CSS3

Aprende a usar algúns incribles CSS2 e CSS3 para converter unha lista de imaxes doutro xeito sen pretensións nun conxunto completo de imaxes Polaroid.

7.

Imaxe de fondo de páxina completa perfecta

Aprende a engadir imaxe de fondo con CSS que enche a páxina enteira con imaxe, sen espazo en branco, escala a imaxe segundo sexa necesario, non causa barras de desprazamento e moito máis.

8.

Efectos de sombra e desprazamento de imaxe de caixa CSS3

Explore unha nova forma de engadir efectos de sombra coa edición dunha folla de estilo.

9.

Efecto de desprazamento en miniatura de fantasía con jQuery

Consegue un bo efecto estilo flash con CSS e jQuery.

10.

Como crear un simple efecto de cambio de imaxe CSS

Neste tutorial aprenderás a crear un simple efecto de cambio de imaxe CSS cun estilo básico de HTML e CSS.

11.

Flotutorial

Floatutorial lévate a través dos elementos básicos de elementos flotantes como imaxes, maiúsculas, botóns de seguinte e atrás, galerías de imaxes, listas en liña e deseños de varias columnas. Consulte 4 tutoriais dedicados á imaxe flotante.

12.

Snazzy Hover Effects usando CSS

Neste tutorial, revisará a creación de técnicas avanzadas flexibles de desprazamento mediante propiedades CSS2.1.

13.

Rollovers rápidos sen

Precarga

Cando se usa o cambio de imaxe CSS, hai que cargar dúas, tres ou máis imaxes (e a miúdo precargarse para obter os mellores resultados). Aprende a colocar todos os estados nunha soa imaxe e fai que os cambios dinámicos sexan máis rápidos e non requiran precarga.

14.

jQuery Cantos redondeados

Moitos efectos jQuery para cantos redondeados e moito máis patróns.

15.

Consello de información máis sinxelo e previsualización de imaxes mediante jQuery

Vexa 3 exemplos de uso do script de vista previa de rollover de jQuery. Este sinxelo guión pódese aplicar con diversos propósitos.

16.

Superdimensionado: fondo de pantalla completa /

Presentación

Complemento jQuery

Superzided é un complemento jQuery que redimensiona as imaxes para encher o navegador mantendo a relación de dimensión da imaxe e cicla as imaxes / fondos mediante presentación de diapositivas con transicións e precarga.

17.

Superposición PNG

Algunha vez atopou o problema de crear un sitio con imaxes dadas polo cliente, só para atopar despois despois de actualizar a súa fotografía o aspecto orixinal que non se conserva? Esta solución implica a creación dunha superposición PNG transparente que se pode usar como máscara / marco en JPEG ou GIF regulares. Deste xeito, pódese configurar unha instalación CMS típica para que os usuarios poidan cargar fotos sen ter que preocuparse de usar ningún programa gráfico para aplicar filtros.

18.

BeZoom

Peso lixeiro

JQuery

Extensión de zoom

BeZoom é unha alternativa sinxela e lixeira para JQZoom. É máis lixeiro e é máis fácil de usar.

19.

Usando jQuery para animacións de imaxe de fondo

Xoga con jQuery e cambia a posición da imaxe de fondo para crear o tipo de efecto que buscas. Hai un novo artigo que responde a "Como manexo os estados activos?" - Manexo do estado activo para fondos animados jQuery.

20.

5 xeitos de condimentar as túas imaxes con CSS

Aquí tes algúns trucos sinxelos para engadir algo de sabor ás túas imaxes insípidas típicas. Usar Photoshop para estilizar cada imaxe pode ser tedioso e difícil de manter a longo prazo. Estas seguintes técnicas CSS axudarán a aliviar esa dor.

21.

Como:

Redimensionable

Imaxe de fondo

Aprende a configurar unha imaxe de fondo redimensionable con CSS. Tes 3 opcións para escoller.

22.

Estila as túas ligazóns de imaxe

Facer que os usuarios saiban que a sección específica do noso sitio web na que se fai clic é mellor conseguila mediante o efecto sobre o rato. Esas seccións "premibles" inclúen certamente imaxes de contido. Image Link é un script que permite aplicar un estilo adicional ás súas ligazóns de imaxe.

23.

Múltiples imaxes de fondo con CSS

Ás veces, ten máis sentido usar imaxes de fondo que inserilas directamente na páxina. E aínda que cada elemento, como a etiqueta corporal, pode conter só unha imaxe de fondo, pódense aplicar a varios elementos.

24.

Bordos de imaxe con CSS

Un tutorial moi sinxelo que mostra como engadir un bordo sólido ás imaxes usando CSS.

25.

Sprites CSS sen usar imaxes de fondo

Aprende a aplicar o efecto de desprazamento sen moito coñecemento sobre os sprites CSS.