Wstawianie grafiki w HTML-u

Stronę tą wyświetlono już: 57533 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:

Listing 1
  1. <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:

Listing 2
  1. 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:

Listing 3
  1. <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

Listing 4
  1. img{
  2. display: block;
  3. margin: auto;
  4. width: 50%;
  5. height: 50%;
  6. border-radius: 10px; /* ten styl jest odpowiedzialny za zaokrąglenie promieniem 10px */
  7. }

Wynik działania powyższego zestawu styli:

panorama

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

Listing 5
  1. img{
  2. display: block;
  3. margin: auto;
  4. width: 50%;
  5. height: 50%;
  6. border-radius: 50%; /* ten styl jest odpowiedzialny za zaokrąglenie promieniu responsywnym 50% */
  7. }

Wynik działania powyższego zestawu styli:

panorama

Dodanie ramki obrazka

Listing 6
  1. img{
  2. display: block;
  3. margin: auto;
  4. width: 50%;
  5. height: 50%;
  6. border: 1px solid #aaaaaa;
  7. padding: 5px;
  8. border-radius: 50%; /* ten styl jest odpowiedzialny za zaokrąglenie promieniu responsywnym 50% */
  9. }

Wynik działania powyższego zestawu styli:

panorama

Dodanie cienia ramki obrazka

Listing 7
  1. img{
  2. display: block;
  3. margin: auto;
  4. width: 50%;
  5. height: 50%;
  6. border: 1px solid #aaaaaa;
  7. padding: 5px;
  8. border-radius: 50%; /* ten styl jest odpowiedzialny za zaokrąglenie promieniu responsywnym 50% */
  9. 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ść) */
  10. }

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:

Listing 8
  1. <style>
  2. img.gray
  3. {
  4. -webkit-filter: grayscale(100%); /* filtr grayscale dla Safari 6.0 - 9.0 */
  5. filter: grayscale(100%); /* filtr grayscale dla reszty przeglądarek */
  6. transition-property: filter; /* ustawienie, dla jakich elementów będzie wykonywana animacja przejścia */
  7. transition-duration: 1s; /* czas animacji */
  8. transition-timing-function: linear; /* sposób realizacji animacji - liniowy */
  9. }
  10. img.gray:hover /* zdarzenie najechania kursora myszy na znacznik img z atrybutem class = "gray" */
  11. {
  12. -webkit-filter: grayscale(0%); /* docelowa wartość animacji dla filtra gray (Safari 6.0 - 9.0) */
  13. filter: grayscale(0%); /* docelowa wartość animacji dla filtra gray */
  14. }
  15. </style>
  16. <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:

    Listing 9
    1. img
    2. {
    3. -webkit-filter: blur(10px); /* Safari 6.0 - 9.0 */
    4. filter: blur(10px);
    5. }

    Efekt:

    panorama

  • filtr rozjaśnienia brightness:

    Listing 10
    1. img
    2. {
    3. -webkit-filter: brightness(200%); /* Safari 6.0 - 9.0 */
    4. filter: brightness(200%);
    5. }

    Efekt:

    panorama

  • filtr kontrastu contrast:

    Listing 11
    1. img
    2. {
    3. -webkit-filter: contrast(200%); /* Safari 6.0 - 9.0 */
    4. filter: contrast(200%);
    5. }

    Efekt:

    panorama

  • filtr obrotu odcieni kolorów hue-rotate:

    Listing 12
    1. img
    2. {
    3. -webkit-filter: hue-rotate(180deg); /* Safari 6.0 - 9.0 */
    4. filter: hue-rotate(180deg);
    5. }

    Efekt:

    panorama

  • filtr odwrócenia kolorów invert:

    Listing 13
    1. img
    2. {
    3. -webkit-filter: invert(100%); /* Safari 6.0 - 9.0 */
    4. filter: invert(100%);
    5. }

    Efekt:

    panorama

  • filtr przezroczystości opacity:

    Listing 14
    1. img
    2. {
    3. -webkit-filter: opacity(50%); /* Safari 6.0 - 9.0 */
    4. filter: opacity(50%);
    5. }

    Efekt:

    panorama

  • filtr saturacji saturate:

    Listing 15
    1. img
    2. {
    3. -webkit-filter: saturate(50%); /* Safari 6.0 - 9.0 */
    4. filter: saturate(50%);
    5. }

    Efekt:

    panorama

  • filtr sepii sepia:

    Listing 16
    1. img
    2. {
    3. -webkit-filter: sepia(100%); /* Safari 6.0 - 9.0 */
    4. filter: sepia(100%);
    5. }

    Efekt:

    panorama
Tematy powiązane
Propozycje książek
tytuł: Tablice informatyczne. HTML 5. Wydanie II autor: Radosław Sokół

Tytuł:

Tablice informatyczne. HTML 5. Wydanie II

Autor:

Radosław Sokół

tytuł: HTML i CSS. Zaprojektuj i zbuduj witrynę WWW. Podręcznik Front-End Developera autor: Jon Duckett

Tytuł:

HTML i CSS. Zaprojektuj i zbuduj witrynę WWW. Podręcznik Front-End Developera

Autor:

Jon Duckett

Komentarze