Quando miglioriamo le immagini possiamo scegliere di farlo con Photoshop e poi montarlo sulla pagina web oppure possiamo anche scegliere l'opzione B: fallo con le tecniche HTML, CSS e Javascript disponibili.
Dopo il salto ci sono molte tecniche per migliorare le immagini, quasi tutte realizzate con jQuery come base principale o con CSS3 sfruttando i più recenti standard web, anche se ti ricordo che in quel caso perdiamo la compatibilità con alcuni browser.
Sono in inglese ma vengono colti al volo, promesso :)
Fonte | 1°WD
Immagine arrotondata CSS3 con jQuery
Impara a avvolgere un tag span attorno all'elemento immagine per ottenere immagini arrotondate che verranno visualizzate in tutti i browser moderni.
2.
Sfondi e bordi multipli con CSS 2.1
Scopri come utilizzare gli pseudo-elementi CSS 2.1 per fornire fino a 3 tele di sfondo, 2 immagini di presentazione a dimensione fissa e più bordi complessi per un singolo elemento HTML.
3.
Suggerimento rapido: più bordi con CSS semplice
Screencast rapido che mostra come ottenere più bordi con semplici CSS in questo modo aggiungendo più profondità ai tuoi progetti. Versione molto più semplice del tutorial precedente.
4.
Bordi multipli su elementi di dimensioni dinamiche con CSS2
Terza versione di Nicholas Gallagher mostrandoti cosa fare se non hai la dimensione dell'elemento.
5.
Divertiti con i bordi: smussati, pressati e altro!
Scopri come ottenere effetti pressati con CSS e alcuni semplici trucchi per lo stile del bordo per ottenere vari effetti.
6.
Polaroid con CSS3
Scopri come utilizzare alcuni fantastici CSS2 e CSS3 per trasformare un elenco di immagini altrimenti modesto in un set completo di immagini Polaroid.
7.
Perfetta immagine di sfondo a piena pagina
Scopri come aggiungere un'immagine di sfondo con CSS che riempie l'intera pagina con l'immagine, senza spazi bianchi, ridimensiona l'immagine secondo necessità, non causa barre di scorrimento e molto altro.
8.
CSS3 Box Shadow e effetti al passaggio del mouse sull'immagine
Esplora un nuovo modo di aggiungere effetti di ombreggiatura semplicemente modificando un foglio di stile.
9.
Fancy Thumbnail Hover Effect w / jQuery
Ottieni un effetto flash pulito con CSS e jQuery.
10
Come creare un semplice effetto di rollover dell'immagine CSS
In questo tutorial imparerai come creare un semplice effetto di rollover dell'immagine CSS con lo stile HTML e CSS di base.
11
Floattoriale
Floatutorial ti guida attraverso le basi degli elementi mobili come immagini, capolettera, pulsanti Avanti e Indietro, gallerie di immagini, elenchi in linea e layout a più colonne. Dai un'occhiata a 4 tutorial dedicati al floating delle immagini.
12
Effetti al passaggio del mouse accattivanti utilizzando CSS
In questo tutorial, esaminerai la creazione di tecniche di hover avanzate flessibili utilizzando le proprietà CSS2.1.
13
Rollover veloci senza
precarico
Quando si utilizzano rollover di immagini CSS, è necessario caricare due, tre o più immagini (e spesso precaricate per ottenere i migliori risultati). Scopri come mettere tutti gli stati in un'unica immagine per rendere le modifiche dinamiche più veloci e non richiede precaricamento.
14
jQuery angoli arrotondati
Molti effetti jQuery per angoli arrotondati e molti altri motivi.
15
Tooltip e anteprima delle immagini più semplici con jQuery
Vedi 3 esempi di utilizzo dello script di anteprima del rollover di jQuery. Questo semplice script può essere applicato per una varietà di scopi.
16
Supersized - Sfondo a schermo intero /
presentazione
Plugin jQuery
Superzided è un plug-in jQuery che ridimensiona le immagini per riempire il browser mantenendo le proporzioni delle dimensioni dell'immagine e cicla immagini / sfondi tramite slideshow con transizioni e precaricamento.
17
Sovrapposizione PNG
Ti sei mai imbattuto nel problema di creare un sito con le immagini fornite dal cliente, solo per scoprire in seguito, dopo aver aggiornato la loro fotografia, l'aspetto originale non è stato mantenuto? Questa soluzione prevede la creazione di una sovrapposizione PNG trasparente che può essere utilizzata come maschera / cornice attorno a JPEG o GIF regolari. In questo modo, è possibile configurare una tipica installazione CMS in modo che gli utenti possano caricare foto senza doversi preoccupare di utilizzare qualsiasi programma di grafica per applicare filtri.
18
Zoom
Leggero
JQuery
Plugin Zoom
BeZoom è un'alternativa semplice e leggera per JQ Zoom. È più leggero ed è più facile da usare.
19
Utilizzo di jQuery per animazioni di immagini di sfondo
Gioca con jQuery e cambia la posizione dell'immagine di sfondo per creare il tipo di effetto che stai cercando. C'è un nuovo articolo che risponde a "Come gestisco gli stati attivi?" - Gestione dello stato attivo per sfondi animati jQuery.
20
5 modi per ravvivare le tue immagini con i CSS
Ecco alcuni semplici trucchi per aggiungere un po 'di sapore alle tue tipiche immagini insipide. Usare Photoshop per modellare ogni immagine può essere noioso e difficile da mantenere a lungo termine. Le seguenti tecniche CSS ti aiuteranno ad alleviare quel dolore.
21
Come:
resizeable
Immagine di sfondo
Scopri come impostare un'immagine di sfondo ridimensionabile con CSS. Hai 3 opzioni tra cui scegliere.
22
Definisci lo stile dei link delle immagini
Fare in modo che gli utenti sappiano che una particolare sezione del nostro sito Web è destinata a essere cliccata si ottiene al meglio tramite l'effetto mouse over. Quelle sezioni "cliccabili" includono certamente immagini di contenuto. Image Link è uno script che consente di applicare uno stile aggiuntivo ai collegamenti delle immagini.
23
Immagini di sfondo multiple con CSS
A volte ha più senso utilizzare immagini di sfondo che inserirle direttamente nella pagina. E mentre ogni elemento, come il tag del corpo, può contenere solo un'immagine di sfondo, possono essere applicati a più elementi.
24
Bordi immagine con CSS
Tutorial davvero facile che ti mostra come aggiungere un bordo solido alle immagini usando CSS.
25
CSS Sprites senza usare immagini di sfondo
Impara come applicare l'effetto hover senza molta conoscenza degli sprite CSS.
