Jak korzystać z CSS box-shadow: 13 sztuczek i przykładów

CSS to język używany przez programistów do stylizowania strony internetowej. Kontroluje sposób wyświetlania elementów HTML na ekranie, na papierze lub w jakimkolwiek innym nośniku. CSS zapewnia pełną możliwość dostosowywania stylu strony internetowej według własnego obrazu.

Możesz zmienić kolor tła elementu, styl czcionki, kolor czcionki, cień pola, margines i wiele innych właściwości za pomocą CSS. W tym przewodniku przedstawimy Ci kilka skutecznych zastosowań cienia pudełkowego.

Co to jest CSS box-shadow?

Plik box-shadow właściwość służy do stosowania cienia do elementów HTML. Jest to jedna z najczęściej używanych właściwości CSS do stylizacji ramek lub obrazów.

Składnia CSS:

box-shadow: [przesunięcie poziome] [przesunięcie pionowe] [promień rozmycia] [opcjonalny promień rozproszenia] [kolor];

1. przesunięcie poziome: Jeśli przesunięcie w poziomie jest dodatnie, cień będzie po prawej stronie prostokąta. A jeśli przesunięcie w poziomie jest ujemne, cień będzie po lewej stronie prostokąta.
instagram viewer
2. przesunięcie pionowe: Jeśli przesunięcie pionowe jest dodatnie, cień będzie poniżej ramki. A jeśli przesunięcie pionowe jest ujemne, cień będzie nad prostokątem.
3. promień rozmycia: Im wyższa wartość, tym bardziej rozmyty będzie cień.
4. promień rozprzestrzeniania: Wskazuje, jak bardzo powinien się rozprzestrzeniać cień. Wartości dodatnie zwiększają rozprzestrzenianie się cienia, wartości ujemne zmniejszają rozprzestrzenianie.
5. Kolor: Oznacza kolor cienia. Obsługuje również dowolny format kolorów, taki jak rgba, hex lub hsla.

Parametry rozmycia, rozłożenia i koloru są opcjonalne. Najbardziej interesującą częścią box-shadow jest to, że możesz użyć przecinka do oddzielenia wartości box-shadow dowolną liczbę razy. Można to wykorzystać do tworzenia wielu obramowań i cieni na elementach.

1. Dodaj cień pola Dim po lewej, prawej i dolnej części pudełka

Możesz dodać bardzo słabe cienie z trzech stron (lewej, prawej i dołu) ramki, używając następującego CSS box-shadow z docelowym elementem HTML:

box-shadow: rgba (149, 157, 165, 0,2) 0px 8px 24px;

Wynik:

2. Dodaj cień pola Dim do wszystkich stron

Możesz dodać jasne cienie ze wszystkich stron pudełka, używając następującego CSS box-shadow z docelowym elementem HTML:

box-shadow: rgba (100, 100, 111, 0,2) 0px 7px 29px 0px;

Wynik:

3. Dodaj cienkie cienie box-shadow do dolnej i prawej strony

Możesz dodać cienie na dole i po prawej stronie pola, używając następującego CSS box-shadow z docelowym elementem HTML:

box-shadow: rgba (0, 0, 0, 0,15) 1,95px 1,95px 2,6px;

Wynik:

4. Dodaj ciemny cień do wszystkich stron

Możesz dodać ciemny cień do wszystkich stron pudełka, używając następującego CSS box-shadow z docelowym elementem HTML:

box-shadow: rgba (0, 0, 0, 0,35) 0px 5px 15px;

Wynik:

5. Dodaj rozłożony cień do wszystkich stron

Możesz dodać cień rozszerzający do wszystkich stron pudełka, używając następującego polecenia z docelowym elementem HTML:

box-shadow: rgba (0, 0, 0, 0,25) 0px 54px 55px, rgba (0, 0, 0, 0,12) 0px -12px 30px, rgba (0, 0, 0, 0,12) 0px 4px 6px, rgba (0, 0, 0, 0,17) 0px 12px 13px, rgba (0, 0, 0, 0,09) 0px -3px 5px;

