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

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 dowolnej innej formie nośnika. CSS zapewnia pełną moc dostosowywania do stylizacji strony internetowej we własnym obrazie.





Za pomocą CSS możesz zmienić kolor tła, styl czcionki, kolor czcionki, cień pola, margines i wiele innych właściwości elementu. W tym przewodniku przeprowadzimy Cię przez kilka skutecznych zastosowań box-shadow.



Co to jest cień CSS?

ten cień pudełka Właściwość służy do nakładania cienia na elementy HTML. Jest to jedna z najczęściej używanych właściwości CSS do stylizacji pól lub obrazów.





Składnia CSS:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  1. przesunięcie w poziomie: Jeśli przesunięcie w poziomie jest dodatnie, cień będzie znajdował się po prawej stronie pudełka. A jeśli przesunięcie w poziomie jest ujemne, cień będzie po lewej stronie pudełka.
  2. przesunięcie pionowe: Jeśli przesunięcie w pionie jest dodatnie, cień będzie pod prostokątem. A jeśli przesunięcie w pionie jest ujemne, cień znajdzie się nad pudełkiem.
  3. promień rozmycia: Im wyższa wartość, tym bardziej rozmyty będzie cień.
  4. promień rozsiewu: Wskazuje, jak bardzo cień powinien się rozprzestrzeniać. Wartości dodatnie zwiększają rozproszenie cienia, wartości ujemne zmniejszają rozrzut.
  5. Kolor: Oznacza kolor cienia. Obsługuje również dowolny format kolorów, taki jak rgba, hex lub hsla.

Parametry rozmycia, rozproszenia 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ą ilość razy. Można to wykorzystać do tworzenia wielu obramowań i cieni na elementach.



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

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

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

Wyjście:



2. Dodaj cień Dim box-shadow do wszystkich stron

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



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

Wyjście:

3. Dodaj cienki cień do pudełka na dole i po prawej stronie

Możesz dodać cienie do dolnej i prawej strony pola, używając następującego kodu CSS box-shadow z docelowym elementem HTML:

jak znaleźć historię domu
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Wyjście:

4. Dodaj ciemny cień do wszystkich stron

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

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

Wyjście:

5. Dodaj cień do wszystkich stron

Możesz dodać rozłożony cień do wszystkich boków pola, 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;

Wyjście:

6. Dodaj cienki cień obramowania ze wszystkich stron

Możesz dodać prosty cień obramowania do wszystkich boków pola, 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 inset;

Wyjście:

7. Dodaj cień w kształcie pudełka do dolnej i lewej strony

Możesz dodać cień do dolnej i lewej strony pola, używając następującego kodu CSS box-shadow z docelowym elementem HTML:

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

Wyjście:

8. Dodaj przyciemniony cień do górnej i lewej strony, ciemny cień do dolnej i prawej strony

Możesz dodać jasny cień do górnej i lewej strony pudełka, a także ciemny cień do dolnej i prawej strony pudełka, 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;

Wyjście:

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

Możesz dodać prosty kolorowy cień obramowania do wszystkich boków pola, używając następującego kodu CSS cieniowania z docelowym elementem HTML:

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

Wyjście:

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

Możesz dodać wiele kolorowych cieni obramowania do dolnej i lewej strony 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 inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

Wyjście:

jak zresetować hasło do iPhone'a 7?

11. Dodaj wiele kolorowych cieni obramowania na dole

Możesz dodać wiele kolorowych cieni obramowania na dole pola, używając następującego kodu CSS cieniowania 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;

Wyjście:

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

Możesz dodać wiele kolorowych cieni obramowania do dolnej i prawej strony 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;

Wyjście:

13. Dodaj jasne cienie po lewej i prawej stronie, rozłóż cień na dole

Możesz dodać jasne cienie po lewej i prawej stronie oraz rozciągnąć cień na spód pola, używając następującego CSS 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;

Wyjście:

Zintegruj CSS ze stroną HTML

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

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

Możesz osadzić go na samej stronie HTML lub dołączyć jako osobny dokument. Istnieją trzy sposoby dołączania CSS do dokumentu HTML:

Wewnętrzny CSS

Osadzone lub wewnętrzne arkusze stylów są wstawiane w obrębie sekcji dokumentu HTML przy użyciu element. Możesz stworzyć dowolną liczbę elementy w dokumencie HTML, ale muszą być ujęte między oraz Tagi. Oto przykład pokazujący, jak używać wewnętrznego CSS w dokumencie HTML:





CSS box-shadow

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}




Style 4





Wbudowany CSS

Wbudowany CSS służy do dodawania unikalnych reguł stylu do elementu HTML. Może być używany z elementem HTML poprzez styl atrybut. Atrybut style zawiera właściwości CSS w postaci 'wartość nieruchomości' oddzielone średnikiem ( ; ).

Powiązane: Dowiedz się, jak tworzyć dwuwymiarowe witryny internetowe za pomocą siatki CSS

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





CSS box-shadow



Style 4





Zewnętrzny CSS

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

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

.heading {
text-align: center;
}
.image-box {
display: block;
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 wewnątrz tego dokumentu:

czy możesz dostać Google na Roku?




CSS box-shadow




Style 4





Zauważ, że plik CSS jest połączony z dokumentem HTML przez tag i href atrybut.

Wszystkie powyższe trzy metody (wewnętrzny CSS, wbudowany CSS i zewnętrzny CSS) wyświetlą te same dane wyjściowe-

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

Używając CSS masz pełną kontrolę nad stylem swojej strony. Możesz dostosować każdy element HTML za pomocą różnych właściwości CSS. Deweloperzy z całego świata przyczyniają się do aktualizacji CSS i robią to od czasu jego 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 zdobyć doskonałą praktykę, zaczynając od kilku prostych poleceń i sprawdzając, dokąd zaprowadzi Cię Twoja kreatywność.

Udział Udział Ćwierkać E-mail 10 prostych przykładów kodu CSS, których możesz się nauczyć w 10 minut

Potrzebujesz pomocy z CSS? Wypróbuj te podstawowe przykłady kodu CSS na początek, a następnie zastosuj je na swoich stronach internetowych.

Czytaj dalej Powiązane tematy
  • Programowanie
  • Projektowanie stron
  • CSS
O autorze Yuvraj Chandra(60 opublikowanych artykułów)

Yuvraj jest studentem informatyki na Uniwersytecie w Delhi w Indiach. Jest pasjonatem Full Stack Web Development. Kiedy nie pisze, bada głębię różnych technologii.

Więcej od Yuvraja Chandra

Zapisz się do naszego newslettera

Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!

Kliknij tutaj, aby zasubskrybować