Estilo zure irudiak eta irudiak esteketan erabiltzea
Jende askok CSS erabiltzen du testua doitzeko, letra, kolorea, tamaina eta gehiago aldatuz. Baina jende askok ahaztu ohi duen gauza bat irudiak dituzten CSSa ere erabil dezakezu.
Irudia aldatzea bera
CSS-k orriaren irudia nola erakusten duen egokitzeko aukera ematen du. Hau oso lagungarria izan daiteke zure orriak koherentea izan dadin. Irudi guztietako estiloak ezarriz, zure irudien itxura estandarra sortuko duzu. Egin ditzakezun gauza batzuk:
- Gehitu ertza edo eskema bat irudien inguruan
- Kendu estekatutako irudien inguruan koloretako ertza
- Irudiaren zabalera eta / edo altuera doitzea
- Gehitu itzaldura
- Biratu irudia
- Aldatu estekak irudia gainetik pasatzean
Zure irudia mugaz haraindiko leku bikaina da. Baina mugatik baino gehiago kontsideratu beharko zenuke zure irudiaren ertz osoa pentsatu eta marjinak eta estalkiak ere egokitu. Marra beltz mehe baten irudia itxura polita da, baina ertzaren eta irudien arteko marko batzuk gehituz, are hobea izan daiteke.
img {
mugan: 1px beltza;
betegarria: 5px;
}
Ideia ona da beti dekorazio-irudiak estekatzeko , beti ere . Baina egiten duzunean, gogoratu nabigatzaile gehienek irudiaren koloreko ertz bat gehitzen dutela. Goiko kodea erabiltzen baduzu mugatik aldatzeko, estekak gainidatziko du estekan estekan kendu edo aldatu ezean. Horretarako, CSS haurrentzako arau bat erabili behar duzu estekatutako irudien inguruko ertza kendu edo aldatzeko:
img> a {
mugan: none;
}
CSS erabil dezakezu zure irudien altuera eta zabalera aldatzeko edo zehazteko. Ez da ideia ona arakatzailea erabiltzeko irudiaren tamainak doitzeko, deskargaren abiaduraren arabera, askoz ere hobeak izaten ari dira irudiaren tamaina aldatzeko, oraindik itxura ona dutelako. CSSren bidez, zure irudiak zabalera edo altuera estandar bat izan dezazun edota edukiontziari dagokion dimentsioak ere ezarri ahal izango dituzu.
Gogoratu, irudiak tamaina aldatzen dituzunean, emaitzarik onenak lortzeko, tamainaz aldatu beharko zenuke tamaina edo zabalera. Irudi honek itxura-erlazioa mantentzen du eta, beraz, ez da arraroa. Ezarri beste balioa automatikoki edo utzi nabigatzaileari alderantzizkoa koherentea mantentzeko.
img {
zabalera:% 50;
altuera: auto;
}
CSS3 arazo honi irtenbide bat eskaintzen dio propietate objektibo berriekin eta objektu posizioarekin. Propietate hauei esker, altuera eta zabalera zehatza zehaztu ahal izango dituzu eta alderdiaren proportzioa nola maneiatu behar den. Honek zure irudien inguruko postontzien efektuak sor ditzake edo mozten du irudia behar den neurrian sartzeko.
CSS3 objektu-egokitze eta objektu posizioko propietateak oraindik ez dira onartzen oraindik, baina zure CSS3 propietateak ongi onartzen dira zure irudiak aldatzeko erabil ditzakezun arakatzaile modernoenak. Itzalen itzalak, ertz biribilak eta eraldaketak, zure nabigazio modernoenak bezalako lanak oraintxe biratu, moztu edo mugitu ditzakezue. CSS transizioak erabil ditzakezu irudiak aldatzeko, klik egin edo denbora tarte baten ondoren aldatzeko.
Irudiak Atzeko plano gisa erabiltzea
CSS-k irudien funtsezko irudiak sortzen ditu zure irudiekin.
Atzeko planoak orrialde osoa edo elementu jakin batetara gehi ditzakezu. Atzeko planoko irudi bat sortzen erraza da hondo-irudiaren propietatearekin:
gorputza {
background-image: url (background.jpg);
}
Aldatu gorputz-hautatzailea orrialdean elementu jakin batera atzeko planoan elementu bakarrean jartzeko.
Irudiekin egin dezakezun beste gauza dibertigarri bat sortzen da atzealdeko irudia, gainerako orrialdearekin mugitzen ez den bezala - marka bat bezala. Estiloaren atzealdeko eranskina erabili besterik ez duzu: konpondu; zure atzeko planoko irudiarekin batera. Zure atzeko planoko beste aukera batzuek horizontalean edo bertikalean fitxak egiten dituzte atzeko planoko errepikapenaren propietatearekin.
Atzeko planoko errepikapena idatzi: errepikatu-x; irudia horizontalean eta atzeko planoan errepikatu: errepikatu y; bertikalki fitxa. Atzeko planoko posizioarekin atzeko planoko irudia posizionatu dezakezu.
Eta CSS3 estilo gehiago ere gehitzen zaizkizu zure atzeko planoetara. Irudiak luzatu ditzakezu edozein neurriko atzeko planoetara egokitzeko edo atzeko planoko irudia eskalatzeko leihoaren tamainarekin . Posizioa alda dezakezu eta, ondoren, atzeko planoko irudia kliskatu. Baina CSS3ren inguruko gauza onenetariko bat da orain atzeko planoko irudiak baino gehiago geratzea are konplexuagoa den efektuak sortzeko.
HTML5 estilo-irudien laguntzaz
HTML5 elementuaren FIGURE elementua dokumentuaren barnean jar daitekeen edozein irudiaren inguruan jarri behar da. Modu batean pentsatzea irudia eranskin batean agertzea balitz, FIGURA elementuaren barruan egon beharko litzateke. Ondoren, elementu hori eta FIGCAPTION elementua erabil ditzakezu estiloari irudiak gehitzeko.