Veľmi jednoduchý spôsob otáčania prvkov webovej stránky - stačí použiť niekoľko štýlov CSS. Zoznámenie sa s touto lekciou vám umožní umiestniť na stránku rozložený vejár karty, rozptýlené opadané lístie alebo štýlové fotografie do albumu. Lekcia obsahuje príklad implementácie fotoalbumu a zohľadňuje riešenie pre všetky moderné prehliadače.
Je to nevyhnutné
Štyri fotografie až do šírky 450px
Inštrukcie
Krok 1
Tento príklad sa zameria na vytvorenie štýlovej stránky albumu s otočenými fotografiami.
Pripravil som vopred obrázky (šírka 400px) s adresami:
V budúcnosti budeme obrázkom priraďovať ID podľa ich mien.
Krok 2
Najskôr pripravíme blok pre náš fotoalbum pomocou značky div a tiež do nej pridáme fotografie pomocou značky img (každý obrázok musí byť uzavretý vo svojej vlastnej značke div), napríklad takto:
Upozorňujeme, že bloku sme pridelili identifikátor -. Podľa identifikátora môžeme na blok odkazovať pomocou css.
Krok 3
Ďalej musíte nastaviť štýly css na blok. Zoznam štýlov: "position: relative;" - nastaví pôvod z ľavého horného rohu nášho bloku; „okraj: 50px auto;“- nastaví odsadenie nášho bloku „50px“nad a pod zvyškom obsahu stránky, rovnako ako nastaví automatické odsadenie vpravo a vľavo, čím zarovná náš blok do stredu; „šírka: 900 pixelov; výška: 650 pixelov;“- nastaví šírku na 900 pixlov a výšku na 650 pixelov.
Zadaný zoznam štýlov musí byť umiestnený týmto spôsobom:
#photo_page {
poloha: relatívna;
okraj: 0 auto;
šírka: 900px;
výška: 650px;
zarovnanie textu: na stred;
}
Všimnite si použitie „#photo_page“- takto označujeme ID bloku.
Krok 4
Teraz priradíme všeobecné štýly pre každý obrázok vo vnútri bloku photo_page. Jedná sa o zaoblené rohy, sivé okraje, biele pozadie, výplň a tieň.
Takto sa vytvorí fotografický efekt:
#photo_page img {
polomer hranice: 7px;
okraj: 1px plná šedá;
pozadie: #ffffff;
výplň: 10px;
tieň boxu: 2px 2px 10px # 697898;
}
Všimnite si použitie „#photo_page img“- toto bude odkazovať na všetky obrázky v bloku photo_page
Krok 5
Je tiež dôležité pridať krátky štýl, ako je tento:
#photo_page div {
plavák: vľavo;
}
Zmenší všetky bloky vo vnútri bloku photo_page doľava.
Krok 6
Medzistupeň hodiny je teraz ukončený. Ak je vaša práca podobná obrázku na snímke obrazovky, neurobili ste chybu a môžete pokračovať k ďalšiemu kroku.
Krok 7
Teraz sa otočením otočíme zverejnené fotografie. Na to potrebujeme štýl transformácie. Momentálne sa v čistej podobe nepoužíva, ale iba s predponou pre každý prehliadač na začiatku, napríklad takto:
-webkit-transformácia: rotácia (hodnota);
-moz-transformácia: otočiť (hodnota);
-o-transformácia: otočiť (hodnota);
Toto je štýl rotácie pre prehliadače: Google Chrome, Mazilla, Opera (v uvedenom poradí). Namiesto slova „hodnota“vložíme na koniec číslo s deg, napríklad takto:
90 stupňov - otočenie o 90 stupňov v smere hodinových ručičiek.
-5 stupňov - otočenie o -5 stupňov proti smeru hodinových ručičiek.
Atď.
Krok 8
Štýl pre fotografiu foto_1:
# photo_1 {
-webkit-transformácia: otočiť (5 stupňov);
-moz-transformácia: otočiť (5 stupňov);
-o-transformácia: otočiť (5 stupňov);
}
Prvý obrázok je otočený o 5 stupňov.
Krok 9
Štýl pre fotografiu foto_2:
# photo_2 {
-webkit-transformácia: otočenie (-3deg);
-moz-transformácia: otočenie (-3deg);
-o-transformácia: otočiť (-3deg);
}
Druhý obrázok je otočený o -3 stupne.
Krok 10
Štýl pre fotografiu foto_3:
# photo_3 {
-webkit-transformácia: otočenie (-2deg);
-moz-transformácia: otočiť (-2 °);
-o-transformácia: otočiť (-2 °);
}
Tretí obrázok je otočený o -2 stupne.
Krok 11
Štýl pre fotografiu foto_4:
# photo_4 {
-webkit-transformácia: otočiť (8 stupňov);
-moz-transformácia: otočiť (8 stupňov);
-o-transformácia: otočiť (8 stupňov);
}
Štvrtý obrázok je otočený o 8 stupňov.
Krok 12
Pozrime sa, ako môžete opraviť polohu obrázkov. Napríklad chcete posunúť prvý obrázok o 20px zhora a 10px zľava. V takom prípade musíte použiť štýl okraja. Tu je správny spôsob použitia v našom prípade:
# photo_1 {
okraj: 20px -10px -20px 10px;
-webkit-transformácia: otočiť (5 stupňov);
-moz-transformácia: otočiť (5 stupňov);
-o-transformácia: otočiť (5 stupňov);
}
Upozorňujeme, že prvá hodnota štýlu je horný okraj; druhá je zarážka vpravo; tretí je zarážka zdola; štvrtá - ľavá zarážka.
Dôležité: v našom prípade sa dolný okraj rovná zápornej hodnote horného okraja. Ak vidíte na svojej stránke biele miesto pod obrázkom, skúste dolnú časť obrázka odsadiť ešte negatívnejšie.
Krok 13
Práca je dokončená, poskytujem snímku obrazovky (s prihliadnutím na zmenu odsadenia prvého obrázka popísanú v kroku 12).
Pridajte štýl odsadenia k obrázkom, ktoré nie sú v polohe, ktorá vám vyhovuje.
