Pokud připravujete obrázky JPG pro váš web, pravděpodobně jste již narazili na problém, v jaké kvalitě (resp. kompresi) obrázek uložit, aby byl co nejmenší a zároveň stále bylo vidět, co na něm je místo aby byly vidět chyby (artefakty).
Já vám ukážu jednoduchý matematický výpočet, kterým určíte nejvhodnější kompresi.
Pokračování textu Jak určit kvalitu a kompresi JPG obrázků?Pro responzivní stránky je nejlepší použít vektorové obrázky SVG. Stále ale ještě existují prohlížeče, které ho nepodporují a tak je potřeba zajistit, aby se zobrazilo alespoň PNG (i když ve špatné kvalitě).
Je známo, že pokud zobrazujete nějaký progressbar (zobrazení průběhu), uživatelům se zdá proces rychlejší, pokud se pozadí progressbaru pohybuje směrem doleva.
Jak ale udělat animované pozadí bez toho, abyste složitě připravovali animované obrázky?
Pokračování textu Animovaný progress bez animovaného obrázku
Pokud umístíte obrázek do DIVu za tím účelem, aby se DIV velikostí přizpůsobil obrázku (a umožnil např. zadání více borderů, nebo absolutní pozicování přes obrázek), někdy se setkáte s tím, že DIV má dole malý okraj, který přesně nesedí na obrázku. Navíc se tento okraj nedá najít v debuggeru, protože nejde o padding ani margin.
<div class="imgWrapper">
<!-- autosize DIV around IMG -->
<img src="..." />
</div>
Internet Explorer 9, který je stále rozšířený na počítačích s Windows XP a neaktualizovaných Vista a Windows 7, obsahuje jednu nepěknou chybu, která může uživatelům vašich stránek zabránit ji správně používat.
Chyba spočívá v tom, že odkaz, který je absolutně pozicovaný, nedostane správně nastavenu hodnotu z-index a v důsledku toho bude skrytý za ostatními prvky:
.linkContainer { width: 100px; height: 50px }
.linkContainer > * {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
z-index: 10;
}
/* display link above everything else */
.linkContainer > a { z-index: 11; }
V tomto případě bude mít v IE9 odkaz skutečný z-index = 1, takže jakýkoliv jiný prvek v kontejneru znemožní kliknout na něj.
Oprava je celkem jednoduchá – pokud do odkazu přidáte nějaký obrázek na pozadí, donutíte IE9 trochu více přemýšlet o tom, jak odkaz zobrazit a správně mu nastaví požadovaný z-index.
/* display link above everything else */
.linkContainer > a {
z-index: 11;
background: url('link.png') transparent;
}
Tento trik funguje i s prázným nebo dokonce neexistujícím obrázkem:
/* display link above everything else */
.linkContainer > a {
z-index: 11;
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) transparent;
/* 1x1px průhledný GIF */
}
nebo
/* display link above everything else */
.linkContainer > a {
z-index: 11;
background: url(#) transparent;
/* # odkazuje na vlastní HTML stránku,
což není validní obrázek a proto
se v pozadí nic nezobrazí */
}
Pokud nemůže řešit opravu pro konkrétní odkazy, stačí na začátek prvního CSS souboru (nebo na začátek HTML stránky) přidat obecnou definici:
a { background: url(#); /* Fix IE9 anchor */ }
Pokud bude tato definice skutečně na začátku, opraví automaticky všechny (potencionálně rozbité) odkazy a zároveň umožní ostatním CSS definicím definovat vlastní barvy a pozadí specifickým odkazům.
V některých případech se může zdát, že z-index v IE9 nejde nastavit některým (dalším) prvkům.
To je pravděpodobně způsobeno tím, že se pokoušíte umístit prvek absolutně přes nějaký z uživatelského pohledu důležitý prvek. V takovém případě IE9 zabrání znepřístupnění tohoto prvku tím, že zruší z-index prvkům, které by ho překrývali.
Za uživatelsky důležité jsou považovány formulářové prvky (input, select, atd.), videa, Java objekty a podobné prvky, které nativně reagují na kliknutí a jiné události myši.
Technika spritů je nejjednodušší způsob, jak zrychlit načítání stránky, pokud na ní potřebujete mít velké množství ikonek nebo jiných (zpravidla relativně malých) obrázků.
Problém ale začíná s tím, jak sprite správně vytvořit a nastavit, aby se zobrazila požadovaná ikona (a nebyly vidět ty sousední). Nejobtížnější pak bývá udělat ikony responzivní, aby se například vždy přizpůsobili na výšku řádky v menu.
Jestli děláte pro svou stránku šablony, jistě víte, že součástí šablony jsou často i různé grafiky, ikony a obrázky.
Pokud je stránka správně udělaná a připravená, není to problém, protože většina grafiky bude dělaná přes background-image a ikony přes sprity.
Co ale dělat v případě, že na stránce je natvrdo napsaný IMG s obrázkem, který potřebujete změnit?
U moderních stránek je často potřeba zobrazit obsah tak, aby vyplnil celé okno prohlížeče (např. kvůli pozadí, vycentrování horizontálně i vertikálně apod.). Většina designérů a programátorů většinou zkusí jako první krok CSS:
body { width: 100%; height: 100%; }
A když to nepřinese požadovaný efekt, tak přejdou k Javascriptu a velikost okna počítají dynamicky.
K tak drastickým řešením ale není důvod a stejného efektu lze dosáhnout i pomocí CSS, jen je potřeba vědět, co nastavit:
html, body { width: 100%; height: 100%; }
Stačí kromě BODY nastavit styl i na HTML, které každou stránku obklopuje, a jako zázrakem se celá stránka roztáhne. Pak již můžete nastavit pozadí automaticky zvětšené a centrované na okno prohlížeče:
body {
background: url('/images/page-bg.png')
no-repeat scroll center center
transparent;
background-size: contain;
}
Nebo oblíbený obsah ve sloupci uprostřed stránky:
body {
max-width: 1024px;
margin: 1em auto;
}
Nebo patičku stránky zobrazenou vždy u dolního okraje okna (i když je obsah stránky menší):
body {
/* zamezí překrytí obsahu patičkou */
margin-bottom: 1EM;
}
#footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%; /* nebo auto */
height: 1EM;
}
Pozor na to, že pokud byste chtěli do BODY nastavit padding pro odsazení, bude problém s nastavením šířky (a výšky) na 100%. Ve výchozím nastavení se totiž padding nepočítá do šířky prvku a tak by jeho výsledná šířka byla { 100% + levý padding + pravý padding }.
Aby prohlížeč správně vypočetl 100% šířku, je potřeba změnit jeho výpočet na border-box:
body {
width: 100%;
height: 100%;
padding: 1em; /* odsazení od okrajů */
box-sizing: border-box; /* započítej
padding do width a height */
}
Pokud máte na pozadí nějakého prvku obrázek, možná budete potřebovat nastavit jeho velikost. To hlavně v případě, že děláte responzivní layout, který se zvětšuje podle rozlišení zařízení.
Poznámka: Níže uvedené vlastnosti background-* fungují jen v prohlížečích IE9+, Firefox 6+, Chrome 11+, Safari 5+, Android 4+ a iOS 7.1+.
Velikost nastavíte např. takhle:
.big-background { background-size: 50%; }
Pokud chcete, aby obrázek na pozadí (např. ikonka v menu) přesně zapadnul do řádku, bude se hodit např. tento styl:
ul.menu li img.icon {
background-size: 1EM;
}
/* Jednotka EM odpovídá poměru
vůči hodnotě font-size */
Obrázek ale nemusíte zvětšovat jen lineárně, ale můžete použít dvě velikosti k roztažení obrázku jen v jednom směru:
.background {
background-image: url('bg_1x100px.jpg');
background-repeat: repeat-x;
background-size: 1px 1EM;
}
Předchozí styl zvětší obrázek na výšku řádky, ale přitom ponechá jeho šířku na 1px, aby se zbytečně neroztahoval v rozměru, kde to za něj udělá opakování.