Projektanci stron internetowych od dawna pragnęli większej kontroli nad stronami, które tworzyli, gdy CSS3 zaatakował scenę. Nowe style wprowadzone w CSS3 dały profesjonalistom internetowym możliwość dodawania efektów podobnych do Photoshopa na swoich stronach. Obejmuje to takie cechy, jak cienie i poświaty, zaokrąglone rogi i wiele innych. CSS3 wprowadził również animacyjne efekty, które można wykorzystać do stworzenia fajnej interaktywności na stronach.
Jednym z bardzo ładnych efektów wizualnych, które można dodać do elementów na swojej stronie internetowej przy użyciu CSS3, jest sprawianie, aby były one blakłowane i wyeksponowane za pomocą kombinacji właściwości krycia i przejścia. Jest to łatwy i dobrze obsługiwany sposób, aby strony były bardziej interaktywne, tworząc wyblakłe obszary, które koncentrują się, gdy użytkownik witryny coś robi, np. Najeżdżając na ten element.
Rzućmy okiem na łatwość dodawania tego interaktywnego efektu wizualnego do różnych elementów na twoich stronach internetowych.
Zmień krycie po najechaniu myszą
Zaczniemy od sprawdzenia, jak zmienić krycie obrazu, gdy klient unosi się nad tym elementem. W tym przykładzie (HTML jest pokazany poniżej) używamy obrazu z atrybutem klasy
greydout.
Aby było szare, dodamy następujące reguły stylu do naszego arkusza stylów CSS: .greydout {-webkit-nieprzezroczystość: 0,25;-moz-nieprzezroczystość: 0,25;nieprzezroczystość: 0,25;}
Te ustawienia krycia tłumaczą się na 25%. Oznacza to, że obraz będzie wyświetlany jako 1/4 normalnej przezroczystości. W pełni nieprzezroczyste bez przezroczystości będzie 100%, a 0% będzie całkowicie przezroczyste. Następnie, aby obraz był wyraźny (lub dokładniej, aby stał się całkowicie nieprzezroczysty) po obróceniu myszy nad nim, należy dodać :wahać siępseudo-klasa: .greydout: hover {-webkit-nieprzezroczystość: 1;-moz-nieprzezroczystość: 1;nieprzezroczystość: 1;}
Zauważysz, że dla tych przykładów używamy fabrycznie ustawionych wersji reguły, aby zapewnić kompatybilność wsteczną dla starszych wersji tych przeglądarek. Chociaż jest to dobra praktyka, rzeczywistość jest taka, że zasada nieprzejrzystości jest teraz dobrze obsługiwana przez przeglądarki i całkiem bezpiecznie jest upuścić te prefixowane linie. Mimo to nie ma powodu, aby nie dołączać tych prefiksów, jeśli chcesz zapewnić obsługę starszych wersji przeglądarek. Po prostu pamiętaj, aby przestrzegać przyjętej najlepszej praktyki kończenia deklaracji normalną, nieprefiksowaną wersją stylu. Jeśli wdrożyłeś to na stronie, zobaczysz, że to dopasowanie nieprzezroczystości jest bardzo gwałtowną zmianą. Po pierwsze, jest szara, a potem nie jest, bez pośrednich stanów między tymi dwoma. To jest jak włącznik światła - włączony lub wyłączony. To może być to, czego chcesz, ale możesz też eksperymentować ze zmianą, która jest bardziej stopniowa. Aby dodać naprawdę fajny efekt i sprawić, że stopniowo zaniknie, chcesz dodać przejście
własność do .greydoutclass: .greydout {-webkit-nieprzezroczystość: 0,25;-moz-nieprzezroczystość: 0,25;nieprzezroczystość: 0,25;-webkit-transition: wszystkie 3s ułatwiają;-moz-transition: wszystkie 3s ułatwiają;-ms-transition: wszystkie 3s ułatwiają;-o-transition: wszystkie 3s łatwość;przejście: wszystkie 3s łatwość;}
