Wstaw CSS Box Shadow — gotowy kod
Twórz wizualnie kod CSS typu box-shadow: suwaki do przesunięcia, rozmycia, rozłożenia, koloru z kryciem, trybu wstawiania i do czterech warstw z podglądem na żywo.
Wynik
Ta strona otwiera generator cienia pudełkowego z już zaznaczonym polem wyboru, więc cień jest rysowany wewnątrz elementu, a nie za nim. Karta podglądu od razu pokazuje efekt zapadnięcia, a każdy suwak na bieżąco aktualizuje linię CSS.
Wstawiane cienie to sposób, w jaki CSS udaje głębię wchodząc do środka: stany naciśniętych przycisków, pola wyszukiwania i pola wejściowe, doliny pasków postępu i wygrawerowane panele – wszystko to opiera się na nich. Ponieważ cień przylega do wewnętrznej krawędzi, rozmycie i rozmycie zachowują się nieco inaczej niż w przypadku zwykłego cienia — suwaki pozwalają natychmiast poczuć tę różnicę.
Kiedy zapadnięty wygląd będzie odpowiedni, skopiuj linię cienia do arkusza stylów. Możesz także połączyć warstwę wstawki ze zwykłymi warstwami zewnętrznymi — dodaj drugą warstwę i odznacz na niej wstawkę, aby zmieszać obie w jednej deklaracji.