Når det gjelder forbedring av bilder, kan vi velge å gjøre det med Photoshop og deretter montere det på websiden, eller vi kan også velge alternativ B: gjør det med HTML, CSS og Javascript teknikker som er tilgjengelige.
Etter hoppet er det mange teknikker for å forbedre bildene, nesten alle laget med jQuery som hovedbase eller med CSS3 dra nytte av de nyeste nettstandardene, selv om jeg minner deg om at vi i så fall mister kompatibilitet med noen nettlesere.
De er på engelsk, men de blir tatt i farta, lovet :)
Kilde | 1.WD
CSS3 avrundet bilde med jQuery
Lær å vikle en spennmerke rundt bildeelementet for å oppnå avrundede bilder som vises i alle moderne nettlesere.
2.
Flere bakgrunner og grenser med CSS 2.1
Lær hvordan du bruker CSS 2.1-pseudoelementer for å gi opptil 3 bakgrunnsduk, 2 presentasjonsbilder i fast størrelse og flere komplekse rammer for et enkelt HTML-element.
3.
Hurtigtips: Flere kanter med enkel CSS
Rask screencast som viser deg hvordan du kan oppnå flere grenser med enkel CSS på den måten som gir mer dybde til designene dine. Mye enklere versjon av forrige opplæring.
4.
Flere kanter på dynamisk dimensjonerte elementer med CSS2
Tredje versjon av Nicholas Gallagher viser deg hva du skal gjøre hvis du ikke har størrelsen på elementet.
5.
Ha det gøy med grenser - skrå, presset og mer!
Lær hvordan du oppnår presset effekt med CSS og noen enkle triks for kantstil for å få forskjellige effekter.
6.
Polaroids med CSS3
Lær hvordan du bruker noen fantastiske CSS2 og CSS3 for å gjøre en ellers beskjeden liste over bilder til et fullverdig sett med Polaroid-bilder.
7.
Perfekt bakgrunnsbilde for hele siden
Lær hvordan du legger til bakgrunnsbilde med CSS som fyller hele siden med bilde, ingen hvite mellomrom, skalerer bildet etter behov, forårsaker ikke rullefelt og mye mer.
8.
CSS3 Box Shadow og Image Hover Effects
Utforsk en ny måte å legge til skyggeeffekter bare ved å redigere et stilark.
9.
Fancy Thumbnail Hover Effect w / jQuery
Oppnå pen flash-effekt med CSS og jQuery.
10.
Hvordan lage enkel CSS-bildeoverføringseffekt
I denne opplæringen skal du lære å lage enkel CSS-overføringseffekt med grunnleggende HTML- og CSS-styling.
11.
Flyteopplæring
Floatutorial tar deg gjennom det grunnleggende om flytende elementer som bilder, drop caps, neste og bak knapp, bildegallerier, innebygde lister og flerkolonnelayout. Ta en titt på 4 opplæringsprogrammer dedikert til flytende bilder.
12.
Snazzy Hover-effekter ved bruk av CSS
I denne opplæringen vil du gå over å lage fleksible avanserte sveveteknikker ved hjelp av CSS2.1-egenskaper.
13.
Raske overganger uten
Forhåndslast
Når du bruker CSS-rollover, må to, tre eller flere bilder lastes inn (og ofte lastes inn på forhånd for best resultat). Lær hvordan du setter alle tilstander i ett bilde gjør dynamiske endringer raskere og krever ingen forhåndslast.
14.
jQuery avrundede hjørner
Mange jQuery-effekter for avrundede hjørner og mye mer mønstre.
15.
Enkleste verktøytips og forhåndsvisning av bilder ved hjelp av jQuery
Se 3 eksempler på bruk av forhåndsvisningsscript for jQuery. Dette enkle skriptet kan brukes til en rekke formål.
16.
Supersized - Full Screen Background /
lysbildefremvisning
jQuery-plugin
Superzided er et jQuery-plugin som endrer størrelsen på bilder for å fylle nettleseren, samtidig som bildedimensjonsforholdet opprettholdes og sykluser bilder / bakgrunner via lysbildefremvisning med overganger og forhåndslading.
17.
PNG-overlegg
Har du noen gang kommet inn i problemet med å opprette et nettsted med bilder gitt av klienten, bare for å finne senere etter at de oppdaterer fotograferingen, blir det originale utseendet ikke beholdt? Denne løsningen innebærer å lage et gjennomsiktig PNG-overlegg som kan brukes som en maske / ramme rundt vanlig JPEG eller GIF. På denne måten kan en typisk CMS-installasjon konfigureres slik at brukere kan laste opp bilder uten å måtte bekymre seg for å bruke noe grafikkprogram for å bruke filtre.
18.
BeZoom
lighweight
JQuery
Zoom-plugin
BeZoom er et enkelt og lett alternativ for JQZoom. Den er lettere og lettere å bruke.
19.
Bruke jQuery for bakgrunnsbilde-animasjoner
Spill med jQuery og endre posisjonen til bakgrunnsbildet for å lage den typen effekt du leter etter. Det er en ny artikkel som svarer på "Hvordan håndterer jeg aktive tilstander?" - Håndtering av aktiv tilstand for jQuery animerte bakgrunner.
20.
5 måter å krydre bildene dine med CSS
Her er noen enkle triks for å gi litt smak til de typiske tørre bildene dine. Å bruke Photoshop til å style hvert bilde kan være kjedelig og vanskelig å vedlikeholde i det lange løp. Disse følgende CSS-teknikkene vil hjelpe deg med å lindre smerten.
21.
Hvordan:
resizeable
Bakgrunnsbilde
Lær hvordan du konfigurerer størrelse på bakgrunnsbilde med CSS. Du har 3 alternativer å velge mellom.
22.
Stil bildekoblingene dine
Å gi brukerne beskjed om at den spesielle delen av nettstedet vårt er ment å bli klikket på oppnås best gjennom musen over effekten. Disse "klikkbare" delene inkluderer absolutt innholdsbilder. Image Link er et skript som lar deg bruke ekstra styling på bildekoblingene dine.
23.
Flere bakgrunnsbilder med CSS
Noen ganger er det mer fornuftig å bruke bakgrunnsbilder enn å sette dem direkte inn på siden. Og mens hvert element - som kroppskoden din - bare kan inneholde ett bakgrunnsbilde, kan de brukes på flere elementer.
24.
Bildekanter med CSS
Virkelig enkel opplæring som viser deg hvordan du legger til en solid ramme til bilder ved hjelp av CSS.
25.
CSS Sprites uten å bruke bakgrunnsbilder
Lær hvordan du bruker sveveeffekt uten mye kunnskap om CSS-sprites.
