CSS jest pełen opcji poprawiających wygląd twoich stron internetowych; najlepszymi przykładami są cienie tekstu i ramek. Dają one podobne wyniki do cieni znalezionych w oprogramowaniu do edycji obrazów, takim jak Photoshop.

Ale jak działają cienie CSS? Zanurzmy się od razu.

Jak korzystać z CSS Box Shadow

Możesz zastosować cień ramki CSS za pomocą pojedynczej linii CSS zawierającej zakres do sześciu wartości. Kolejność wartości ma kluczowe znaczenie dla działania cienia pola CSS i wygląda to tak:

box-shadow: offset-x offset-y rozmycie rozłożone wstawka koloru;

Przyjrzyjmy się kolejno każdej z wartości.

Pozycja cienia pola CSS

Wartości offset-x i offset-y kontrolują położenie cienia ramki. Wartość offset-x reprezentuje poziome położenie cienia, podczas gdy offset-y to pionowe przesunięcie.

 pudełko-cień: 10px 10px;

Wartości dodatnie dają cień poniżej i na prawo od elementu.

Możesz także użyć wartości ujemnych dla przesunięcia h i przesunięcia v:

 box-shadow: -10px -10px;

Ujemne przesunięcie h przesuwa cień w lewo, a ujemne przesunięcie v przesuwa go w górę:

instagram viewer

Rozmycie cieni w polu CSS

Jak widać, dodanie przesunięcia h i przesunięcia v do twojego cienia tworzy solidny cień bez żadnego wtapiania. Wartość rozmycia powoduje rozmycie cienia pola CSS i zaczyna obowiązywać, jeśli podasz trzecią wartość:

pudełko-cień: 10px 10px 20px;

Im wyższa liczba dodana do wartości rozmycia, tym bardziej rozmyty będzie cień ramki CSS. Ta wartość nie może być ujemna.

Rozprzestrzenianie się cieni w polu CSS

Wartość spreadu pozwala na zmianę rozmiaru cienia bez zmiany jego położenia.

 pudełko-cień: 10px 10px 20px 30px;

Dodatnia wartość spreadu spowoduje, że cień ramki CSS będzie większy, a wartość ujemna zmniejszy go.

Kolor cienia pola CSS

Cienie ramki CSS są domyślnie ustawione na kolor tekstu elementu, ale można to zmienić, dodając kolor:

pudełko-cień: 10piks 10piks 20piks 10piks #0000ff;

Używany kolor musi być w formacie zgodnym z CSS, takim jak kod szesnastkowy, kod RGB lub wstępnie zdefiniowany kolor. Możesz dowiedzieć się o kodach szesnastkowych i inne legalne opcje kolorów CSS, zanim zaczniesz korzystać z cieni.

Wstawka cienia pola CSS

Cienie ramek CSS domyślnie wykraczają poza przypisany im element. Dodając wstawkę do właściwości box-shadow, możesz wyświetlić cień po wewnętrznej stronie elementu.

pudełko-cień: 10piks 10piks 20piks 10piks wstawka #0000ff;

To jest predefiniowana wartość tekstowa; po prostu dodaj lub usuń go, aby ustawić wartość.

Jak korzystać z cienia tekstu CSS

Cienie tekstowe CSS przypominają cienie prostokątne, ale mają mniej wartości do modyfikacji. Składnia cienia tekstowego CSS wygląda następująco:

text-shadow: offset-x offset-y blur-radius color;

Ale jak działają te wartości?

Pozycja cienia tekstu CSS

Przesunięcia cienia tekstu CSS działają bardzo podobnie do tych samych wartości cienia ramki:

cień tekstu: 10px 10px;

Wartości dodatnie spowodują umieszczenie cienia poniżej i po prawej stronie tekstu.

Wartości ujemne działają odwrotnie, umieszczając cień nad i po lewej stronie tekstu.

 cień tekstu: -10px -10px;

Możesz mieszać wartości ujemne i dodatnie, aby idealnie ustawić cień tekstu CSS.

Promień rozmycia cienia tekstu CSS

Promień rozmycia cienia tekstu CSS umożliwia rozmycie cienia za tekstem.

cień tekstu: 10px 10px 10px;

Wartość domyślna dla tej wartości to 0 (brak rozmycia).

Kolor cienia tekstu CSS

Domyślnie cienie tekstu CSS odpowiadają kolorowi tekstu. Możesz zmienić kolor tekstu, dodając go na końcu właściwości cienia tekstu CSS.

cień tekstu: 10piks 10piks 10piks #0000ff;

Podobnie jak kolory cieni w CSS, musisz użyć do tego legalnego koloru CSS.

Przykłady CSS Box i Text Shadow Design

Po zapoznaniu się z podstawami możesz zacząć eksperymentować z używaniem ramek CSS i cieni tekstu. Poniższe pomysły powinny zainspirować Cię do wymyślenia własnych kreatywnych sposobów wykorzystania tych właściwości CSS.

Dwukolorowe obramowania z dwoma cieniami CSS Box

Do elementu HTML można dodać więcej niż jeden cień ramki lub cień tekstu. Tak długo, jak między nimi znajdują się przecinki, możesz dodawać nowe cienie do pojedynczej właściwości.

pudełko-cień: 30piks 30piks#0000ff, -30px-30px 0piks#00ff00;

Ta dwukolorowa ramka jest tego dobrym przykładem. Dwa cienie prostokątne CSS z przeciwstawnymi pozycjami i bez rozmycia/rozprzestrzeniania tworzą doskonałe kreatywne obramowanie.

Podwójne cienie tekstu CSS dla dramatycznego efektu

Podobnie jak w przypadku powyższego pomysłu, możesz dodawać i ustawiać wiele cieni tekstu, aby uzyskać interesujące rezultaty.

cień tekstu: 35px 20px 4px ciemnoszary, -35px -20px 4px ciemnoszary;

Ten przykład pokazuje wiersz tekstu z cieniem powyżej i cieniem poniżej, z których oba mają wartości koloru oparte na tekście.

Wielokolorowe tła z wstawionymi cieniami pola CSS

CSS jest wystarczająco potężny, aby tworzyć unikalne i interesujące zasoby bez żadnych zewnętrznych plików. Doskonałym tego przykładem jest użycie wstawionego cienia ramki CSS jako tła.

pudełko-cień: 20piks 10piks 10piks 40piks #000000 wstawka, -50px -30px 8px 60px szara wstawka, 30px 20px 6px 90px jasnoszara wstawka;

To pudełko ma białe tło wraz z trzema wstawkami cieni w różnych kolorach. Cienie nakładają się na siebie, tworząc niepowtarzalne tło.

Dalsze wzmacnianie tego efektu jest prostą sprawą dodanie stylowego gradientu tła CSS do swojego żywiołu.

Cienie CSS Box i cienie tekstowe do kreatywnego projektowania stron internetowych

Pole CSS i cienie tekstowe są łatwe w użyciu, jeśli wiesz, jak z nimi pracować. Masz teraz narzędzia potrzebne do rozpoczęcia pracy nad własnymi projektami, ale powinieneś nadal badać CSS, aby poprawić swoje umiejętności.