Archiv štítku: position

Dynamicky zvětšované sprite

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.

Pokračování textu Dynamicky zvětšované sprite

Jak změnit obrázek přes CSS

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?

Pokračování textu Jak změnit obrázek přes CSS

Centrovaný modální dialog bez JS

Chcete zobrazit modální dialog ve stránce, který je vždy centrovaný do středu obrazovky? To asi budete potřebovat hodně skriptů na jeho otevření, vypočtení velikosti, vycentrování a jeho udržování v obraze (např. při otočení telefonu). Viz demo.

Ale co kdyby tohle všechno šlo udělat jen pomocí HTML a CSS, nebylo by to super?

A představte si, že to jde!

Pokračování textu Centrovaný modální dialog bez JS

Flexbox: Layout budoucnosti

Celkový layout (rozložení) stránky se z historicky-technických důvodů dělá různě: tabulkou, plovoucímu prvky či JavaScriptem.

Moderní prohlížeče ale nabízejí jednu metodu (s gridem jsou vlastně dvě), která dokáže prvky na stránce uspořádat tak, aby si zachovali svůj vzhled a zároveň se přizpůsobily stránce.

Pokračování textu Flexbox: Layout budoucnosti

Jak vyplnit prostor mezi plovoucímy prvky?

Pokud používáte plovoucí prvky, asi narazíte na problém, že prvky, které je obtékají se chovají poněkud podivně a zasahují i do prostoru rezervovaného pro plovoucí prvky:

Left
Right
center
center
center

 

V případě textu obtékajícího obrázek, což je nejčastější použití v článcích, je to efekt očekávaný, ale co dělat, když potřebujete, např. ve speciálním layoutu webové aplikace, aby prostřední prvek vyplnil prostor mezi plovoucími prvky a přitom do nich nepřesahoval?

Řešení je kupodivu velice jednoduché – stačí prostředními prvku nastavit oveflow:hidden a prohlížeč, aby zabránil překrývání plovoucího prvku obsahem toho prostředního, změní jeho šířku.

Left
Right
center
center
center

 

Pokračování textu Jak vyplnit prostor mezi plovoucímy prvky?

Nefunkční SELECTy na Android 2.x

Pokud máte problémy se SELECTy na starších Androidech, konkrétně to, že se SELECTy nechtějí otevírat a zobrazovat nativní výběr možností, je to způsobeno chybou ve staré verzi Chromium (předinstalovaná aplikace Internet).

Změna Viewport

Chyba se projevuje při určitém nastavení META tagu viewport; problémové hodnoty jsou user-scalable a width/height nastavené na aktuální hodnotu zařízení (např. width=device-width), ale možná ještě další. Pokračování textu Nefunkční SELECTy na Android 2.x

Klikací tlačítko

V moderním webu je již standardem, že tlačítka nejsou tlačítka ale odkazy nebo DIVy, které jsou jako tlačítko pouze nastylovány.

Problém je ale v tom, že takové tlačítko se nechová jako tlačítko – tedy nezmáčkne se (vizuálně), když na něj kliknete.

Obejít se do dá jednodušše pomocí CSS:

.button {
    box-shadow: 4px 4px 2px #000;
    position: relative;
}
.button:active {
    box-shadow: 2px 2px 2px #000;
    left: 2px;
    top: 2px;
}

Takovéhle tlačítko má ve výchozím vzhledu stín, aby bylo vidět, že jakoby vystupuje nad stránku a tudíž je možno s ním pohnout (kliknutím) směrem dolu. Po kliknutí se pak tlačítko posune o několik bodů doprava dolu, číž vytvoří dojem, že se zmáčknulo. Zároveň s tím se zmenší stín, takže to vypadá, že stín zůstal na místě a pouze se tlačítko přiblížilo k ploše stránky – stín se musí VŽDY zmenšit o tolik, o kolik se tlačítko posunulo.

Pokud máte raději plochý vzhled bez 3D efektů, stačí stín vynechat a pouze posunout tlačítkem:

.flat-button { position: relative; }
.flat-button:active { left: 2px; top: 2px; }

Přizpůsobení stránky na šířku mobilu či tabletu

Po použití předchozího tipu na full screen stránku možná narazíte na problém u mobilních zařízení (iPhone, iPad, Android), které si se šířkou stránky moc nelámají hlavu. Je potřeba je přinutit zobrazit stránku ve výchozím stavu tak, aby se šířkou přizpůsobila na šířku displeje (ať už je zařízení otočené na výšku či šířku).

Vložte do hlavičky stránky tento tag:

<meta name="viewport" content="width=1080, height=1920, user-scalable=yes" />

Tím řeknete, že stránka je optimalizována pro rozlišení 1080×1920 (můžete změnit, pokud máte jiné) a donutíte tak prohlížeč, aby stránku přizpůsobil.

Hodnotou user-scalable povolíte uživatelům, aby si mohli stránku přiblížit a lépe ji přečíst (zvláště užitečné na malých zařízeních).

Důležité je, aby tag viewport NEOBSAHOVAL hodnotu initial-scale, protože tím naopak říkáte, že stránka se NEMÁ přizpůsobit na šířku zařízení, ale má se zobrazit v určeném rozlišení (tedy 1:1)!