Bardzo prosty sposób na obracanie elementów strony internetowej - wystarczy zastosować kilka stylów CSS. Zapoznanie się z tą lekcją pozwoli na umieszczenie w albumie na stronie rozłożonego wachlarza kart, rozrzuconych opadłych liści lub stylowych zdjęć. Lekcja zawiera przykład realizacji albumu fotograficznego i uwzględnia rozwiązanie dla wszystkich nowoczesnych przeglądarek.
Czy to jest to konieczne
Cztery zdjęcia o szerokości do 450px
Instrukcje
Krok 1
Ten przykład skupi się na tworzeniu stylowej strony albumu z obróconymi zdjęciami.
Przygotowałem wcześniej zdjęcia (szerokość 400px) z adresami:
W przyszłości będziemy przypisywać identyfikatory do zdjęć według ich nazw.
Krok 2
Najpierw przygotujemy blok dla naszego albumu fotograficznego za pomocą tagu div, a także dodamy do niego zdjęcia za pomocą tagu img (każdy obraz musi być ujęty we własnym tagu div), w ten sposób:
Należy pamiętać, że do bloku przydzieliliśmy identyfikator -. Po identyfikatorze możemy odwołać się do bloku za pomocą css.
Krok 3
Następnie musisz ustawić style css na blok. Lista stylów: "pozycja: względna;" - ustawi początek z lewego górnego rogu naszego bloku; "margines: 50px auto;" - ustawi wcięcie naszego bloku "50px" nad i pod pozostałą zawartością strony, a także ustawi automatyczne wcięcie na prawo i lewo, tym samym wyrównując nasz blok do środka; "szerokość: 900px; wysokość: 650px;" - ustawi odpowiednio szerokość na 900px i wysokość na 650px.
Określoną listę stylów należy umieścić w następujący sposób:
#strona_zdjęcia {
pozycja: względna;
margines: 0 auto;
szerokość: 900px;
wysokość: 650px;
wyrównanie tekstu: środek;
}
Zwróć uwagę na użycie "#photo_page" - w ten sposób odnosimy się do identyfikatora bloku.
Krok 4
Teraz przypiszemy ogólne style do każdego obrazu w bloku photo_page. Są to zaokrąglone rogi, szare obramowanie, białe tło, dopełnienie i cień.
Stworzy to efekt fotograficzny:
#photo_page obraz {
promień obramowania: 7px;
obramowanie: 1px jednolity szary;
tło: #ffffff;
wypełnienie: 10px;
box-shadow: 2px 2px 10px # 697898;
}
Zwróć uwagę na użycie „#photo_page img” – będzie to dotyczyć wszystkich obrazów w bloku photo_page
Krok 5
Ważne jest również dodanie krótkiego stylu:
#photo_page div {
pływak: lewy;
}
Zmniejsza wszystkie bloki wewnątrz bloku photo_page po lewej stronie.
Krok 6
Etap pośredni lekcji został zakończony. Jeśli Twoja praca jest podobna do obrazu na zrzucie ekranu, nie popełniłeś błędu i możesz przejść do następnego kroku.
Krok 7
Teraz obracamy zamieszczone zdjęcia. Do tego potrzebujemy stylu transformacji. W tej chwili w czystej postaci nie jest używany, a jedynie z prefiksem dla każdej przeglądarki na początku, np.:
-webkit-transform: obróć (wartość);
-moz-transform: obróć (wartość);
-o-transform: obróć (wartość);
To jest styl rotacji dla przeglądarek: Google Chrome, Mazilla, Opera (odpowiednio). Zamiast słowa "wartość" wstawimy liczbę z stopniem na końcu, tak:
90deg - obróć o 90 stopni zgodnie z ruchem wskazówek zegara.
-5deg - obróć -5 stopni w kierunku przeciwnym do ruchu wskazówek zegara.
Itp.
Krok 8
Styl zdjęcia photo_1:
# zdjęcie_1 {
-webkit-transform: obróć (5deg);
-moz-transform: obróć (5 stopni);
-o-transform: obróć (5 stopni);
}
Pierwszy obraz jest obrócony o 5 stopni.
Krok 9
Styl zdjęcia photo_2:
# zdjęcie_2 {
-transformacja webkit: obróć (-3deg);
-moz-transform: obróć (-3deg);
-o-transform: obróć (-3deg);
}
Drugi obraz jest obrócony o -3 stopnie.
Krok 10
Styl zdjęcia photo_3:
# zdjęcie_3 {
-webkit-transform: obróć (-2deg);
-moz-transform: obróć (-2deg);
-o-transform: obróć (-2deg);
}
Trzeci obraz jest obrócony o -2 stopnie.
Krok 11
Styl zdjęcia photo_4:
# zdjęcie_4 {
-webkit-transform: obróć (8deg);
-moz-transform: obróć (8 stopni);
-o-transform: obróć (8 stopni);
}
Czwarty obraz jest obrócony o 8 stopni.
Krok 12
Zobaczmy, jak możesz poprawić położenie obrazów. Na przykład chcesz przesunąć pierwszy obraz o 20 pikseli od góry i 10 pikseli od lewej. W takim przypadku musisz użyć stylu marginesu. Oto prawidłowy sposób użycia go w naszym przypadku:
# zdjęcie_1 {
margines: 20px -10px -20px 10px;
-webkit-transform: obróć (5deg);
-moz-transform: obróć (5 stopni);
-o-transform: obróć (5 stopni);
}
Należy pamiętać, że pierwszą wartością stylu jest górny margines; drugi to wcięcie z prawej strony; trzeci to wcięcie od dołu; czwarty - wcięcie z lewej.
Ważne: w naszym przypadku dolny margines jest równy ujemnej wartości górnego marginesu. Jeśli widzisz białe miejsce pod obrazem na swojej stronie, spróbuj jeszcze bardziej negatywnie wciąć dół obrazu.
Krok 13
Praca zakończona, dostarczam zrzut ekranu (uwzględniający zmianę wcięcia pierwszego obrazu opisaną w kroku 12).
Dodaj styl wcięcia do dowolnych obrazów, które nie są w stanie Ci odpowiadać.
