Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 77431 razy

Wstawianie grafiki za pomocą znacznika <img src/>

Znacznik ten zawsze jest stosowany z atrybutem src, którym jest adres do grafiki, która ma być wstawiona na stronie. Możliwe jest również ustawienie następujących atrybutów tego znacznika:

  • alt - tekst alternatywny, który zostanie wyświetlony jeżeli obraz będzie niedostępny. Zaleca się korzystanie z tego znacznika, jako opisu grafiki na stronie dla przeglądarek internetowych, które lubują się w ich czytaniu;
  • width - określa szerokość obrazka (nie zalecane jest jego używanie, lepiej jest wstawiać grafikę o żądanych wymiarach na stronie);
  • height - określa wysokość obrazka (nie zalecane jest jego używanie, lepiej jest wstawiać grafikę o żądanych wymiarach na stronie);

Przykład wstawienia grafiki na stronie:

<img src="rysunki/Panorama.jpg" alt="panorama" style="display: block; margin: auto"/>

Wynik działania powyższego kodu:

panorama

W powyższym przykładzie obrazek został wyśrodkowany za pomocą dwóch stylów:

display:block;margin: auto

Atrybutów width i height warto używać do responsywnego dostosowania szerokości obrazka do strony. Oto przykład z wykorzystaniem zamiast wcześniej wymienionych atrybutów, atrybutu style z odpowiednimi stylami CSS:

<img src="rysunki/Panorama.jpg" alt="panorama" style="width: 100%;height: 345px"/>

Wynik działania powyższego kodu:

panorama

Przydatne style CSS

Zaokrąglenie narożników pliku graficznego

img{ display: block; margin: auto; width: 50%; height: 50%; border-radius: 10px; /* ten styl jest odpowiedzialny za zaokrąglenie promieniem 10px */ }

Wynik działania powyższego zestawu styli:

panorama

Można też ustawić zaokrąglenie tak, że obrazek będzie wyglądał jak elipsa:

img{ display: block; margin: auto; width: 50%; height: 50%; border-radius: 50%; /* ten styl jest odpowiedzialny za zaokrąglenie promieniu responsywnym 50% */ }

Wynik działania powyższego zestawu styli:

panorama

Dodanie ramki obrazka

img{ display: block; margin: auto; width: 50%; height: 50%; border: 1px solid #aaaaaa; padding: 5px; border-radius: 50%; /* ten styl jest odpowiedzialny za zaokrąglenie promieniu responsywnym 50% */ }

Wynik działania powyższego zestawu styli:

panorama

Dodanie cienia ramki obrazka

img{ display: block; margin: auto; width: 50%; height: 50%; border: 1px solid #aaaaaa; padding: 5px; border-radius: 50%; /* ten styl jest odpowiedzialny za zaokrąglenie promieniu responsywnym 50% */ box-shadow: 0 0 10px 10px rgba(200, 200, 200, 0.5); /* przesunięcie pionowe cienia [px]; przesunięcie poziome cienia [px]; promień rozmycia [px]; promień rozszerzenia cienia [px] rgba( czerwony, zielony, niebieski, przezroczystość) */ }

Wynik działania powyższego zestawu styli:

panorama

Animacja przejścia z wykorzystaniem filtru graficznego

Poniższy kod sprawi, że grafika będzie wyświetlana jako czarno-biała, a po najechaniu kursorem myszy zacznie się jedno sekundowe przejście od czarno-białego do w pełni kolorowego obrazu:

<style> img.gray { -webkit-filter: grayscale(100%); /* filtr grayscale dla Safari 6.0 - 9.0 */ filter: grayscale(100%); /* filtr grayscale dla reszty przeglądarek */ transition-property: filter; /* ustawienie, dla jakich elementów będzie wykonywana animacja przejścia */ transition-duration: 1s; /* czas animacji */ transition-timing-function: linear; /* sposób realizacji animacji - liniowy */ } img.gray:hover /* zdarzenie najechania kursora myszy na znacznik img z atrybutem class = "gray" */ { -webkit-filter: grayscale(0%); /* docelowa wartość animacji dla filtra gray (Safari 6.0 - 9.0) */ filter: grayscale(0%); /* docelowa wartość animacji dla filtra gray */ } </style> <img class="gray" src="rysunki/Panorama.jpg" alt="panorama" style="display:block;margin: auto; width: 50%;height: 50%; border: 1px solid #aaaaaa;border-radius: 50%;padding: 5px;box-shadow: 0 0 10px 10px rgba(200, 200, 200, 0.5);"/>

Efekt działania powyższego kodu:

panorama

Istnieją też inne filtry graficzne:

  • filtr rozmycia blur:

    img { -webkit-filter: blur(10px); /* Safari 6.0 - 9.0 */ filter: blur(10px); }

    Efekt:

    panorama

  • filtr rozjaśnienia brightness:

    img { -webkit-filter: brightness(200%); /* Safari 6.0 - 9.0 */ filter: brightness(200%); }

    Efekt:

    panorama

  • filtr kontrastu contrast:

    img { -webkit-filter: contrast(200%); /* Safari 6.0 - 9.0 */ filter: contrast(200%); }

    Efekt:

    panorama

  • filtr obrotu odcieni kolorów hue-rotate:

    img { -webkit-filter: hue-rotate(180deg); /* Safari 6.0 - 9.0 */ filter: hue-rotate(180deg); }

    Efekt:

    panorama

  • filtr odwrócenia kolorów invert:

    img { -webkit-filter: invert(100%); /* Safari 6.0 - 9.0 */ filter: invert(100%); }

    Efekt:

    panorama

  • filtr przezroczystości opacity:

    img { -webkit-filter: opacity(50%); /* Safari 6.0 - 9.0 */ filter: opacity(50%); }

    Efekt:

    panorama

  • filtr saturacji saturate:

    img { -webkit-filter: saturate(50%); /* Safari 6.0 - 9.0 */ filter: saturate(50%); }

    Efekt:

    panorama

  • filtr sepii sepia:

    img { -webkit-filter: sepia(100%); /* Safari 6.0 - 9.0 */ filter: sepia(100%); }

    Efekt:

    panorama
Tematy powiązane
Layout wykonany przez autora strony, wszelkie prawa zastrzeżone. Jakiekolwiek użycie części lub całości grafik znajdujących się na tej stronie bez pisemnej zgody jej autora surowo zabronione.