Hona hemen diseinu sentikorren irudiak CSS erabiliz nola gehitzen diren
Gaur webgune ezagunei begiratzea eta diseinuaren tratamendua ikustea oso garrantzitsua dela ikusten da. Irudi horiek gehitzen dituzten erronketako bat web orriek pantailaren tamainako eta gailu desberdinetatik erantzun behar duten praktika onenetik dator, diseinu sentikorreko diseinu bat bezala ezagutzen dena.
Zure webgunearen diseinuaren aldaketak eta eskalak pantailaren tamaina desberdinetatik ateratakoak direla eta, honela, atzeko planoko irudi horiek tamaina aldatu behar dute horren arabera.
Izan ere, "fluidoen irudiak" webgune sentikorren gakoetako bat dira (sare fluidoa eta komunikabideen kontsultak batera). Hiru pieza horiek web diseinu sentikorren oinarrizko diseinua izan da hasieratik, baina, beti ere, nahiko erraza izan da inline irudiak gune batera bidaltzea (inline irudiak HTML markatuaren barruan kodetzen diren grafikoak dira). Atzeko planoko irudiekin (CSS atzeko planoko propietateak erabiltzen diren orrialdean estilizatuta) aspalditik web diseinatzaile eta frontend-garatzaile askok erronka handia izan dute. Zorionez, CSS-en "background-size" propietateak aukera hau egin du.
Beste artikulu batean, CSS3 propietatearen atzeko planoaren tamaina nola erabili erabili nuen estaltzeko, leiho batean sartzeko irudiak luzatzeko, baina jabetza hobeagoa izan dadin. Horretarako, ondoko jabetza eta balioa konbinazioa erabiliko ditugu:
background-size: cover;
Estalkia keyword propietateak arakatzaileari esaten dio irudia leihoari egokitzeko, leihoaren tamaina handiak edo txikiak kontuan hartu gabe. Irudia eskalatzen da pantaila osoa estaltzeko, baina jatorrizko proportzioak eta itxura-erlazioa oso-osorik mantentzen dira, irudiarengandik desitxuratuta egon ez dadin.
Irudia leihora ahalik eta zabalena da leiho gainazal osoa estalita dagoenean. Honek esan nahi du ez duzula zure orriko lekuen zuririk edo irudiaren distortsiorik izango, baina horrek esan nahi du irudi batzuk moztu egin daitezkeela pantailaren aspektu-erlazioaren eta irudiaren arabera. Adibidez, irudi baten ertzak (goiko, beheko, ezkerreko edo eskuinekoak) irudiak moztu ditzakezu, hondoaren posizioaren propietateari dagokion balioen arabera. "Atzeko planoa" atzeko planoan orientatzen baduzu, irudian gehiegizko beherakada eta behe aldeak igaroko dira. Atzeko planoko irudia zentratzen baduzu, gehiegizkoa alde guztietatik igaroko da, baina gehiegizkoa zabaldu ahala, inolako eraginik alde batera utziko dute.
Nola erabili atzeko planoko tamaina: estalkia;
Atzeko planoa sortzean, ideia ona da nahiko handia den irudia sortzeko. Arakatzaileek kalitate bisualean eragin nabarmena izan dezaketen irudi bat txikiagoa izan daiteke, arakatzaileak irudia neurri handi batean jatorrizko dimentsioak baino handiagoa bada, kalitate bisuala degradatu egingo da, lausotuta eta pixelatua bihurtuz. Horren arazoa da zure orrialdeak performance erraldoi bat eramaten duenean erraldoi irudiak pantailetara eramaten dituzunean.
Hau egiten duzunean, ziurtatu deskargatu abiadura eta web banaketa behar duten irudiak behar bezala prestatzeko . Azkenean, ertain zoragarria aurkitu behar duzu irudiaren tamaina eta kalitate handiaren eta deskargatzeko abiadura handiko fitxategi tamaina baten artean.
Eskalatzeak atzeko planoko irudiak erabiltzeko modu arruntetako bat da irudia orrialde baten atze osoa bilatzea nahi baduzu, orrialde hori zabala den eta mahaigaineko ordenagailu batean ikusita edo askoz ere txikiagoan eta eskuko gailu batera bidaltzen baduzu. gailuak.
Kargatu irudia web ostalariari eta gehitu CSS atzeko planoko irudi gisa:
background-image: url (fireworks-over-wdw.jpg);
background-repeat: no-repeat;
atzeko planoaren posizioa: zentro zentroa;
atzeko planoko eranskin: finkoa;
Gehitu lehenespenez CSS aurrizkia nabigatzailea:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
Ondoren, gehitu CSS propietatea:
background-size: cover;
Disposituz aldatzeko erabilitako irudiak erabiltzea
Mahaigaineko ordenagailu eramangarri baten diseinu sentikorra garrantzizkoa den bitartean, Webgunera sar daitezkeen gailuen barietateak nabarmen hazi dira eta pantaila-tamainu ugari daude.
Aurretik aipatu bezala, smartphone-aren atzeko plano sentikorreko irudia oso handia kargatzeko, adibidez, ez da eraginkorra edo banda zabaleko kontzienteena.
Ikas ezazu multimedia-kontsultak erabil ditzazun agertzen diren gailuei egoki irudiak emateko eta webgunearen bateragarritasuna hobetuko duzu gailu mugikorretan.
Jennfier Krynin-en jatorrizko artikulua. Jeremy Girard-ek argitaratua 17/12/17