Wynik:

6. Dodaj cienkie obramowanie do wszystkich stron

Możesz dodać prosty cień obramowania ze wszystkich stron pudełka, używając następującego kodu CSS z docelowym elementem HTML:

box-shadow: rgba (6, 24, 44, 0.4) 0px 0px 0px 2px, rgba (6, 24, 44, 0,65) 0px 4px 6px -1px, rgba (255, 255, 255, 0,08) 0px 1px 0px wstawka;

Wynik:

7. Dodaj cień pola do dolnej i lewej strony

Możesz dodać cień na dole i po lewej stronie pola, używając następującego CSS box-shadow z docelowym elementem HTML:

box-shadow: rgba (0, 0, 0, 0,1) -4px 9px 25px -6px;

Wynik:

8. Dodaj Dim box-shadow do górnej i lewej strony, Dark Shadow do dolnej i prawej strony

Możesz dodać jasny cień do górnej i lewej strony pola, a także ciemny cień do dolnej i prawej strony pola, używając następującego kodu CSS z docelowym elementem HTML:

box-shadow: rgba (136, 165, 191, 0,48) 6px 2px 16px 0px, rgba (255, 255, 255, 0.8) -6px -2px 16px 0px;

Wynik:

9. Dodaj cienki, kolorowy cień obramowania ze wszystkich stron

Możesz dodać prosty kolorowy cień obramowania ze wszystkich stron pudełka, używając następującego CSS box-shadow z docelowym elementem HTML:

box-shadow: rgba (3, 102, 214, 0,3) 0px 0px 0px 3px;

Wynik:

10. Dodaj wiele kolorowych cieni obramowania do dolnej i lewej strony pudełka

Możesz dodać wiele kolorowych cieni obramowania na dole i po lewej stronie pola, używając następującego kodu CSS z docelowym elementem HTML:

box-shadow: rgba (50, 50, 93, 0,25) 0px 30px 60px -12px wstawka, rgba (0, 0, 0, 0,3) 0px 18px 36px -18px wstawka;

Wynik:

11. Dodaj wiele kolorowych cieni obramowania na dole

Możesz dodać wiele kolorowych cieni obramowania na dole pola, używając następującego CSS box-shadow z docelowym elementem HTML:

box-shadow: rgba (240, 46, 170, 0,4) 0px 5px, rgba (240, 46, 170, 0,3) 0px 10px, rgba (240, 46, 170, 0,2) 0px 15px, rgba (240, 46, 170, 0,1) 0px 20px, rgba (240, 46, 170, 0,05) 0px 25px;

Wynik:

12. Dodaj wiele kolorowych cieni obramowania do dolnej i prawej strony pudełka

Możesz dodać wiele kolorowych cieni obramowania na dole i po prawej stronie pola, używając następującego kodu CSS z docelowym elementem HTML:

box-shadow: rgba (240, 46, 170, 0,4) 5px 5px, rgba (240, 46, 170, 0,3) 10px 10px, rgba (240, 46, 170, 0,2) 15px 15px, rgba (240, 46, 170, 0,1) 20px 20px, rgba (240, 46, 170, 0,05) 25px 25px;

Wynik:

13. Dodaj lekkie cienie po lewej i prawej stronie, rozprowadź cień na dole

Możesz dodać lekkie cienie po lewej i prawej stronie oraz rozłożyć cień na dole pola, używając następującego CSS typu box-shadow z docelowym elementem HTML:

box-shadow: rgba (0, 0, 0, 0,09) 0px 2px 1px, rgba (0, 0, 0, 0,09) 0px 4px 2px, rgba (0, 0, 0, 0,09) 0px 8px 4px, rgba (0, 0, 0, 0,09) 0px 16px 8px, rgba (0, 0, 0, 0,09) 0px 32px 16px;

Wynik:

