Kun parannamme kuvia, voimme tehdä sen Photoshopilla ja asentaa sen sitten verkkosivulle tai voimme myös valita vaihtoehdon B: tee se käytettävissä olevilla HTML-, CSS- ja Javascript-tekniikoilla.
Hyppyn jälkeen on monia tekniikoita kuvien parantamiseksi, melkein kaikki ne on tehty jQueryllä pääpohjalla tai CSS3: lla hyödyntämällä uusimpia verkkostandardeja, vaikka muistutan, että tällöin menetämme yhteensopivuuden joidenkin selainten kanssa.
Ne ovat englanniksi, mutta ne ovat kiinni lennossa, luvattu :)
Lähde | 1.WD
CSS3 pyöristetty kuva jQueryllä
Opi kiertämään span-tunniste kuvaelementin ympärille, jotta saat pyöristetyt kuvat, jotka näkyvät kaikissa moderneissa selaimissa.
2.
Useita taustoja ja reunoja CSS: n avulla 2.1
Opi käyttämään CSS 2.1 -pseudoelementtejä tarjoamaan jopa 3 taustakangasta, 2 kiinteäkokoista esityskuvaa ja useita monimutkaisia reunoja yhdelle HTML-elementille.
3.
Nopea vinkki: Useita reunoja yksinkertaisella CSS: llä
Nopea kuvakaappaus, joka näyttää kuinka saavuttaa useita reunoja yksinkertaisella CSS: llä, mikä lisää suunnittelusi syvyyttä. Paljon yksinkertaisempi versio edellisestä opetusohjelmasta.
4.
Useita reunoja dynaamisesti mitoitetuissa elementeissä CSS2: n avulla
Kolmas versio Nicholas Gallagher näytetään mitä tehdä, jos et määritä elementin kokoa.
5.
Pidä hauskaa rajalla - viistetyt, puristetut ja paljon muuta!
Opi saavuttamaan painotettu vaikutus CSS: llä ja yksinkertaisilla reunatyylitrikkeillä saadaksesi erilaisia tehosteita.
6.
Polaroidit CSS3: n kanssa
Opi käyttämään mahtavia CSS2: ta ja CSS3: ta muuttaaksesi muuten vaatimaton kuvaluettelo täydelliseksi Polaroid-kuvasarjaksi.
7.
Täydellinen koko sivun taustakuva
Opi lisäämään taustakuva CSS: llä, joka täyttää koko sivun kuvalla, ei tyhjää tilaa, skaalaa kuvaa tarpeen mukaan, ei aiheuta vierityspalkkeja ja paljon muuta.
8.
CSS3 Box Shadow- ja Image Hover -efektit
Tutustu uuteen tapaan lisätä varjoefektejä muokkaamalla tyylitaulukkoa.
9.
Fancy Thumbnail Hover Effect w / jQuery -toiminnolla
Saavuta siisti flash-tyylinen vaikutus CSS: n ja jQueryn avulla.
10.
Kuinka luoda yksinkertainen CSS Image Rollover Effect
Tässä opetusohjelmassa opit luomaan yksinkertaisen CSS-kuvan siirtämisen vaikutuksen HTML- ja CSS-tyylillä.
11.
Kelluvuus
Floatutorial opastaa sinut kelluvien elementtien, kuten kuvien, pudotuskorkkien, Seuraava- ja Takaisin-painikkeiden, kuvagallerioiden, sisäisten luetteloiden ja monisarakkeisten asettelujen, perusteisiin. Tutustu 4 kelluntaan omistettuun opetusohjelmaan.
12.
Snazzy Hover Effects CSS: n avulla
Tässä opetusohjelmassa käydään läpi joustavien edistyneiden leijutustekniikoiden luominen CSS2.1-ominaisuuksien avulla.
13.
Nopeat siirtymät ilman
preload
Kun käytetään CSS-kuvavaihtoehtoja, kaksi, kolme tai useampia kuvia on ladattava (ja usein ladattava valmiiksi parhaan tuloksen saavuttamiseksi). Opi asettamaan kaikki tilat yhteen kuvaan, mikä muuttaa dynaamisesti muutoksia eikä vaadi esikuormitusta.
14.
jQuery pyöristetyt kulmat
Paljon jQuery-efektejä pyöristettyihin kulmiin ja paljon muita kuvioita.
15.
Helpoin työkaluvihje ja kuvan esikatselu jQueryn avulla
Katso 3 esimerkkiä jQuery rollover -esikatseluohjelman käytöstä. Tätä yksinkertaista komentosarjaa voidaan käyttää useisiin tarkoituksiin.
16.
Suurikokoinen - Koko näytön tausta /
Kuvaesitys
jQuery-laajennus
Superzided on jQuery-laajennus, joka muuttaa kuvien kokoa selaimen täyttämiseksi säilyttäen samalla kuvamittasuhteen ja syklii kuvat / taustat diaesityksen kautta siirtymillä ja esiladatulla.
17.
PNG-peitto
Oletko koskaan törmännyt ongelmaan luoda sivusto, jossa on asiakkaan antamia kuvia, vain löytääksesi myöhemmin sen jälkeen, kun he ovat päivittäneet valokuvansa, alkuperäistä ulkoasua ja tunnetta ei säilytetä? Tähän ratkaisuun kuuluu läpinäkyvän PNG-kerroksen luominen, jota voidaan käyttää maskina / kehyksenä tavallisen JPEG- tai GIF-kuvan ympärillä. Näin tyypillinen CMS-asennus voidaan määrittää siten, että käyttäjät voivat ladata valokuvia ilman, että heidän on huolehdittava siitä, että suodattimia käytetään grafiikkaohjelmalla.
18.
BeZoom
lighweight
JQuery
Zoom-laajennus
BeZoom on yksinkertainen ja kevyt vaihtoehto JQZoom. Se on kevyempi ja sitä on helpompi käyttää.
19.
JQueryn käyttäminen taustakuva-animaatioihin
Pelaa jQueryllä ja muuta taustakuvan sijaintia luodaksesi haluamasi tehosteen tyyppi. Uusi artikkeli vastaa "Miten käsittelen aktiivisia tiloja?" - Aktiivisen tilan käsittely jQuery-animoiduille taustoille.
20.
5 tapaa piristää kuvia CSS: llä
Tässä on muutama yksinkertainen temppu, jolla voit lisätä makua tyypillisiin lempeisiin kuviin. Photoshopin käyttäminen kunkin kuvan muotoiluun voi olla tylsää ja vaikea ylläpitää pitkällä aikavälillä. Nämä seuraavat CSS-tekniikat auttavat sinua lievittämään kipua.
21.
Miten:
resizeable
Taustakuva
Opi määrittämään suurikokoinen taustakuva CSS: llä. Sinulla on 3 vaihtoehtoa.
22.
Tyylittele kuvalinkkisi
Käyttäjien tietäminen siitä, että verkkosivustomme tietty osa on tarkoitettu napsautettavaksi, saavutetaan parhaiten hiiren päällä -vaikutuksella. Nämä napsautettavat osiot sisältävät varmasti sisältökuvia. Image Link on komentosarja, jonka avulla voit käyttää ylimääräistä tyyliä kuvalinkkeihisi.
23.
Useita taustakuvia CSS: llä
Toisinaan on järkevämpää käyttää taustakuvia kuin lisätä niitä suoraan sivulle. Ja vaikka jokainen elementti - kuten kehon tunniste - voi sisältää vain yhden taustakuvan, niitä voidaan käyttää useisiin elementteihin.
24.
Kuvan reunat CSS: n avulla
Todella helppo opetusohjelma, joka näyttää kuinka lisätä kiinteä reunus kuviin CSS: n avulla.
25.
CSS Sprites käyttämättä taustakuvia
Opi käyttämään hiiren vaikutusta ilman paljon tietoa CSS-spritteistä.
