Obrazki

Stylowanie obrazków przy użyciu CSS jest kluczowym aspektem tworzenia atrakcyjnych i responsywnych stron internetowych. Dzięki CSS możemy kontrolować rozmiar, ramkę, filtry, orientację obrazu, a nawet jego rozdzielczość renderowania. W tej lekcji przyjrzymy się różnym właściwościom CSS, które można zastosować do obrazków, oraz przedstawimy przykłady ich użycia.

Przykłady kodu

Poniżej znajduje się kompletny przykład pliku HTML z CSS, ilustrujący użycie różnych właściwości CSS dla obrazków:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stylowanie obrazków w CSS</title>
    <style>
        /* Stylowanie rozmiaru obrazka */
        .image-size {
            width: 200px; /* Szerokość obrazka */
            height: auto; /* Wysokość obrazka - auto zachowuje proporcje */
        }

        /* Stylowanie ramki obrazka */
        .image-border {
            border: 5px solid #000; /* Grubość, styl i kolor ramki */
        }

        /* Stosowanie filtrów do obrazka */
        .image-filter {
            filter: grayscale(100%); /* Przekształcenie obrazka w skale szarości */
        }

        /* Zmiana orientacji obrazka */
        .image-orientation {
            image-orientation: 90deg; /* Obrót obrazka o 90 stopni */
        }

        /* Kontrola rozdzielczości renderowania */
        .image-resolution {
            image-rendering: pixelated; /* Obrazek renderowany jako pikseloza */
        }
    </style>
</head>
<body>
    <h3>Rozmiar obrazka</h3>
    <img src="example.jpg" class="image-size" alt="Przykładowy obrazek">

    <h3>Ramka obrazka</h3>
    <img src="example.jpg" class="image-border" alt="Przykładowy obrazek">

    <h3>Filtry obrazka</h3>
    <img src="example.jpg" class="image-filter" alt="Przykładowy obrazek">

    <h3>Orientacja obrazka</h3>
    <!-- Uwaga: image-orientation może nie działać w niektórych przeglądarkach -->
    <img src="example.jpg" class="image-orientation" alt="Przykładowy obrazek">

    <h3>Rozdzielczość renderowania</h3>
    <img src="example.jpg" class="image-resolution" alt="Przykładowy obrazek">
</body>
</html>

Opis przykładów

  • Rozmiar obrazka: Ustawienie szerokości na 200px i wysokości na auto pozwala zachować proporcje obrazka.
  • Ramka obrazka: Dodanie ramki o grubości 5px, stylu solid i kolorze #000 (czarnym).
  • Filtry obrazka: Zastosowanie filtra grayscale(100%) przekształca obrazek w skale szarości.
  • Orientacja obrazka: Właściwość image-orientation z wartością 90deg obraca obrazek o 90 stopni. Należy zauważyć, że ta właściwość może nie być wspierana przez wszystkie przeglądarki.
  • Rozdzielczość renderowania: Użycie image-rendering: pixelated sprawia, że obrazek jest renderowany w sposób uproszczony, dając efekt pikselozy.

Podsumowanie

Stylowanie obrazków w CSS pozwala na szerokie możliwości modyfikacji wyglądu obrazków na stronach internetowych. Kontrolując rozmiar, ramkę, filtry, orientację i rozdzielczość renderowania obrazków, deweloperzy mogą dostosować wizualne aspekty swoich stron, by lepiej odpowiadały na potrzeby użytkowników i estetyczne założenia projektu. Kluczowe jest eksperymentowanie z różnymi właściwościami i wartościami, aby osiągnąć pożądane efekty, a także testowanie stron na różnych urządzeniach i w przeglądarkach, aby zapewnić ich prawidłowe wyświetlanie.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top