Zintegruj CSS ze stroną HTML

Teraz, gdy wiesz, jak dodawać fajne efekty cienia boxów za pomocą CSS, możesz łatwo zintegrować je z elementami HTML na wiele sposobów.

Związane z: 11 Przydatne narzędzia do sprawdzania, czyszczenia i optymalizacji plików CSS

Możesz osadzić go w samej stronie HTML lub załączyć jako oddzielny dokument. Istnieją trzy sposoby włączenia CSS do dokumentu HTML:

Wewnętrzny CSS

Osadzone lub wewnętrzne arkusze stylów są wstawiane do pliku sekcji dokumentu HTML przy użyciu rozszerzenia element. Możesz utworzyć dowolną liczbę plików elementy w dokumencie HTML, ale muszą być umieszczone między i tagi. Oto przykład pokazujący, jak używać wewnętrznego CSS w dokumencie HTML:

Styl 4

Wbudowany CSS

Wbudowany CSS służy do dodawania unikalnych reguł stylu do elementu HTML. Można go używać z elementem HTML za pośrednictwem rozszerzenia styl atrybut. Atrybut style zawiera właściwości CSS w postaci "wartość nieruchomości" oddzielone średnikiem (;).

Związane z: Dowiedz się, jak budować dwuwymiarowe witryny internetowe z siatką CSS

Wszystkie właściwości CSS muszą znajdować się w jednej linii, tj. Między właściwościami CSS nie powinno być żadnych podziałów linii. Oto przykład pokazujący, jak używać wbudowanego CSS w dokumencie HTML:

Styl 4

Zewnętrzny CSS

Zewnętrzny CSS to najlepszy sposób na zastosowanie stylów do dokumentów HTML. Zewnętrzny arkusz stylów zawiera wszystkie reguły stylów w oddzielnym dokumencie (plik .css), dokument ten jest następnie łączony z dokumentem HTML za pomocą etykietka. Ta metoda jest najlepszą metodą definiowania i stosowania stylów do dokumentów HTML, ponieważ plik HTML, na który ma to wpływ, wymaga minimalnych zmian w znacznikach. Oto przykład pokazujący, jak używać zewnętrznego CSS w dokumencie HTML:

Utwórz nowy plik CSS z rozszerzeniem .css rozbudowa. Teraz dodaj następujący kod CSS do tego pliku:

.heading {
wyrównywanie tekstu: do środka;
}
.image-box {
Blok wyświetlacza;
margin-left: auto;
margin-right: auto;
box-shadow: rgba (0, 0, 0, 0,35) 0px 5px 15px;
}

Na koniec utwórz dokument HTML i dodaj następujący kod do tego dokumentu:

Styl 4

Zwróć uwagę, że plik CSS jest połączony z dokumentem HTML za pośrednictwem tag i href atrybut.

Wszystkie powyższe trzy metody (wewnętrzny CSS, wbudowany CSS i zewnętrzny CSS) spowodują wyświetlenie tego samego wyniku:

Spraw, aby Twoja strona internetowa była elegancka dzięki CSS

Używając CSS, masz pełną kontrolę nad stylem swojej strony internetowej. Możesz dostosować każdy element HTML za pomocą różnych właściwości CSS. Twórcy z całego świata współtworzą aktualizacje CSS i robią to od ich wydania w 1996 roku. W związku z tym początkujący muszą się wiele nauczyć!

Na szczęście CSS jest przyjazny dla początkujących. Możesz uzyskać doskonałą praktykę, zaczynając od kilku prostych poleceń i sprawdzając, dokąd zaprowadzi Cię Twoja kreatywność.

10 prostych przykładów kodu CSS, których możesz się nauczyć w 10 minut

Chcesz dowiedzieć się więcej o używaniu CSS? Wypróbuj na początek te podstawowe przykłady kodu CSS, a następnie zastosuj je na swoich własnych stronach internetowych.

Czytaj dalej

O autorze