Velmi jednoduchý způsob otáčení prvků webové stránky - stačí použít několik stylů css. Seznámení s touto lekcí vám umožní umístit do alba na stránce rozložený ventilátor karet, rozptýlené spadané listí nebo stylové fotografie. Lekce obsahuje příklad implementace fotoalba a zohledňuje řešení pro všechny moderní prohlížeče.
Je to nutné
Čtyři fotografie široké až 450 pixelů
Instrukce
Krok 1
Tento příklad se zaměří na vytvoření stylové stránky alba s otočenými fotografiemi.
Připravil jsem předem obrázky (šířka 400px) s adresami:
V budoucnu přiřadíme obrázkům ID podle jejich jmen.
Krok 2
Nejprve připravíme blok pro naše fotoalbum pomocí značky div a také do ní přidáme fotografie pomocí značky img (každý obrázek musí být uzavřen ve své vlastní značce div), například takto:
Upozorňujeme, že bloku jsme přidělili identifikátor -. Podle identifikátoru můžeme odkazovat na blok pomocí css.
Krok 3
Dále musíte nastavit styly css na blok. Seznam stylů: "position: relative;" - nastaví počátek z levého horního rohu našeho bloku; "okraj: 50 pixelů automaticky;" - nastaví odsazení našeho bloku „50px“nad a pod zbytkem obsahu stránky a také nastaví automatické odsazení vpravo a vlevo, čímž zarovná náš blok do středu; "šířka: 900px; výška: 650px;" - nastaví šířku na 900 pixelů a výšku na 650 pixelů.
Zadaný seznam stylů musí být umístěn takto:
#photo_page {
pozice: relativní;
okraj: 0 auto;
šířka: 900px;
výška: 650px;
zarovnání textu: na střed;
}
Všimněte si použití „#photo_page“- takto označujeme ID bloku.
Krok 4
Nyní přiřadíme obecné styly pro každý obrázek uvnitř bloku photo_page. Jedná se o zaoblené rohy, šedé ohraničení, bílé pozadí, polstrování a vržený stín.
Tím se vytvoří fotografický efekt:
#photo_page img {
poloměr ohraničení: 7px;
okraj: 1px plná šedá;
pozadí: #ffffff;
výplň: 10px;
stín: 2px 2px 10px # 697898;
}
Všimněte si použití „#photo_page img“- toto bude odkazovat na všechny obrázky uvnitř bloku photo_page
Krok 5
Je také důležité přidat krátký styl, jako je tento:
#photo_page div {
plavat vlevo;
}
Zmenší všechny bloky uvnitř bloku photo_page doleva.
Krok 6
Mezistupeň lekce byl nyní dokončen. Pokud je vaše práce podobná obrázku na snímku obrazovky, pak jste neudělali chybu a můžete přejít k dalšímu kroku.
Krok 7
Nyní se otočíme a otočíme zveřejněné fotografie. K tomu potřebujeme styl transformace. V tuto chvíli se ve své čisté podobě nepoužívá, ale pouze s předponou pro každý prohlížeč na začátku, například takto:
-webkit-transformace: rotace (hodnota);
-moz-transformace: rotace (hodnota);
-o-transformace: rotace (hodnota);
Toto je styl rotace pro prohlížeče: Google Chrome, Mazilla, Opera (v uvedeném pořadí). Namísto slova „value“vložíme na konec číslo s deg, například:
90 stupňů - otočení o 90 stupňů ve směru hodinových ručiček.
-5 stupňů - otáčení o 5 stupňů proti směru hodinových ručiček.
Atd.
Krok 8
Styl pro fotografii foto_1:
# photo_1 {
-webkit-transformace: rotace (5 stupňů);
-moz-transformace: otočit (5 stupňů);
-o-transformace: otočit (5 stupňů);
}
První obrázek je otočen o 5 stupňů.
Krok 9
Styl pro fotografii photo_2:
# photo_2 {
-webkit-transformace: rotace (-3deg);
-moz-transformace: otočit (-3deg);
-o-transformace: otočit (-3deg);
}
Druhý obrázek je otočen o -3 stupně.
Krok 10
Styl pro foto foto_3:
# photo_3 {
-webkit-transformace: rotace (-2deg);
-moz-transformace: rotace (-2deg);
-o-transformace: otočit (-2deg);
}
Třetí obrázek je otočen o -2 stupně.
Krok 11
Styl pro fotografii foto_4:
# photo_4 {
-webkit-transformace: rotace (8deg);
-moz-transformace: otočit (8deg);
-o-transformace: otočit (8deg);
}
Čtvrtý obrázek je otočen o 8 stupňů.
Krok 12
Podívejme se, jak můžete opravit polohu obrázků. Například chcete posunout první obrázek o 20px shora a 10px zleva. V takovém případě musíte použít styl okraje. Zde je správný způsob, jak jej použít pro náš případ:
# photo_1 {
okraj: 20px -10px -20px 10px;
-webkit-transformace: rotace (5 stupňů);
-moz-transformace: otočit (5 stupňů);
-o-transformace: otočit (5 stupňů);
}
Pamatujte, že první hodnotou stylu je horní okraj; druhá je zarážka vpravo; třetí je zarážka zespodu; čtvrtá - levá odrážka.
Důležité: v našem případě se spodní okraj rovná záporné hodnotě horního okraje. Pokud na stránce vidíte pod obrázkem prázdné místo, zkuste odsadit spodní část obrázku ještě negativněji.
Krok 13
Práce je dokončena, poskytuji snímek obrazovky (s přihlédnutím ke změně odsazení prvního obrázku popsané v kroku 12).
Přidejte styl odsazení všem obrázkům, které nejsou v pozici, která vám vyhovuje.
