nowe style wprowadzone w CSS3 dała profesjonalistom internetowym możliwość dodawania do swoich stron efektów podobnych do Photoshopa. Jeden efekt wizualny, który możesz dodać za pomocą CSS3 jest sprawienie, by strony internetowe stały się interaktywne poprzez tworzenie wyblakłych obszarów, które stają się widoczne, gdy odwiedzający witrynę robi coś, na przykład najeżdża kursorem na ten element. Ten efekt wykorzystuje kombinację nieprzezroczystość i przejście.
Zmień krycie po najechaniu kursorem
Jednym z elementów interaktywnych jest zmiana przezroczystości obrazu, gdy klient najedzie na ten element. W tym przykładzie (HTML pokazano poniżej) używamy obrazka z atrybutem class of szaroskóry!.
Aby było wyszarzone, dodaj następujące reguły stylów do arkusza stylów CSS:
.greydout {
-przezroczystość webkitu: 0,25;
-moz-opacity: 0,25;
krycie: 0,25;
}
Te ustawienia krycia przekładają się na 25 procent. Oznacza to, że obraz będzie wyświetlany jako 1/4 swojej normalnej przezroczystości. Całkowicie nieprzezroczysty bez przezroczystości byłby 100 procent, podczas gdy 0 procent byłby całkowicie przezroczysty.
Następnie, aby obraz stał się wyraźny (lub dokładniej, aby stał się całkowicie nieprzezroczysty), gdy najedziesz na niego myszą, dodaj następujące elementy:
.greydout: najedź {
-przezroczystość webkitu: 1;
-moz-nieprzezroczystość: 1;
krycie: 1;
}
Więcej korekt nieprzezroczystości
Zauważysz, że w tych przykładach używamy wersji reguły z przedrostkiem dostawcy, aby zapewnić kompatybilność wsteczną dla starszych wersji tych przeglądarek. Chociaż jest to dobra praktyka, reguła przezroczystości jest dobrze obsługiwana przez przeglądarkii można bezpiecznie usunąć te wiersze z przedrostkiem dostawcy.
Mimo to nie ma powodu, aby nie uwzględniać tych prefiksów, jeśli chcesz zapewnić obsługę starszych wersji przeglądarek. Tylko pamiętaj, aby postępować zgodnie z przyjętą najlepszą praktyką kończenia deklaracji normalną, bez prefiksu wersją stylu.
Po wdrożeniu w lokacji to dostosowanie przezroczystości jest nagłą zmianą. Po pierwsze jest szary, a potem nie, bez stanów przejściowych między tymi dwoma. To jest jak włącznik światła – włączanie i wyłączanie. Może tego chcesz, ale możesz też poeksperymentować ze zmianą, która jest bardziej stopniowa.
Aby dodać ładny efekt i stopniowo zanikać, dodaj gradual przejście własność:
.greydout
klasa:.greydout {
-przezroczystość webkitu: 0,25;
-moz-opacity: 0,25;
krycie: 0,25;
-przejście na webkit: łatwość wszystkich trójek;
-moz-transition: wszystkie 3s łatwość;
-przejście ms: łatwość wszystkich 3s;
-o-przejście: łatwość wszystkich trójek;
przejście: łatwość wszystkich trójek;
}