Choć stosowanie elementów graficznych na stronach internetowych nie jest obowiązkowe, to jednak trudno sobie wyobrazić stronę, która byłaby ich całkowicie pozbawiona. Dzięki nim i odrobinie wyobraźni (ewentualnie wspartym szczyptą talentu graficznego) nawet całkiem nijaki projekt można zamienić w prawdziwe dzieło sztuki.
W CSS istnieje dość pokaźny zasób technik i własności, za pomocą których można kontrolować wygląd i zachowanie grafik na stronach internetowych. Część z nich, jak np. własność image-rendering
, jest przeznaczona specjalnie do pracy z obrazami graficznymi. Jednak większość technik i własności CSS opisanych w tym rozdziale ma szersze zastosowanie. My wykorzystamy je akurat do atrakcyjnego przedstawiania obrazów, ale nic nie stoi na przeszkodzie, aby stosować je w odpowiednich sytuacjach także do innych elementów.
Dodawanie obrazów do strony
Aby móc przetwarzać grafikę na stronie za pomocą CSS, należy ją najpierw dodać do strony. Można to zrobić za pomocą elementu HTML img
lub przy użyciu funkcji CSS, takich jak url()
lub image-set()
.
Jeśli potrzebujesz odświeżenia wiadomości na temat wstawiania obrazów na strony za pomocą elementu img
, przeczytaj rozdział Dodawanie obrazów do stron internetowych w Kursie HTML i CSS.
Jeśli natomiast chcesz przypomnieć sobie metody dodawania obrazów za pośrednictwem arkuszy stylów, przeczytaj poprzedni rozdział tego kursu CSS pt. Grafika w CSS.
Kontrolowanie sposobu renderowania obrazu
Jeśli na stronie umieścimy obraz rastrowy, np. w formacie PNG, i go powiększymy lub zmniejszymy, to zostanie on poddany działaniu specjalnych algorytmów przeglądarki, które nie zawsze muszą być optymalne w danym przypadku.
Jeśli chcesz mieć kontrolę nad tym, jaki algorytm zostanie użyty do powiększenia lub zmniejszenia Twojego obrazu, użyj własności CSS image-rendering
, która przyjmuje wartości auto
, crisp-edges
i pixelated
.
Wartość auto
jest domyślna i oznacza, że wybór algorytmu skalowania pozostawiamy przeglądarce, która zazwyczaj próbuje zapewnić jak najwyższą jakość obrazu.
Czasami jednak algorytm domyślny nie spisuje się najlepiej. Tak może być na przykład w przypadku grafiki pikselowej. Spójrz na poniższą ilustrację. Po obu stronach widać ten sam obraz w takim samym powiększeniu. Jednak po prawej stronie został zastosowany domyślny algorytm skalowania przeglądarki Firefox, a po lewej – ustawienie pixelated
własności image-rendering
. Obraz po lewej stronie jest wyraźniejszy i mniej rozmyty.
Jeśli więc zamierzasz prezentować na swojej stronie tego typu grafiki, to zdecydowanie warto zapamiętać sobie, do czego służy własność image-rendering
. Poniżej znajduje się przykład jej użycia.
Zachowywanie proporcji obrazu
Jeśli chcesz, aby obraz umieszczany przez Ciebie na stronie internetowej zajmował określoną ilość miejsca, a jednocześnie chcesz mieć kontrolę nad jego wyglądem i proporcjami, to możesz użyć własności CSS object-fit
. Za jej pomocą możesz wybrać sposób dopasowania obrazu do pola, w obrębie którego jest renderowany, oraz czy jego współczynnik kształtu ma zostać zachowany, czy nie.
Własność object-fit
przyjmuje następujące wartości: contain
, cover
, fill
, none
, scale-down
. Jeśli na przykład chcesz, aby obraz maksymalnie wypełniał kontener bez zmiany proporcji wymiarów ani przycinania, użyj wartości contain
, a jeśli wolisz, aby obraz w całości wypełniał kontener, godząc się na ewentualną zmianę współczynnika kształtu, użyj wartości fill
. Spójrz na poniższy przykład.
Poniższa ilustracja przedstawia różnicę między wartością contain
i wartością fill
własności object-fit
– efekt zastosowania tej pierwszej widać po lewej stronie, a drugiej – po prawej.
Szczegółowy opis własności object-fit
znajduje się na stronie Własność CSS object-fit.
Pozycjonowanie obrazu w kontenerze
Jeśli chcesz określić rozmiar obszaru zajmowanego przez element obrazu i jednocześnie kontrolować położenie reprezentowanej przez niego grafiki w jego obrębie, nie zmieniając jej naturalnych wymiarów, to możesz posłużyć się kombinacją własności object-fit
i object-position
.
Wyobraź sobie, że masz obraz graficzny, który chcesz umieścić w polu o wymiarach 300 × 200 pikseli i w obrębie tego pola chcesz precyzyjnie określić jego położenie, np. w taki sposób, aby jego lewy górny róg znajdował się w odległości 30 pikseli od lewej krawędzi i 30 pikseli od górnej krawędzi tego pola. Jednocześnie nie chcesz zmieniać naturalnych proporcji wymiarów swojej grafiki.
Dzięki własnościom object-fit i object-position uzyskanie takiego efektu jest bardzo proste. Spójrz na poniższy przykład.
Własność object-fit
ustawiona na none
powoduje, że obraz reprezentowany przez element img
nie zmienia rozmiaru, a własność object-position
określa położenie tego obrazu w obrębie pola tworzonego na stronie przez element img
. Poniżej widać przykładowy efekt działania powyższego kodu.
Szczegółowy opis własności object-position
znajduje się na stronie Własność CSS object-position.
Środkowanie obrazów
Na wielu stronach internetowych ilustracje są wyśrodkowane w obszarze treści. Klasycznym już sposobem osiągnięcia tego efektu jest zastosowanie deklaracji display: block
, aby element img
stał się blokowy, i dodanie deklaracji margin: auto
, która powoduje ustawienie z każdej strony takiej samej szerokości marginesu:
Drobną niedogodnością w tym rozwiązaniu może być to, że własność margin
odnosi się także do marginesów górnego i dolnego. Jeśli komuś to przeszkadza, to może użyć dwóch własności – margin-left
i margin-right
– albo własności logicznej margin-inline
, która odnosi się tylko do marginesów w orientacji śródliniowej, czyli poziomych w przypadku stron w języku polskim, angielskim, włoskim itd., np.:
Responsywne obrazy
Jeśli chcesz, aby umieszczony przez Ciebie na stronie internetowej obraz dostosowywał się rozmiarem do rozmiaru dostępnej przestrzeni przy zachowaniu proporcji wymiarów, to możesz użyć własności max-width
i height
o odpowiednich ustawieniach.
Dzięki takim ustawieniom obraz będzie dostosowywał się do dostępnej przestrzeni przy zachowaniu proporcji kształtu, a jednocześnie nigdy nie przekroczy swoich naturalnych wymiarów.
Powyższa reguła CSS została zastosowana do poniższego obrazu. Zmień rozmiar okna przeglądarki, aby zobaczyć, jak działa.
Dodawanie efektu cienia do obrazów
Jednym z popularnych efektów, które pozwalają w łatwy sposób podnieść atrakcyjność wizualną grafik, są cienienie. Do ich definiowania służy własność CSS box-shadow
, która przyjmuje od dwóch do nawet sześciu wartości, np.:
Ta deklaracja tworzy cień o szerokości 10 pikseli, który jest widoczny z prawej strony i u dołu elementu, ma efekt rozmycia o promieniu 8 pikseli oraz o jest w kolorze szarym (#ccc
). Szczegółowy opis własności box-shadow znajduje się na stronie Własność CSS box-shadow. Natomiast poniżej widać efekt zastosowania powyższej reguły do przykładowego obrazu.
Ustawianie przezroczystości obrazów
W CSS dostępna jest własność opacity
, za pomocą której można zmieniać poziom przezroczystości dowolnych elementów, w tym obrazów. Przyjmuje ona wartość z przedziału od 0
do 1
– 0
oznacza całkowitą przezroczystość, a 1
– jej brak.
Za pomocą własności opacity
możemy na przykład sprawić, że obraz z poprzedniego przykładu będzie wyglądał tak, jak na poniższym zrzucie ekranu.
Do uzyskania powyższego efektu został użyty następujący kod CSS:
Szczegółowe informacje na temat własności opacity
znajdują się na stronie Własność CSS opacity.
Zaokrąglanie rogów obrazów
Kolejnym ciekawym efektem wizualnym, który można zastosować zarówno do obrazów, jak i wszystkich innych elementów HTML, jest zaokrąglenie rogów. Służy do tego własność border-radius
, która przyjmuje od jednej do czterech wartości z jednostką długości. Jeśli podamy tylko jedną wartość, to wszystkie cztery rogi obrazu zostaną zaokrąglone w taki sam sposób według łuku okręgu o promieniu o podanej długości, np.:
Przykładowy efekt zastosowania powyższej reguły:
Szczegółowe informacje na temat własności border-radius
znajdują się na stronie Własność CSS border-radius.
Tworzenie okrągłych obrazów
Za pomocą własności border-radius
można nie tylko zaokrąglać rogi obrazów, ale można też tworzyć okrągłe obrazy, co czasami pozwala uzyskać bardzo ciekawy efekt.
Aby uzyskać okrągły obraz, wystarczy tej własności nadać wartość 50%
:
Poniżej jest pokazany przykładowy efekt zastosowania tej reguły:
Otaczanie obrazów tekstem
Jednym z najpopularniejszych efektów stosowanych do obrazów na stronach internetowych jest otaczanie ich tekstem z lewej lub prawej strony. Do tego celu jest potrzebna własność float
, która między innymi przyjmuje wartości left
i right
.
Jeśli własności float
nadamy wartość left
, to spowoduje ona, że wybrany element będzie „spływał” do lewej krawędzi swojego kontenera, a jeśli nadamy jej wartość right
, to będzie on spływał do prawej krawędzi swojego kontenera.
Definiując tę własność dla obrazu, możemy sprawić, że będzie on przysuwał się do lewej lub prawej krawędzi swojego kontenera, pozostawiając miejsce dla pobliskiego tekstu po przeciwnej stronie, np.:
Oprócz własności float
w regule tej zostały użyte jeszcze dwie inne własności. Własność margin
ustawia marginesy, aby treść otaczająca element była od niego odrobinę odsunięta. Natomiast własność display
o wartości block
zamienia element img
w element blokowy, ponieważ własność float
odnosi się tylko do elementów blokowych.
Poniżej znajduje się przykładowy efekt zastosowania powyższej reguły CSS:
Podsumowanie
Stylizacja obrazów to bardzo szeroki temat, który wykracza daleko poza samą znajomość technologii CSS. Do stworzenia atrakcyjnych wizualnie projektów nie wystarczy tylko znajomość tej czy innej własności, potrzebne są jeszcze kreatywność i wyczucie smaku. Mam nadzieję, że wiadomości zdobyte w tym rozdziale pomogą Ci przynajmniej w tej pierwszej kwestii.