Mnoho lidí používá CSS upravit text, změnit písmo, barvu, velikost a další. Ale jedna věc, na kterou mnoho lidí často zapomíná, je, že můžete použít CSS také s obrázky.
Samotná změna obrazu
CSS umožňuje upravit způsob zobrazení obrázku na stránce. To může být opravdu užitečné pro zachování konzistence vašich stránek. Nastavením stylů na všechny obrázky vytvoříte standardní vzhled svých obrázků. Některé z věcí, které můžete udělat:
- Přidejte ohraničení nebo obrys kolem obrázků
- Odstraňte barevné ohraničení kolem propojených obrázků
- Úprava šířky a / nebo výšky obrázků
- Přidejte vržený stín
- Otočit obrázek
- Změňte styly když je obrázek umístěn
Když dáte svému obrázku hranice, je to skvělé místo, kde začít. Měli byste ale vzít v úvahu víc než jen hranici - přemýšlejte o celé hraně obrazu a upravte okraje a polstrování také. Obrázek s tenkým černým okrajem vypadá hezky, ale přidání nějaké výplně mezi okraj a obrázek může vypadat ještě lépe.
Je to dobrý nápad vždy propojujte obrázky, které nejsou dekorativní
, Pokud to bude možné. Ale pokud tak učiníte, nezapomeňte, že většina prohlížečů přidává kolem obrázku barevný rámeček. I když použijete výše uvedený kód ke změně ohraničení, odkaz to přepíše, pokud neodstraníte nebo nezměníte ohraničení také na odkazu. Chcete-li to provést, měli byste použít podřízené pravidlo CSS k odebrání nebo změně ohraničení kolem propojených obrázků:Můžete také použít CSS ke změně nebo nastavení výšky a šířky obrázků. I když to není skvělý nápad používat prohlížeč k úpravám velikostí obrázků kvůli rychlosti stahování, zlepšují se při změně velikosti obrázků tak, aby stále vypadaly dobře. A pomocí CSS můžete všechny obrázky nastavit na standardní šířku nebo výšku nebo dokonce nastavit rozměry tak, aby byly relativní ke kontejneru.
Pamatujte, že při změně velikosti obrázků byste měli pro dosažení nejlepších výsledků změnit velikost pouze jedné dimenze - výšky nebo šířky. Tím zajistíte, že si obrázek zachová svůj poměr stran, a tak to nevypadá divně. Nastavte druhou hodnotu na auto nebo nechte prohlížeč informovaný, aby udržoval konzistentní poměr stran.
CSS3 nabízí řešení tohoto problému s novými vlastnostmi přizpůsobení objektu a pozice objektu. S těmito vlastnostmi budete moci definovat přesnou výšku a šířku obrazu a způsob, jakým by měl být zpracován poměr stran. Mohlo by dojít k vytvoření efektů letterboxing kolem vašich obrázků nebo oříznutí, aby se obrázek vešel do požadované velikosti.
Ve většině prohlížečů jsou dobře podporovány další vlastnosti CSS3, které můžete použít také k úpravám obrázků. Ve většině moderních prohlížečů nyní fungují věci jako vržené stíny, zaoblené rohy a transformace, které umožňují otáčení, zkosení nebo přesunutí obrázků. Poté můžete pomocí přechodů CSS změnit obrázky, když na ně umístíte ukazatel myši, kliknete na ně nebo po určité době.
Používání obrázků jako pozadí
CSS usnadňuje vytváření efektních pozadí s vašimi obrázky. Můžeš přidat pozadí na celou stránku nebo jen na konkrétní prvek. Pomocí stránky lze snadno vytvořit obrázek na pozadí obrázek na pozadí vlastnictví:
Změň tělo selektor na konkrétní prvek na stránce, aby se pozadí dostalo pouze na jeden prvek.
Další zábavnou věcí, kterou můžete s obrázky udělat, je vytvořit obrázek na pozadí, který se nebude posouvat se zbytkem stránky - jako vodoznak. Stačí použít styl připojení na pozadí: opraveno; spolu s obrázkem na pozadí. Mezi další možnosti pozadí patří jejich vytvoření dlaždic vodorovně nebo svisle pomocí opakování pozadí vlastnictví. Napsat background-repeat: repeat-x; vodorovně dlaždici obrazu a background-repeat: repeat-y; obkládat svisle. A můžete umístit obrázek na pozadí pomocí pozice na pozadí vlastnictví.
A CSS3 přidává další styly také pro vaše pozadí. Můžete roztáhnout obrázky tak, aby odpovídaly pozadí jakékoli velikosti, nebo nastavit obrázek na pozadí v měřítku s velikostí okna. Můžete změnit polohu a poté oříznout obrázek na pozadí. Ale jedna z nejlepších věcí na CSS3 je, že nyní můžete vrstvit více obrázků na pozadí a vytvářet ještě složitější efekty.
HTML5 pomáhá obrázkům ve stylu
The POSTAVA prvek v HTML5 by měl být umístěn kolem všech obrázků, které mohou v dokumentu stát samostatně. Jedním ze způsobů, jak o tom přemýšlet, je, pokud by se obrázek mohl objevit v příloze, pak by měl být uvnitř POSTAVA živel. Potom můžete použít tento prvek a OBRAZ prvek pro přidání stylů do obrázků.