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>
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.
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.
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%);
}
