25 õpetust piltide täiustamiseks CSS-i ja jQuery abil

Css-3-box-shadow-image-hover-effects-image-style-backgrounds-megjelenus-inspiratsioon-lisa-vari-piirid-tee-pildid-eristuvad

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.

Css-3-ümardatud pilt-jquery-image-hover-efektidega-pildi stiil-taustad-välimus-inspiratsioon-lisada-varju-piirid-teha-pildid-silma paista

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.

Mitu tausta-piirid-css-2-pildi kujundamine-taustad-välimus-inspiratsioon-lisada-varju-piirid-teha-pilte-silma paista

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.

Kiire näpunäide-mitu-äärist-lihtsa-css-pildi-kujunduse-taustaga-välimus-inspiratsioon-lisada-varju-piirid-teha-pilte-silma paista

4.

CSS2-ga dünaamiliselt suurte elementide mitu piiri

Kolmas versioon Nicolas Gallagher näitab teile, mida teha, kui te ei soovi elemendi suurust.

Mitu piirit - dünaamiliselt suurusega elemendid-css-2-pildi-kujunduse-taustaga-välimus-inspiratsioon-lisage-varju-piirid-kujundage-pildid-eristage

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.

Lõbutsege-piiridega-kaldservadega-vajutage-rohkem-pildi-kujunduse-taustaga-välimust-inspiratsiooni-lisage-varju-piire-tee-pilte-eristage

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.

Polaroidid-css-3-pilt-stiil-taustad-välimus-inspiratsioon-lisage-varju-piirid-kujundage-pildid-eristage

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.

Perfect-full-page-background-image-hover-effects-image-style-backgrounds-megjelenus-inspiratsioon-lisa-vari-piirid-tee-pildid-eristuvad

8.

CSS3 Box Shadow ja Image Hover efektid

Avastage uus viis varjuefektide lisamiseks lihtsalt stiililehte redigeerides.

Css-3-box-shadow-image-hover-effects-image-style-backgrounds-megjelenus-inspiratsioon-lisa-vari-piirid-tee-pildid-eristuvad

9.

Fancy Thumbnail Hover Effect w / jQuery abil

Saavutage CSS-i ja jQuery abil korralik välgustiilis efekt.

Väljamõeldud pisipildi hõljumise efekt koos jquery-pildi kujundamise taustaga-välimus-inspiratsioon-lisage-varju-piirid-kujundage-pildid-eristuvad

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.

Kuidas-luua-lihtsat-css-pilti-ümbermineku-efekti-pildi hõljumise-pildi-kujundamise-taustade-välimuse-inspiratsiooni-lisada-varju-piire-teha-pilte-silma paista

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.

Ujukiline pilt-kujundus-taustad-välimus-inspiratsioon-lisa-varju-piirid-tee-kujutised-eristuvad

12.

Snazzy Hover Effects CSS abil

Selles õpetuses tutvute paindlike täpsemate hõljukitehnikate loomisega CSS2.1 omaduste abil.

Snazzy-hover-effect-css-image-styling-backgrounds-megjelenus-inspiratsioon-lisada-varju-piirid-teha-pilte-eristuv

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.

Kiired ümberpaigutamised ilma eellaadimiseta-pildi-kujundusetaustade-välimus-inspiratsioon-lisage-varju-piirid-kujundage-pildid-eristage

14.

jQuery ümarad nurgad

Palju jQuery efekte ümarate nurkade jaoks ja palju muud mustrit.

Ümarad nurgad-jquery-pilt-stiil-taustad-välimus-inspiratsioon-lisage-varju-piirid-kujundage-pildid-eristage

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.

Lihtsaim tööriistavihje eelvaade, kasutades jquery-pildi kujundamise taustu-välimust-inspiratsiooni-lisa-varju-piire-tee pilte-eristage

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.

Suuremõõduline-täisekraan-taust-slaidiseanss-jwuery-plugin-pildi-kujundus-taustad-välimus-inspiratsioon-lisada-varju-piirid-teha-pildid-silma paista

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.

Png-ülekate-pildikujundus-taustad-välimus-inspiratsioon-lisage-varju-piirid-kujundage-pildid-eristage

18.

BeZoom

Kerge

JQuery

Suumi pistikprogramm

BeZoom on lihtne ja kerge alternatiiv JQZoom. See on kergem ja seda on lihtsam kasutada.

Bezoom-kerge-jquery-zoom-plugina-pildi-kujunduse-taustade-välimus-inspiratsiooni-lisa-vari-piirid-tee-pilte-eristuv

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.

Jquery-taustpildi-animatsioonide-pildi-kujunduse-taustade-välimuse-inspiratsiooni-lisamise-varju-piiride-kujunduse-piltide eristamiseks kasutamine

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.

Kujutiste vürtsitamise viisid CSS-pildi kujundamise taustaga-välimus-inspiratsioon-lisage-varju-piirid-kujundite-pildid-eristuvad

21.

Kuidas:

Suurust saab muuta

Taustapildi

Siit saate teada, kuidas CSS-i abil suurusega taustapilti seadistada. Teil on valida 3 valiku vahel.

Kuidas muuta suurust-taustpildi kujundust-taustade-välimust-inspiratsiooni-lisada-varju-piire-teha-pilte-silma paista

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.

Stiil-teie-pilt-lingid-pildi-stiil-taustad-välimus-inspiratsioon-lisage-varju-piirid-kujundage-pildid-eristage

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.

Mitu taustapilti-css-pildi-stiiliga-välimus-inspiratsioon-lisada-varju-piirid-teha-pilte-silma paista

24.

Pildipiirid CSS-iga

Tõesti lihtne õpetus, mis näitab, kuidas CSS-i abil piltidele kindlat piiri lisada.

Pilt-piirid-CSS-pildi-kujunduse-taustaga-välimus-inspiratsioon-lisage-varju-piirid-kujundage-pildid-eristage

25.

CSS Sprites ilma taustapilte kasutamata

Siit saate teada, kuidas hõljutusefekti rakendada ilma CSS-spritide kohta palju teadmisi.

Css-sprites-ilma-taustapilte-pildikujundus-taustad-välimus-inspiratsioon-lisage-varju-piirid-kujundage-pildid-eristuvad


Artikli sisu järgib meie põhimõtteid toimetuse eetika. Veast teatamiseks klõpsake nuppu siin.

Ole esimene kommentaar

Jäta oma kommentaar

Sinu e-postiaadressi ei avaldata. Kohustuslikud väljad on tähistatud *

*

*

  1. Andmete eest vastutab: Miguel Ángel Gatón
  2. Andmete eesmärk: Rämpsposti kontrollimine, kommentaaride haldamine.
  3. Seadustamine: teie nõusolek
  4. Andmete edastamine: andmeid ei edastata kolmandatele isikutele, välja arvatud juriidilise kohustuse alusel.
  5. Andmete salvestamine: andmebaas, mida haldab Occentus Networks (EL)
  6. Õigused: igal ajal saate oma teavet piirata, taastada ja kustutada.