Exekutatu teknika CSSrekin
Webgune bat diseinatzen ari bazara, web orri batean atzeko planoko irudi finkoko edo margo urdin bat nola sortu ikasteko interesa duzu. Diseinuaren tratamendu komuna ohikoa izan da denbora luzean konektatuta. Zure web diseinurako poltsa trikimailuetan erabiltzeko modukoa da.
Aurretik egin ez baduzu edo zorte txarrerako probatu baduzu, prozesua beldurra dirudi, baina ez da oso zaila. Tutorial labur honekin, teknikan murgiltzeko behar duzun informazioa lortuko duzu CSS erabiliz.
Hasten
Atzeko planoko irudiak edo margoak (benetan oso argiak diren atzeko planoko irudiak dira) inprimatutako diseinuaren historia dute. Dokumentuak aspaldiko marka horien artean daude, kopiatu beharreko saihesteko. Horrez gain, flyer eta liburuxkak askotariko atzealdeko irudiak erabiltzen dituzte inprimatutako lanaren diseinuan. Web diseinuak mailegatutako estilo luzeak ditu inprimatu eta atzeko planoko irudietatik mailegatutako estilo horietako bat.
Atzeko planoko irudi handiak hauek dira hiru CSS estilo propietateak erabiliz sortzeko erraza:
- hondo-irudi
- background-errepikatu
- hondo-eranskin
- hondo-tamaina
Aurrekariak-irudia
Atzeko planoko irudia erabiliko duzu zure marka gisa erabiliko den irudia definitzeko. Estilo honek, besterik gabe, fitxategi-bide bat erabiltzen du zure webgunean duzun irudia kargatzeko, ziurrenik "irudiak" izeneko direktorio batean.
background-image: url (/images/page-background.jpg);
Garrantzitsua da irudi bera arinagoa edo gardenagoa izatea irudi arrunt bat baino. Honek "watermark" itxura sortuko du, irudi gardena den irudia testuinguruan, grafikoetan eta beste web orriko elementu nagusietan kokatzen baita. Urrats hori gabe, atzeko planoko irudia zure orriko informazioarekin lehiatuko da eta irakurketa zaila egingo du.
Atzeko planoko irudia edonoiz edizio programa batean doi dezakezu, hala nola, Adobe Photoshop.
Aurrekariak-Errepikatu
Atzeko planoko errepikapen propietatea datorren hurrengoa. Zure irudia handia izan behar duzu marko-estilo grafiko handia bada, jabetza hori erabili beharko zenuke irudia behin bakarrik bistaratzeko.
background-repeat: no-repeat;
"Ez-errepikatu" propietateik gabe, lehenetsia irudian orrialdean berriro errepikatuko da. Webgune honetako diseinu modernoena ez da nahitaezkoa, beraz, estilo hau ezinbestekoa izango litzateke zure CSS-an.
Aurrekariak-eranskina
Atzeko planoko eranskinak web-diseinatzaile askok ahaztu egiten zaizkie. Erabiliz, "finkoa" jabetza erabiltzen duzun tokian konponduko den atzealdeko irudia mantentzen du. Irudi hori irudian bihurtzen den flasha bihurtzen duena da.
Propietate honetarako balio lehenetsia "korritu" da. Atzeko planoko eranskin bat zehazten ez baduzu, atzealdea orrialdearekin batera mugituko da.
atzeko planoko eranskin: finkoa;
Aurrekariak-neurria
Atzeko planoaren tamaina CSS propietate berriagoa da. Bisitatzen ari den leihoan oinarritutako atzeko planoaren tamaina ezartzeko aukera ematen du. Horrek oso lagungarria da hainbat gailutan tamaina desberdinetan erakutsiko dituen webgune sentikorretarako .
background-size: cover;
Balio erabilgarri horri bi balio erabil ditzakezu:
- Estaldura - Atzeko planoa eskalatzen du, beraz, zabalera osoa edo altuera osoa erakusten da. Horrek esan nahi du irudiaren zati batzuk ez liratekeela pantailan agertuko, baina eremu osoa estali egingo dela.
- Edukia : irudia eskalatzen du, zabalera eta altuera osoa agertuko diren eremuan. Irudia ez da moztu, baina arazotzat hartzen da inguruko atalak ez direla irudiak estaltzen.
Zure orria CSS gehitzea
Goiko propietateak eta haien balioak ulertu ondoren, estilo hauek zure webgunera gehi ditzakezu.
Gehitu hau zure web orriaren buruari orri bakarreko orri bat egiten ari bazara. Gehitu kanpoko estilo-orriko CSS estiloak orri anitzeko orri bat eraikitzen ari bazara eta kanpoko orri baten boterea aprobetxatu nahi baduzu.