Uzlabojot attēlus, mēs varam izvēlēties to darīt ar Photoshop un pēc tam ievietot to tīmekļa lapā vai arī izvēlēties B variantu: dariet to ar pieejamajiem HTML, CSS un Javascript paņēmieniem.
Pēc lēciena ir daudz paņēmienu, kā uzlabot attēlus, gandrīz visi no tiem ir izgatavoti ar jQuery kā galveno bāzi vai ar CSS3 izmantojot jaunāko tīmekļa standartu priekšrocības, lai gan es jums atgādinu, ka tādā gadījumā mēs zaudējam saderību ar dažām pārlūkprogrammām.
Viņi ir angļu valodā, bet viņi tiek noķerti lidojumā, solīts :)
Avots | 1.WD
CSS3 noapaļots attēls ar jQuery
Uzziniet, kā ap attēla elementu ietīt span tagu, lai iegūtu noapaļotus attēlus, kas tiks parādīti tieši visās mūsdienu pārlūkprogrammās.
2.
Vairāki foni un robežas ar CSS 2.1
Uzziniet, kā izmantot CSS 2.1 pseidoelementus, lai nodrošinātu līdz pat 3 fona audekliem, 2 fiksēta izmēra prezentācijas attēlus un vairākas sarežģītas apmales vienam HTML elementam.
3.
Ātrais padoms: vairākas robežas ar vienkāršu CSS
Ātra ekrāna pārraide, kas parāda, kā ar vairākām CSS panākt vairākas robežas, tādējādi palielinot dizaina dziļumu. Daudz vienkāršāka iepriekšējās apmācības versija.
4.
Vairākas robežas dinamiski izmērītos elementos ar CSS2
Trešā versija Nikolā Galahere parādot, kā rīkoties, ja nav norādīts elementa lielums.
5.
Izklaidējieties ar robežām - slīpi, presēti un vēl vairāk!
Uzziniet, kā panākt piespiedu efektu ar CSS un dažiem vienkāršiem apmales stila trikiem, lai iegūtu dažādus efektus.
6.
Polaroīdi ar CSS3
Uzziniet, kā izmantot dažus lieliskus CSS2 un CSS3, lai pārvērstu citādi nepretenciozu attēlu sarakstu pilnvērtīgā Polaroid attēlu komplektā.
7.
Perfekts pilnas lapas fona attēls
Uzziniet, kā pievienot fona attēlu ar CSS, kas visu lapu aizpilda ar attēlu, bez atstarpes, pēc nepieciešamības mērogo attēlu, neizraisa ritjoslas un daudz ko citu.
8.
CSS3 Box Shadow un Image Hover efekti
Izpētiet jaunu veidu, kā pievienot ēnu efektus, vienkārši rediģējot stila lapu.
9.
Iedomātā sīktēlu virzītāja efekts ar jQuery
Panākiet kārtīgu zibspuldzes stila efektu ar CSS un jQuery.
10.
Kā izveidot vienkāršu CSS attēlu pārvēršanas efektu
Šajā apmācībā jūs uzzināsiet, kā izveidot vienkāršu CSS attēla apgriešanas efektu ar pamata HTML un CSS stilu.
11.
Peldoša apmācība
Floatutorial iepazīstina ar peldošo elementu, piemēram, attēlu, nomešanas vāciņu, nākamās un aizmugurējās pogas, attēlu galeriju, iekļauto sarakstu un vairāku kolonnu izkārtojuma, pamatiem. Apskatiet 4 apmācības, kas veltītas attēlu peldēšanai.
12.
Snazzy Hover efekti, izmantojot CSS
Šajā apmācībā jūs pārdomāsit, kā izveidot elastīgas uzlabotas virzīšanas paņēmienus, izmantojot CSS2.1 rekvizītus.
13.
Ātri apgāšanās bez
Iepriekš ielādēt
Izmantojot CSS attēlu pārvietošanu, ir jāielādē divi, trīs vai vairāki attēli (un bieži vien tie ir iepriekš jāielādē, lai iegūtu labākos rezultātus). Uzziniet, kā visus stāvokļus ievietot vienā attēlā, dinamiskas izmaiņas notiek ātrāk un nav nepieciešama iepriekšēja ielāde.
14.
jQuery noapaļoti stūri
Daudz jQuery efektu noapaļotiem stūriem un daudz vairāk modeļu.
15.
Vieglākais rīku padoms un attēlu priekšskatījums, izmantojot jQuery
Skatiet 3 jQuery rollover priekšskatījuma skripta izmantošanas piemērus. Šo vienkāršo skriptu var izmantot dažādiem mērķiem.
16.
Lielizmēra - pilna ekrāna fons /
Slaidrādi
jQuery spraudnis
Superzided ir spraudnis jQuery, kas maina attēlu izmērus, lai aizpildītu pārlūku, vienlaikus saglabājot attēlu izmēru attiecību, un ciklizē attēlus / fonus, izmantojot slaidrādi ar pārejām un iepriekšēju ielādi.
17.
PNG pārklājums
Vai esat kādreiz saskāries ar vietnes izveidošanas problēmu ar klienta izdotiem attēliem, lai vēlāk pēc tam, kad viņi atjauninātu savu fotogrāfiju, sākotnējais izskats un izjūta netiek saglabāta? Šis risinājums ietver caurspīdīga PNG pārklājuma izveidošanu, ko var izmantot kā masku / rāmi ap parastu JPEG vai GIF. Tādā veidā var konfigurēt tipisku CMS instalāciju, lai lietotāji varētu augšupielādēt fotoattēlus, neuztraucoties par grafikas programmas izmantošanu filtru lietošanai.
18.
BeZoom
Viegls
JQuery
Tālummaiņas spraudnis
BeZoom ir vienkārša un viegla alternatīva JQZoom. Tas ir vieglāks un to ir vieglāk izmantot.
19.
JQuery izmantošana fona attēlu animācijām
Spēlējiet ar jQuery un mainiet fona attēla pozīciju, lai izveidotu meklējamā efekta veidu. Ir jauns raksts, kas atbild uz tēmu "Kā rīkoties ar aktīviem stāvokļiem?" - Aktīvā stāvokļa apstrāde jQuery animētiem foniem.
20.
5 veidi, kā uzlabot attēlus, izmantojot CSS
Šeit ir daži vienkārši triki, lai jūsu tipiskajiem maigajiem attēliem piešķirtu kādu garšu. Izmantojot Photoshop katra attēla stilam, ilgtermiņā var būt garlaicīgi un grūti uzturēt. Šīs CSS metodes palīdzēs jums mazināt šīs sāpes.
21.
Kā:
Maināms
Fona attēls
Uzziniet, kā ar CSS iestatīt maināmu fona attēlu. Jums ir 3 iespējas, no kurām izvēlēties.
22.
Veidojiet savu attēlu saites
Informēt lietotājus, ka ir domāts noklikšķināt uz konkrētas mūsu vietnes sadaļas, vislabāk var panākt, izmantojot peles kursora efektu. Šajās sadaļās, uz kurām var noklikšķināt, noteikti ir satura attēli. Image Link ir skripts, kas ļauj jums izmantot papildu stilu attēlu saitēm.
23.
Vairāki fona attēli ar CSS
Dažreiz ir lietderīgāk izmantot fona attēlus, nevis ievietot tos tieši lapā. Un, lai gan katrs elements - tāpat kā jūsu ķermeņa tags - var saturēt tikai vienu fona attēlu, tos var pielietot vairākiem elementiem.
24.
Attēlu apmales ar CSS
Tiešām vienkārša apmācība, kas parāda, kā attēliem pievienot stingru apmali, izmantojot CSS.
25.
CSS Sprites, neizmantojot fona attēlus
Uzziniet, kā izmantot kursora efektu bez daudz zināšanu par CSS sprites.
