Stylujte své obrázky a používejte obrázky ve stylech
Mnoho lidí používá CSS pro úpravu textu, změnu písma, barvy, velikosti a dalších. Jedna věc, kterou však mnoho lidí často zapomíná, je, že můžete použít i CSS s obrázky.
Změna samotného obrazu
CSS umožňuje upravit, jak se na stránce zobrazí obrázek. To může být opravdu užitečné pro udržení vašich stránek konzistentní. Nastavením stylů na všech snímcích vytvoříte standardní vzhled obrázků. Některé z věcí, které můžete udělat:
- Přidejte okraj nebo obrys kolem snímků
- Odstraňte barevný okraj kolem propojených obrázků
- Nastavení šířky a / nebo výšky obrázků
- Přidejte stín
- Otočte obrázek
- Změňte styly, když se obraz vznáší
Poskytnutí obrázku hranici je skvělým místem pro začátek. Měli byste však zvážit více než hranici - přemýšlejte o celé hraně obrazu a upravte okraje a polstrování . Obraz s tenkým černým okrajem vypadá hezky, ale přidání některých polstrování mezi hranicí a obrazem může vypadat ještě lépe.
img {
hranice: 1px černá;
polstrování: 5px;
}}
Je to dobrý nápad vždy , když je to možné, spojit dekorativní obrázky . Ale když to uděláte, nezapomeňte, že většina prohlížečů přidává barevný okraj kolem obrazu. I když použijete výše uvedený kód ke změně ohraničení, odkaz bude přepsat, pokud odstraníte nebo změníte okraj také na odkaz. Chcete-li to provést, použijte podřízené pravidlo CSS pro odstranění nebo změnu okraje souvisejících obrázků:
img> a {
hranice: žádné;
}}
CSS můžete také změnit nebo nastavit výšku a šířku svých obrázků. I když to není skvělý nápad použít prohlížeč k úpravě velikosti obrázků kvůli rychlosti stahování, jsou mnohem lepší při změně velikosti obrázků, takže stále vypadají dobře. A ve službě CSS můžete nastavit, aby všechny obrázky byly standardní šířkou nebo výškou nebo dokonce nastavovaly rozměry, které mají být relativní vzhledem ke kontejneru.
Nezapomeňte, že při změně velikosti obrázků chcete dosáhnout nejlepších výsledků, měli byste měnit pouze jednu dimenzi - výšku nebo šířku. Bude to mít za následek, že obraz zachovává poměr stran, a tak to nevypadá podivně. Nastavte druhou hodnotu na hodnotu auto nebo ji nechte, aby prohlížeč informoval o zachování poměru stran.
img {
šířka: 50%;
výška: auto;
}}
CSS3 nabízí řešení tohoto problému s novými vlastnostmi objektu a pozice objektu. Pomocí těchto vlastností budete moci definovat přesnou výšku a šířku obrazu a způsob manipulace s poměrem stran. To by mohlo vytvořit efekty letterboxing kolem vašich snímků nebo oříznutí, aby se obraz dostal do požadované velikosti.
Zatímco vlastnosti CSS3 objektů a vlastností objektů nejsou dosud široce podporovány, existují další vlastnosti CSS3, které jsou dobře podporovány ve většině moderních prohlížečích, které můžete použít k úpravám obrázků. Většina moderních prohlížečů funguje právě teď, jako stíny, zaoblené rohy a transformace, které se mohou otáčet, sklopit nebo přesouvat obrázky. Potom můžete použít přechody CSS k tomu, aby se snímky změnily při přejíždění nebo po kliknutí nebo krátce po určité době.
Používání obrázků jako pozadí
CSS usnadňuje vytváření ozdobného pozadí s obrázky.
Můžete přidat pozadí k celé stránce nebo k určitému prvku. Na stránce s vlastností pozadí je snadné vytvořit obrázek na pozadí:
tělo {
obrázek-pozadí: url (background.jpg);
}}
Změňte volič těla na určitý prvek na stránce a vložte pozadí pouze na jeden prvek.
Další zábavná věc, kterou můžete udělat s obrázky, je vytvořit obrázek na pozadí, který se nezobrazuje se zbytkem stránky - jako vodoznak. Používáte pouze styl pozadí - přílohu: fixní; společně s obrazem na pozadí. Jiné možnosti pro vaše pozadí zahrnují dělat je dlaždice jen vodorovně nebo svisle pomocí vlastností opakování pozadí.
Napište opakování na pozadí: repeat-x; k vykreslení obrázku vodorovně a opakování pozadí: repeat-y; k vertikálním dlaždicím. Umístěte obrázek na pozadí s vlastností pozice pozadí.
CSS3 také přidává více stylů pro vaše pozadí. Můžete přetáhnout obrázky tak, aby se hodily k jakémukoli pozadí pozadí, nebo nastavit obrázek na pozadí podle velikosti okna . Můžete změnit pozici a pak klip na pozadí. Ale jedna z nejlepších věcí o CSS3 je, že nyní můžete vrstvit více obrazů na pozadí, abyste vytvořili ještě složitější efekty.
HTML5 pomáhá obrazům ve stylu
Element FIGURE v HTML5 by měl být umístěn kolem všech obrázků, které mohou být v dokumentu samostatné. Jeden způsob, jak o tom přemýšlet, je, zda by se obraz mohl objevit v příloze, a proto by měl být uvnitř prvku FIGURE. Potom můžete tento prvek a prvek FIGCAPTION přidat ke svým snímkům styly.