Wiele osób korzysta CSS aby dostosować tekst, zmienić czcionkę, kolor, rozmiar i nie tylko. Ale jedną rzeczą, o której wiele osób często zapomina, jest to, że możesz używać CSS również z obrazami.
Zmiana samego obrazu
CSS pozwala dostosować sposób wyświetlania obrazu na stronie. Może to być naprawdę przydatne do utrzymania spójności stron. Ustawiając style na wszystkich obrazach, tworzysz standardowy wygląd swoich obrazów. Niektóre z rzeczy, które możesz zrobić:
- Dodaj ramkę lub kontur wokół obrazów
- Usuń kolorową ramkę wokół połączonych obrazów
- Regulacja szerokości i/lub wysokości obrazów
- Dodaj cień
- Obróć obraz
- Zmień style gdy obraz jest najechany
Nadanie obrazowi obramowania to świetne miejsce na rozpoczęcie. Ale powinieneś wziąć pod uwagę coś więcej niż tylko obramowanie — pomyśl o całej krawędzi obrazu i dostosuj marginesy i wyściółka także. Obraz z cienką czarną ramką wygląda ładnie, ale dodanie wypełnienia między ramką a obrazem może wyglądać jeszcze lepiej.
To dobry pomysł na zawsze łącz obrazy niedekoracyjne
, kiedy możliwe. Ale kiedy to zrobisz, pamiętaj, że większość przeglądarek dodaje kolorowe obramowanie wokół obrazu. Nawet jeśli użyjesz powyższego kodu do zmiany obramowania, link zastąpi to, chyba że usuniesz lub zmienisz również obramowanie linku. Aby to zrobić, użyj reguły podrzędnej CSS, aby usunąć lub zmienić obramowanie wokół połączonych obrazów:Możesz także użyć CSS do zmiany lub ustawienia wysokości i szerokości obrazów. Chociaż nie jest to świetny pomysł, aby używać przeglądarki do dostosowywania rozmiarów obrazów ze względu na prędkość pobierania, są one znacznie lepsze w zmianie rozmiaru obrazów, aby nadal wyglądały dobrze. A dzięki CSS możesz ustawić wszystkie obrazy na standardową szerokość lub wysokość, a nawet ustawić wymiary względem kontenera.
Pamiętaj, że gdy zmieniasz rozmiar obrazów, aby uzyskać najlepsze wyniki, powinieneś zmienić rozmiar tylko jednego wymiaru — wysokości lub szerokości. Zapewni to, że obraz zachowa proporcje, a więc nie będzie wyglądał dziwnie. Ustaw drugą wartość na automatyczny lub pomiń, aby poinformować przeglądarkę, aby zachowała spójne proporcje.
CSS3 oferuje rozwiązanie tego problemu dzięki nowym właściwościom dopasowanie obiektu i pozycja-obiektu. Dzięki tym właściwościom będziesz mógł określić dokładną wysokość i szerokość obrazu oraz sposób obsługi proporcji. Może to spowodować powstanie efektów letterbox wokół obrazów lub przycięcia w celu dopasowania obrazu do wymaganego rozmiaru.
Istnieją inne właściwości CSS3, które są dobrze obsługiwane w większości przeglądarek, których możesz używać również do modyfikowania obrazów. Rzeczy takie jak cienie, zaokrąglone rogi i przekształcenia umożliwiające obracanie, pochylanie lub przesuwanie obrazów działają teraz w większości nowoczesnych przeglądarek. Następnie możesz użyć przejść CSS, aby zmienić obrazy po najechaniu kursorem, kliknięciu lub po pewnym czasie.
Używanie obrazów jako tła
CSS ułatwia tworzenie fantazyjnych teł z Twoimi obrazami. Możesz dodaj tła do całej strony lub tylko do konkretnego elementu. Łatwo jest utworzyć obraz tła na stronie za pomocą zdjęcie w tle własność:
Zmienić ciało selektor do określonego elementu na stronie, aby umieścić tło tylko na jednym elemencie.
Kolejną zabawną rzeczą, którą możesz zrobić z obrazami, jest utworzenie obrazu tła, który nie przewija się z resztą strony — jak znak wodny. Po prostu używasz stylu załącznik w tle: naprawiony; wraz z obrazem tła. Inne opcje dla tła obejmują ustawienie ich jako kafelków w poziomie lub w pionie za pomocą powtarzanie tła własność. pisać powtarzanie w tle: powtarzanie-x; aby rozmieścić obraz w poziomie i powtarzanie w tle: powtarzanie-y; do układania płytek w pionie. I możesz ustawić obraz tła za pomocą pozycja w tle własność.
CSS3 dodaje również więcej stylów do tła. Możesz rozciągnąć obrazy, aby dopasować je do dowolnego rozmiaru tła lub ustawić obraz tła tak, aby skalował się z rozmiarem okna. Możesz zmienić pozycję, a następnie przyciąć obraz tła. Ale jedną z najlepszych rzeczy w CSS3 jest to, że możesz teraz nakładać wiele obrazów tła, aby tworzyć jeszcze bardziej skomplikowane efekty.
HTML5 pomaga stylizować obrazy
POSTAĆ element w HTML5 powinien być umieszczony wokół wszelkich obrazów, które mogą występować samodzielnie w dokumencie. Jednym ze sposobów myślenia o tym jest to, że jeśli obraz może pojawić się w dodatku, to powinien być w środku POSTAĆ element. Następnie możesz użyć tego elementu, a FIGCAPTION element, aby dodać style do obrazów.