Piltide täiustamisel võime seda teha Photoshopiga ja seejärel installida selle veebisaidile või valida ka võimaluse B: tehke seda saadaolevate HTML-, CSS- ja Javascripti tehnikatega.
Pärast hüpet on piltide parandamiseks palju tehnikaid, peaaegu kõik neist on tehtud jQuery kui põhibaasi või CSS3 abil kasutades uusimaid veebistandardeid, kuigi tuletan meelde, et sel juhul kaotame ühilduvuse mõne brauseriga.
Need on küll inglise keeles, kuid on lennult kinni püütud, lubatud :)
Allikas | 1. WD
CSS3 ümardatud pilt jQueryga
Õppige ümbritsema sildielementi pildielemendi ümber, et saada ümardatud pilte, mida kuvatakse kõigis kaasaegsetes brauserites.
2.
CSS-iga mitu tausta ja piiri 2.1
Siit saate teada, kuidas CSS 2.1 pseudoelemente kasutada ühe HTML-elemendi jaoks kuni 3 taustalõuendi, 2 fikseeritud suurusega esitluspildi ja mitme keeruka ääre loomiseks.
3.
Kiire näpunäide: mitu piiri lihtsa CSS-iga
Kiire ekraanikuva näitab, kuidas lihtsa CSS-iga mitu piiri saavutada, lisades nii oma kujundusele rohkem sügavust. Eelmise õpetuse palju lihtsam versioon.
4.
CSS2-ga dünaamiliselt suurte elementide mitu piiri
Kolmas versioon Nicholas Gallagher näitab teile, mida teha, kui te ei soovi elemendi suurust.
5.
Lõbutsege piiridega - kaldus, pressitud ja palju muud!
Siit saate teada, kuidas CSS-i ja mõne lihtsa äärisstiili nipiga erinevate efektide saamiseks vajutatud efekti saavutada.
6.
Polaroidid CSS3-ga
Siit saate teada, kuidas kasutada mõnda vinget CSS2 ja CSS3, et muidu tagasihoidlik piltide loend muuta täies mahus Polaroid piltide komplektiks.
7.
Täiuslik kogu lehe taustapilt
Siit saate teada, kuidas lisada taustapilti CSS-iga, mis täidab kogu lehe pildiga, puudub tühik, skaalab pilti vastavalt vajadusele, ei põhjusta kerimisribasid ja palju muud.
8.
CSS3 Box Shadow ja Image Hover efektid
Avastage uus viis varjuefektide lisamiseks lihtsalt stiililehte redigeerides.
9.
Fancy Thumbnail Hover Effect w / jQuery abil
Saavutage CSS-i ja jQuery abil korralik välgustiilis efekt.
10.
Kuidas luua lihtsat CSS-i pildi teisendamise efekti
Selles õpetuses saate teada, kuidas luua lihtsat CSS-i pildi teisendamise efekti HTML-i ja CSS-i stiiliga.
11.
Ujujutu
Floatutorial tutvustab hõljuvate elementide põhitõdesid, nagu pildid, tilgakaaned, järgmise ja tagasi nupud, pildigaleriid, loendisisesed loendid ja mitme veeruga paigutused. Vaadake 4 pildi hõljumisele pühendatud õpetust.
12.
Snazzy Hover Effects CSS abil
Selles õpetuses tutvute paindlike täpsemate hõljukitehnikate loomisega CSS2.1 omaduste abil.
13.
Kiired ümberminekud ilma
Eellaadimine
CSS-i piltide ümberpaigutamise korral tuleb laadida kaks, kolm või enam pilti (parimate tulemuste saavutamiseks tuleb need sageli eellaadida). Siit saate teada, kuidas kõik olekud ühte pildi panna muudab dünaamilised muutused kiiremaks ega vaja eellaadimist.
14.
jQuery ümarad nurgad
Palju jQuery efekte ümarate nurkade jaoks ja palju muud mustrit.
15.
Lihtsaim tööriistavihje ja pildi eelvaade jQuery abil
Vaadake 3 näidet jQuery ülemineku eelvaate skripti kasutamise kohta. Seda lihtsat skripti saab rakendada mitmel eesmärgil.
16.
Suurem - täisekraani taust /
slideshow
jQuery pistikprogramm
Superzided on jQuery pistikprogramm, mis suurendab piltide suurust brauseri täitmiseks, säilitades samal ajal pildimõõtude suhte ja tsüklib pilte / taustasid slaidiseansi kaudu üleminekute ja eellaadimisega.
17.
PNG ülekate
Kas olete kunagi kokku puutunud kliendi antud piltidega saidi loomise probleemiga, et hiljem leida pärast fotograafia värskendamist, ei säilitata algset ilmet? See lahendus hõlmab läbipaistva PNG ülekatte loomist, mida saab kasutada maski / raamina tavalise JPEG või GIF ümber. Nii saab konfigureerida tavalise CMS-i installi, et kasutajad saaksid fotosid üles laadida, ilma et peaksite muretsema filtrite rakendamiseks mõne graafikaprogrammi kasutamise pärast.
18.
BeZoom
Kerge
JQuery
Suumi pistikprogramm
BeZoom on lihtne ja kerge alternatiiv JQZoom. See on kergem ja seda on lihtsam kasutada.
19.
JQuery kasutamine taustpildi animatsioonide jaoks
Mängige jQueryga ja muutke taustpildi asukohta, et luua otsitava efekti tüüp. Seal on uus artikkel, mis vastab "Kuidas ma saan aktiivsete olekutega hakkama?" - JQuery animeeritud taustade aktiivse oleku käitlemine.
20.
5 viisi oma piltide vürtsitamiseks CSS-iga
Siin on mõned lihtsad nipid, et oma tavalistele pehmetele piltidele veidi maitset lisada. Iga pildi kujundamiseks Photoshopi kasutamine võib olla pikas perspektiivis tüütu ja keeruline hooldada. Need järgmised CSS-meetodid aitavad teil seda valu leevendada.
21.
Kuidas:
Suurust saab muuta
Taustapildi
Siit saate teada, kuidas CSS-i abil suurusega taustapilti seadistada. Teil on valida 3 valiku vahel.
22.
Kujundage oma pildi lingid
Kasutajatele teada andmine, et meie veebisaidi konkreetne osa on mõeldud klõpsamiseks, on kõige parem saavutada hiirekursoriga. Need klõpsatavad jaotised sisaldavad kindlasti sisupilte. Image Link on skript, mis võimaldab teil oma pildilinkidele rakendada täiendavat stiili.
23.
CSS-iga mitu taustapilti
Vahel on mõttekam kasutada taustapilte kui need otse lehele sisestada. Ja kuigi iga element - nagu teie kehamärgis - mahutab ainult ühte taustpilti, saab neid rakendada mitmele elemendile.
24.
Pildipiirid CSS-iga
Tõesti lihtne õpetus, mis näitab, kuidas CSS-i abil piltidele kindlat piiri lisada.
25.
CSS Sprites ilma taustapilte kasutamata
Siit saate teada, kuidas hõljutusefekti rakendada ilma CSS-spritide kohta palju teadmisi.
