5 CSS Vlastnosti, které byste měli vědět

Existují vlastnosti CSS, jako jsou obrázky na pozadí, obrázky ohraničení, maskování a vlastnosti oříznutí, se kterými můžete přímo přidávat obrázky a ovládat jejich chování. Existují však také méně často zmiňované vlastnosti CSS, které se týkají obrazu pracovat na obrázcích přidaných pomocí HTML tag, preferovaný způsob přidávání obrázků na webové stránky.

Popis těchto vlastností se liší od ovládání stínu obrazu na nastavení ostrosti, Pomáhá nám lépe kontrolovat vzhled a polohu obrázků přidaných pomocí štítek. Uvidíme je jeden po druhém.

1. Zostřete snímky pomocí vykreslování obrazu

Když je obrázek zvětšen, prohlížeč vyhladí obraz, tak to nevypadá pixelated. V závislosti na rozlišení obrazu a obrazovky to však nemusí být vždy nejlepší. Toto chování prohlížeče můžete ovládat pomocí vykreslování obrazu vlastnictví.

Tato dobře podporovaná vlastnost řídí algoritmus použitý pro změnu měřítka obrazu. Jeho dvě hlavní hodnoty jsou ostré hrany a pixelated.

ostré hrany hodnota udržuje barevný kontrast mezi pixely. Jinými slovy, na obrázcích se neprovádí žádné vyhlazování skvělé pro pixelové kresby.

Když pixelated pixely pixelu jeho vzhled, aby se zdálo, že jsou spolu tvoří jeden velký pixel, skvělé pro obrazovky s vysokým rozlišením.

Pokud stále pozorně sledujete okraje květin v níže uvedeném GIF, můžete vidět rozdíl mezi pravidelným a a pixelated obraz.

 img image-rendering: pixelated;  

2. Natáhněte snímky pomocí objekt-fit

obsahovat, Pokrýt, vyplnit hodnoty jsou všechny známé, používáme je pro velikost pozadí vlastnost, která řídí, jak obrázek na pozadí zaplní prvek, do kterého patří. objekt-fit vlastnost je poměrně podobná, jak to také určuje velikost obrázku uvnitř kontejneru.

obsahovat hodnota obsahuje obrázek uvnitř kontejneru. Pokrýt dělá totéž, ale pokud poměr stran obrazu a kontejneru neodpovídá, obrázek je oříznut. vyplnit způsobí, že obraz bude natáhnout a naplnit jeho kontejner. měřítko dolů vybere nejmenší verzi obrázku zobrazit.

 
  #container width: 300px; výška: 300px;  img width: 100%; výška: 100%; object-fit: obsahovat;  

3. Posuňte snímky pomocí pozice objektu

Podobně jako doplnění pozadí majetek velikost pozadí, je tu pozice objektu vlastnictví pro objekt-fit, také.

objekt-fit vlastnictví přesune obrázek uvnitř obrazového kontejneru na zadané souřadnice. Souřadnice lze definovat jako jednotky s absolutní délkou, jednotky relativní délky, klíčová slova (horní, vlevo, odjet, centrum, dno, a že jo), nebo a jejich kombinací (nahoru 20px vpravo 5px, střed vpravo 80px).

 
  #container width: 300px; výška: 300px;  img width: 100%; výška: 100%; poloha objektu: 150px 0;  

4. Umístěte snímky pomocí vertikální zarovnání

Někdy přidáváme (které jsou inline od přírody) vedle textových řetězců pro další informace nebo dekorace. V tom případě, zarovnání textu a obrázku do požadované pozice může být trošku složitější - pokud nevíte, kterou vlastnost použít.

vertikální zarovnání nemovitost je ne výlučně na samotné buňky tabulky. Může také zarovnat vložený prvek uvnitř vloženého pole, a může být tedy použit zarovnat obrázek v řádku textu. To vyžaduje spravedlivý počet hodnot, které lze použít na vložený prvek, takže máte na výběr z mnoha možností.

 
 PDF  
 

5. Stínové obrazy s filtr: drop-shadow ()

Při nenápadném použití v textech a boxech mohou stíny přidat webové stránce život. Totéž platí pro obrázky. Obrazy s tvarem jádra a průhledným pozadím mohou těžit z vrhat stín CSS filtr.

Její argumenty jsou podobné hodnotám CSS vlastností souvisejících se stínem (textového stínu, box-stín). První dvě reprezentují vertikální a horizontální vzdálenost mezi stíny a obrazem je třetí a čtvrtý rozmazat a šířka stínu, a poslední je barva stínu.

Stejně jako textového stínu, vrhat stín také vytváří stín, který je tvarovaný k příslušnému objektu. Když je tedy obrázek aplikován na obraz, má tvar viditelné části obrazu.

 img filtr: drop-shadow (0 0 5px blue);  

Číst také: Odraz obrazu CSS3 [Tipy CSS3]