V CSS3 jde udělat všechno, například efekt zatmění slunce (angl. eclipse)
Archiv pro den: 13.1.2014
Absolutní nebo procentuelní pozicování uvnitř kontejneru
Pokud chcete použít absolutní pozicování nebo nastavení rozměrů pomocí procent, ale pouze v rámci určitého kontejneru (např. zarovnat prvky nalevo od středu – tedy doprava na levé polovině stránky; nechat element vyplnit nadřazený kontejner, apod.), můžete k tomu použít relativní pozici kontejneru:
.container {
position: relative;
}
.absoluteChild {
position: absolute; right: 0;
}
.fillChild {
width: 90%; height: 100%; margin: 0 auto;
}
Po použití zde uvedených CSS stylů dojde k tomu, že absoluteChild bude zarovnáno na pravou stranu kontejneru container, zatímco fillChild bude vyplňovat kontejner na výšku a zabírat 90% jeho šířky (přičemž bude zarovnáno na střed). Oba prvky se budou samozřejmě překrývat díky tomu, že absoluteChild je absolutně pozicované.
Skrolování prstem
Možná to zní divně, ale ani na dotykových zařízeních není výchozí, že lze skrolovat obsah prstem.
Celou stránku samozřejmě posouvat prstem jde, ale pokud do stránky vložíte nějaký kontejner např. s overflow:auto nebo overflow:scroll, tak mobilní prohlížeče tyto styly zpravidla ignorují a zobrazí jen to, co se vejde na obrazovku.
Pro povolení ale stačí použít jednoduchý styl:
.container {
/* nastaví scrollování na desktopu */
height: 100%;
overflow: auto;
/* povolí skrolovat obsah prvku
pomocí posouvání prstem */
-webkit-overflow-scrolling: touch;
}
Pozor ale na to, že takto upravený kontejner může na některých zařízeních způsobovat určité problémy (např. posouvání nebude tak plynulé jako když jde o jednoduchou stránku).
Vynucení jednoduchého chování na mobilech
Chytré telefony (iPhone, Android, apod.) mají ve svých prohlížečích celou řadu doplňkových vlastností, které se vám ale ne vždy mohou hodit. Pro jejich vypnutí můžete použít některý (nebo i všechny) z následujících vlastností:
html, body {
/* zakázání změny velikosti textu
- užitečné, pokud máte layout přesně
napasovaný na použité texty */
-webkit-text-size-adjust: none;
/* zakáže použití akce tap&hold
(podržení) pro zobrazení kontextového
menu - touto akcí se většinou dá
zkopírovat text stránky, uložit
obrázek ze stránky, apod. */
-webkit-touch-callout: none;
/* zakáže použití akce tap&hold
(podržení) pro výběr textu - užitečné,
pokud text tvoří část grafiky a
není tedy vhodné, aby šel vybrat
a zkopírovat */
-webkit-user-select: none;
/* Povolí Fast-Tap pro rychlé reakce
odkazů a tlačítek; také vypne zoom
pomocí double-tap; iOS 9.3+ */
touch-action: manipulation;
}
HR může pomoci při obtékání
Element HR slouží jako vodorovná čára. Pokud ho ale nepoužíváte a naopak používáte plovoucí prvky (float), občas (nebo spíše často) můžete potřebovat obtékání zastavit (clear).
K tomu lze snadno použít právě element HR, kterému seberete okraj (border):
hr {
clear: both;
border: 0 none;
height: 0;
}
Díky tomu, že HR ve výchozím stylu zabírá pouze jeden pixel na výšku (někdy 2px, protože vytváří stínovanou čáru) a má pouze horní rámeček (border-top), se dá takhle snadno změnit na neviditelný oddělovač plovoucích prvků.