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.
img {
image-rendering: pixelated;
}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.
img.contain {
width: 200px;
height: 150px;
outline: 1px solid red;
object-fit: contain;
}
img.fill {
width: 200px;
height: 150px;
outline: 1px solid red;
object-fit: fill;
}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.
img {
width: 300px;
height: 300px;
outline: 1px solid red;
object-fit: none;
object-position: 30px 30px;
}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:
img {
display: block;
margin: auto;
}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.:
img {
display: block;
margin-inline: auto;
}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.
img {
max-width: 100%;
height: auto;
}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.:
img {
box-shadow: 10px 10px 8px #ccc;
}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:
img {
box-shadow: 10px 10px 8px #ccc;
opacity: 0.4;
}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.:
img {
border-radius: 50px;
}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%:
img {
border-radius: 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.:
img {
display: block;
margin: 25px 15px 25px 0;
float: left;
}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.