Štýl vaše obrázky a používať obrázky v štýloch
Mnoho ľudí používa CSS na úpravu textu, zmenu písma, farby, veľkosti a ďalšie. Ale jedna vec, ktorú mnohí ľudia často zabúdajú, je, že môžete používať aj CSS s obrázkami.
Zmena samotného obrázka
CSS vám umožňuje upraviť spôsob, akým sa obrázok zobrazuje na stránke. To môže byť naozaj užitočné pre udržanie vašich stránok konzistentné. Nastavením štýlov na všetky obrázky vytvoríte štandardný vzhľad obrázkov. Niektoré veci, ktoré môžete urobiť:
- Pridajte okraj alebo obrys okolo obrázkov
- Odstráňte farebné okraje okolo prepojených obrázkov
- Nastavenie šírky a / alebo výšky obrázkov
- Pridajte stín na kvapky
- Otočte obrázok
- Zmeňte štýly, kedy sa obrázok pohybuje
Poskytnutie obrázku hranici je skvelým miestom na začatie. Ale mali by ste zvážiť nielen hranicu - premýšľajte nad celým okrajom vášho obrazu a upravte aj okraje a polstrovanie . Obraz s tenkým čiernym okrajom vyzerá pekne, ale pridaním niektorých polí medzi hranicou a obrázkom môže vyzerat ešte lepšie.
img {
okraj: 1px plná čierna;
polstrovanie: 5px;
}
Je to dobrý nápad vždy , keď je to možné, spojiť nedokončené obrázky . Ale keď to urobíte, nezabudnite, že väčšina prehliadačov pridáva farebný okraj okolo obrázka. Aj keď použijete vyššie uvedený kód na zmenu ohraničenia, prepojenie sa prepíše, ak odstránite alebo nezmeníte hranicu na odkaz. Aby ste to urobili, mali by ste použiť odstránenie alebo zmenu okraja súvisiacich obrázkov pomocou detského pravidla CSS:
img> a {
hranica: žiadna;
}
Môžete tiež použiť CSS na zmenu alebo nastavenie výšky a šírky obrázkov. Hoci to nie je skvelý nápad použiť prehliadač na úpravu veľkosti obrázkov kvôli rýchlosti sťahovania, sú oveľa lepšie pri zmene veľkosti obrázkov, aby ešte vyzerali dobre. Pomocou služby CSS môžete nastaviť, aby všetky obrázky boli štandardnou šírkou alebo výškou, alebo dokonca nastavili rozmery vzhľadom na kontajner.
Nezabúdajte, že pri zmenách veľkosti obrázkov, aby ste dosiahli najlepšie výsledky, mali by ste meniť iba jednu dimenziu - výšku alebo šírku. To bude znamenať, že obraz zachováva svoj pomer strán, a tak to nevyzerá zvláštne. Nastavte druhú hodnotu na automatickú alebo nechajte ju, aby presmerovala prehliadač, aby zachoval pomer strán.
img {
šírka: 50%;
výška: auto;
}
CSS3 ponúka riešenie tohto problému s novými objektmi objekt-umiestnenie a objekt-pozícia. Pomocou týchto vlastností budete môcť definovať presnú výšku a šírku obrazu a spôsob manipulácie s pomerom strán. To by mohlo viesť k vytvoreniu efektu letterboxingu okolo obrázkov alebo orezania, aby sa obrázok dostal do požadovanej veľkosti.
Zatiaľ čo vlastnosti CSS3 objektov a vlastností objektov nie sú široko podporované, existujú aj iné vlastnosti CSS3, ktoré sú dobre podporované vo väčšine moderných prehliadačov, ktoré môžete použiť na úpravu obrázkov. Veľa moderných prehliadačov funguje práve teraz, akými sú tieňové stíny, zaoblené rohy a transformácie, ktoré sa môžu otáčať, skrútiť alebo presúvať. Potom môžete použiť prechody CSS na zmenu obrázkov pri prechode alebo kliknutí alebo po určitom čase.
Používanie obrázkov ako pozadia
CSS vám uľahčuje vytváranie fantázie s vašimi obrázkami.
Môžete pridávať pozadie na celú stránku alebo len na určitý prvok. Na stránke s vlastnosťou pozadia je ľahké vytvoriť obrázok na pozadí:
telo {
pozadie-obrázok: url (background.jpg);
}
Zmeňte voľbu telefónu na určitý prvok na stránke, aby ste pozadili pozadie len na jeden prvok.
Ďalšou zábavnou vecou, ktorú môžete urobiť s obrázkami, je vytvorenie obrázka pozadia, ktoré sa nerozoberá so zvyškom stránky - ako vodoznak. Používate iba štýl prílohy na pozadí: fixné; spolu s vašim pozadím na pozadí. Ďalšie možnosti pre vaše pozadie zahŕňajú ich vytváranie dlaždíc iba horizontálne alebo vertikálne pomocou vlastností opakovania pozadia.
Napísať opakovanie pozadia: opakovanie-x; na obdarenie obrazu horizontálne a opakovanie pozadia: opakovanie-y; na dlaždice vertikálne. A môžete pozadie pozadia pozadia s vlastnosť pozadia pozadia.
A CSS3 pridáva aj viac štýlov pre vaše pozadie. Môžete roztiahnuť svoje obrázky tak, aby sa zmestili na ľubovoľnú veľkosť pozadia alebo nastaviť obrázok na pozadí tak, aby sa zmenšil veľkosť okna . Môžete zmeniť pozíciu a potom sklopiť obrázok pozadia. Ale jedna z najlepších vecí o CSS3 je, že teraz môžete vrstviť viacero pozadia, aby ste vytvorili ešte zložitejšie efekty.
HTML5 pomáha obrázkov štýlov
Prvok FIGURE v HTML5 by mal byť umiestnený okolo všetkých obrázkov, ktoré môžu byť v dokumente samostatné. Jedným zo spôsobov, ako o tom myslieť, je, či by sa obraz mohol objaviť v dodatku, potom by mal byť v prvku FIGURE. Potom môžete tento prvok a prvok FIGCAPTION použiť na pridanie štýlov do obrázkov.