Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

Odwrócenie kolorów obrazu na wydruku

piątek,

Odwrócenie kolorów obrazu na wydruku

Filtry graficzne CSS dają duże możliwości modyfikowania wyglądu elementów. Można to wykorzystać w wersji dokumentu do wydruku. Jako przykład posłuży prosta strona internetowa składająca się z obrazu i jednego akapitu. Plik graficzny ckziu.jpg składa się z czarnego tła i białych konturów budynku.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CKZiU Mrągowo</title>
</head>
<body>
  <img class="print" src="ckziu.jpg" alt="Budynek CKZiU">
  <p>Szkoła wielkich możliwości</p>
</body>
</html>

Wygląd strony

Poniżej zamieszczono style CSS dołączone do przykładowej strony. Dodano w nich deklaracje stosowane na wydruku polegające na zamianie kolorów czarnego i białego. Zamierzony efekt to uzyskanie na wydruku tzw. negatywu.

body{
  background: #000;
  text-align: center;
  padding-top:40px;
}

p{
  color: #fff;
  font:30px sans-serif;
  text-transform: uppercase;
}


@media print {
  * {
    background: #fff !important;
    color: #000 !important;
 }
}

Wydruk nie wygląda źle, jednak aby uzyskać zamierzony efekt, należy jeszcze zmodyfikować kolory obrazu.

Wygląd domyślnego wydruku

Do odwrócenia kolorów na obrazie posłużył jeden z dostępnych w CSS filtrów graficznych. Filtr invert służy do odwracania kolorów, wartość 100% daje w efekcie negatyw. Poniższą deklarację zamieszczono oczywiście w sekcji @media print.

.print {
  filter: invert(100%);
}

Po zastosowaniu filtru wydruk wygląda zgodnie z planem.

Wygląd zmodyfikowanego wydruku

Przykładowa strona składa się tylko z dwóch barw. W tym przypadku filtr invert może obsłużyć wszystkie elementy dokumentu.

@media print {
  * {
    filter: invert(100%);
  }
}

Inne filtry graficzne CSS, które mogą być przydatne w modyfikacjach pod kątem wydruku:

  • brightness() – jasność kolorów, wartość w procentach;
  • contrast() – kontrast, wartość w procentach;
  • grayscale() – skala szarości, wartość w procentach;
  • hue-rotate() – obracanie kołem barw, wartość w stopniach od 0deg do 360deg.

Filtry można z sobą łączyć, dodając kolejne po spacjach.

.print {
  filter: invert(100%) contrast(160%);
}
Artykuł: Microsoft PixelSense

Microsoft PixelSense

Artykuł: Mac OS X Server

Mac OS X Server

Artykuł: Procesor Intel Celeron

Procesor Intel Celeron

Artykuł: Harmonogram egzaminów maturalnych

Harmonogram egzaminów maturalnych

Artykuł: Rocznica biblioteki GTK+

Rocznica biblioteki GTK+

Artykuł: Profesor Karol Estreicher

Profesor Karol Estreicher

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły