Dodaje cień do elementu. Można zastosować kilka cieni, wskazując ich parametry oddzielone przecinkami; przy stosowaniu cieni pierwszy cień na liście będzie wyższy, ostatni niższy. Jeśli dla elementu zostanie określony promień zaokrąglenia poprzez właściwość border-radius, wówczas cień również będzie miał zaokrąglone rogi. Dodanie cienia zwiększa szerokość elementu, przez co w przeglądarce może pojawić się poziomy pasek przewijania.
Box-shadow: brak |<тень> [,<тень>]*
Gdzie<тень>:
wstawka<сдвиг по x> <сдвиг по y> <размытие> <растяжение> <цвет>
| Opis | Przykład | |
|---|---|---|
| <тип> | Wskazuje typ wartości. | <размер> |
| A i B | Wartości muszą być wyprowadzane w określonej kolejności. | <размер> && <цвет> |
| | B | Wskazuje, że należy wybrać tylko jedną wartość z proponowanych (A lub B). | normalne | kapitaliki |
| || B | Każda wartość może być używana niezależnie lub razem z innymi w dowolnej kolejności. | szerokość || liczyć |
| Grupuje wartości. | [przytnij || przechodzić ] | |
| * | Powtórz zero lub więcej razy. | [,<время>]* |
| + | Powtórz jeden lub więcej razy. | <число>+ |
| ? | Określony typ, słowo lub grupa jest opcjonalna. | wstawka? |
| (A, B) | Powtórz co najmniej A, ale nie więcej niż B razy. | <радиус>{1,4} |
| # | Powtórz jeden lub więcej razy, oddzielając je przecinkami. | <время># |
brak Anuluje dodanie cienia. wstawka Cień jest rysowany wewnątrz elementu.<сдвиг по x>Poziome przesunięcie cienia względem elementu. Wartość dodatnia tego parametru powoduje przesunięcie cienia w prawo, wartość ujemna – w lewo.<сдвиг по y>Pionowe przesunięcie cienia względem elementu. Wartość dodatnia przesuwa cień w dół, wartość ujemna przesuwa go w górę.<размытие>Ustawia promień rozmycia cienia. Im wyższa wartość, tym cień jest bardziej wygładzony, staje się szerszy i jaśniejszy. Jeśli ten parametr nie zostanie określony, wartość domyślna wynosi 0, co sprawi, że cień będzie ostry, a nie rozmazany.<растяжение>Wartość dodatnia rozciąga cień, wartość ujemna, przeciwnie, ściska go. Jeśli ten parametr nie zostanie określony, wartością domyślną jest 0, co spowoduje, że cień będzie miał taki sam rozmiar jak element.<цвет>Kolor cienia w dowolnym dostępnym formacie CSS, domyślny cień to czarny.
Istnieje możliwość określenia kilku cieni, oddzielając ich parametry przecinkiem. Przyjmuje się następującą kolejność: pierwszy cień na liście umieszczany jest na samej górze, ostatni na liście na samym dole.
Wynik przykładu pokazano na ryc. 1.
Ryż. 1. Rodzaj cienia
Obiekt.style.boxCień
Safari przed wersją 5.1, Chrome przed wersją 10.0, Android przed wersją 4.0 obsługują właściwość -webkit-box-shadow.
Firefox przed wersją 4.0 obsługuje właściwość -moz-box-shadow.
Internet Explorer w wersji wcześniejszej niż 9.0 nie obsługuje właściwości box-shadow; zamiast tego można użyć właściwości filter:
Filtr: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);
Tutaj: offX - poziome przesunięcie cienia; offY — przesunięcie cienia w pionie; kolor — kolor cienia.
Użycie filtra cienia daje wyraźny, ostry cień, dzięki czemu można użyć filtra cienia, aby uzyskać efekt rozmycia.
Filtr: progid:DXImageTransform.Microsoft.shadow(kierunek=120, kolor=#000000, siła=10);
Tutaj: kierunek — kąt kierunku cienia od 0 do 360°; kolor — kolor cienia; siła — przesunięcie cienia w pikselach.
Każda specyfikacja przechodzi kilka etapów zatwierdzania.
Kolejność nagrywania ma fundamentalne znaczenie. Pierwszą wartością jest zawsze przesunięcie wzdłuż osi X, drugą - wzdłuż osi Y.
Jeśli przesunięcie nie jest potrzebne wzdłuż jednej z osi, ustaw je na zero:
Class(box-shadow: 0 8px;) – przesuwa cień tylko wzdłuż osi Y
Wynik
Class(box-shadow: 8px 8px;) – przesunięcie w obu osiach
Wynik
Cień przesunie się w przeciwnym kierunku:
Class(box-shadow: -8px 8px;) – przesuń cień o wartość ujemną wzdłuż osi X
Wynik
Trzeci parametr właściwości pudełko-cień. Jeśli nie określono, wartość wynosi 0, a rozmiar cienia jest równy rozmiarowi elementu, do którego jest zastosowany.
Class(box-shadow: 0 48px 0;) – cień powiela wymiary elementu, do którego jest nałożony
Wynik
Gdy wartość jest większa od zera, krawędzie tracą definicję, cień staje się większy i wizualnie jaśniejszy. Rozmycie jest stosowane ze wszystkich stron:
Class(box-shadow: 0 0 8px;) – bez przesunięcia, tylko rozmycie
Wynik
Class(box-shadow: 0 8px 8px;) – przesunięcie i rozmycie osi Y
Wynik
Wartość ujemna jest traktowana jako błąd i cień nie będzie w ogóle wyświetlany.
Czwarty parametr właściwości pudełko-cień. Zmienia rozmiar cienia względem elementu. Rozciąga się we wszystkich kierunkach:
Class(box-shadow: 0 0 0 8px;) – bez przesunięć i rozmyć, tylko rozciąganie
Wynik
W w tym przypadku cień jest o 16 pikseli większy od elementu pod względem szerokości i wysokości: 8 pikseli po lewej stronie + 8 pikseli po prawej i 8 pikseli u góry + 8 pikseli u dołu.
Cień nie rozciąga się, ale zwęża się ze wszystkich stron o określoną wartość:
Class(box-shadow: 0 16px 0 -8px;) – zmniejsza cień o wartość ujemną
Wynik
Domyślnie kolor cienia powiela kolor czcionki: jak w powyższych przykładach.
Kolor cienia jest określony w dowolnym dostępnym formacie CSS:
Nadaj elementowi niebieski cień:
Klasa(cień pudełka: 0 8px #3a8fe7;)
Wynik
Parametr wstawka wyświetla cień wewnątrz bloku.
W przeciwieństwie do opcji wymienionych powyżej, nie ma ścisłej kolejności pisania. Obie opcje dadzą ten sam wynik:
Cień ramki: wstawka 0 8px #3a8fe7; box-shadow: wstawka 0 8px #3a8fe7;
Wynik
Druga opcja jest łatwiejsza do zrozumienia podczas czytania kodu.
Określono wiele cieni oddzielonych przecinkami. Kolejność wyświetlania od góry do dołu:
Klasa (cień ramki: 0 8px #3a8fe7, 0 16px #3ae7af; )
Wynik
Jeśli zamienisz miejscami, niebieski cień nie będzie widoczny:
Klasa (cień ramki: 0 16px #3ae7af, 0 8px #3a8fe7; )
Wynik
Cień wewnętrzny i zewnętrzny ustawia się jednocześnie:
Klasa (cień ramki: 0 16 pikseli #3ae7af, wstawka 0 8 pikseli #3a8fe7; )
Wynik
Jeżeli element ma daną właściwość promień granicy, cień będzie miał zaokrąglone rogi.
Klasa (cień ramki: 0 16px #3a8fe7; promień obramowania: 8px;)
Wynik
Ustawiając rozciągnięcie cienia zwiększamy także jego zaokrąglenie. Na przykład promień obramowania wynosi 8 pikseli, a rozciągnięcie cienia wynosi 4.
8+4=12px to promień zaokrąglenia cienia.
Klasa (cień ramki: 0 16px 0 4px #3a8fe7; promień obramowania: 8px;)
Wynik
Ta sama zasada dotyczy zmniejszania cienia, gdy wartość jest ujemna.
8+(-4)=4px - otrzymujemy 2 razy mniejsze zaokrąglenie cienia.
Jeśli kompresja cienia będzie większa niż promień granicy, otrzymamy cień o kątach prostych. Na przykład kompresja wynosi 16 pikseli.
8+(-16)=(-8), ale zaokrąglenie nie może mieć wartości ujemnej i zostanie zastosowane zero.
Klasa( cień ramki: 0 24px 0 -16px #3a8fe7; promień obramowania: 8px; )
Wynik
Właściwość CSS pudełko-cień Obsługiwane przez wszystkie popularne przeglądarki z wyjątkiem Opery Mini.
Właściwość box-shadow dodaje jeden lub więcej cieni do elementu. Cień jest kopią elementu przesuniętą o określoną odległość. Cienie mogą być zewnętrzne lub wewnętrzne, rozmyte lub płaskie i mogą podążać za konturami bloków z zaokrąglonymi narożnikami. Używając słowa kluczowego inset, wewnątrz elementu tworzone są cienie, dzięki czemu element wizualnie staje się obszerny lub przygnębiony.
TJ: 9.0
Krawędź: 12.0
Firefoksa: 4,0, 3,5 -moz-
Chrom: 10.0, 4.0 -webkit-
Safari: 5.1, 3.1 -webkit-
Opera: 11.5
Safari na iOS: 5.1, 3.1 -webkit-
Przeglądarka Androida: 4.0, 2.1 -webkit-
Właściwość box-shadow umożliwia dołączenie jednego lub większej liczby cieni do ramki. Właściwość akceptuje wartość none , która wskazuje brak cieni, lub listę cieni oddzielonych przecinkami uporządkowaną od początku do końca.
Każdy cień jest oddzielnym cieniem, reprezentowanym przez 2 do 4 długości, opcjonalnym kolorem i opcjonalnym słowo kluczowe wstawka. Dozwolone długości 0 ; pominięte kolory mają domyślnie wartość właściwości color.
Nieruchomość nie podlega dziedziczeniu.
Ryż. 1. Składnia właściwości cienia pudełkowego | Wartości: | |
| przesunięcie x | Ustawia poziome przesunięcie cienia. Wartość dodatnia rysuje cień przesunięty w prawo od tekstu, długość ujemna rysuje cień w lewo. |
| przesunięcie y | Ustawia przesunięcie pionowe cienia. Wartość dodatnia przesuwa cień w dół, wartość ujemna przesuwa cień w górę. |
| plama | Ustawia promień rozmycia. Wartości ujemne są niedozwolone. Jeżeli wartość rozmycia wynosi zero, wówczas krawędź cienia jest ostra. W przeciwnym razie im wyższa wartość, tym bardziej rozmyta będzie krawędź cienia. |
| sięgnięcie | Ustawia odległość, o jaką zwiększa się cień. Wartości dodatnie powodują, że cień rozszerza się we wszystkich kierunkach o określony promień. Wartości ujemne powodują kurczenie się cienia. W przypadku cieni wewnętrznych rozszerzanie cienia oznacza ściskanie kształtu obwodu cienia. |
| kolor | Ustawia cienie. Jeśli nie ma koloru, używany kolor jest pobierany z właściwości color. W przypadku przeglądarki Safari należy określić kolor cienia. |
| wstawka | Zmienia rzucany cień bloku z cienia zewnętrznego na cień wewnętrzny. |
| nic | Wartość domyślna oznacza brak cienia. |
| wstępny | Ustawia wartość właściwości na wartość domyślną. |
| dziedziczyć | Dziedziczy wartość właściwości z elementu nadrzędnego. |
Efekty cienia stosuje się w następujący sposób: pierwszy cień znajduje się na górze, a pozostałe z tyłu. Cienie nie mają wpływu na układ i mogą nakładać się na inne elementy lub ich cienie. Jeśli chodzi o konteksty układania i kolejność rysowania, zewnętrzne cienie elementu są rysowane bezpośrednio pod tłem tego elementu, a wewnętrzne cienie elementu są rysowane bezpośrednio nad tłem tego elementu (poniżej granicy i border-image , jeśli istnieje).
Jeśli element ma wiele pól, wszystkie otrzymują cienie, ale cienie są rysowane tylko tam, gdzie zostaną narysowane również krawędzie; zobacz pudełko-dekoracja-przerwa.
Cienie nie powodują przewijania ani nie zwiększają rozmiaru obszaru przewijanego.
.example-shadow-1 ( tło: #e6e3df; wyrównanie tekstu: do środka; ) .example-shadow-1 span ( margines: 50 pikseli; wysokość: 100 pikseli; szerokość: 200 pikseli; wyświetlacz: blok inline; cień ramki: wstawka 2px 2px 5px rgba(154, 147, 140, 0,5), 1px 1px 5px rgba(255, 255, 255, 1);
płaski
płaski
.example-shadow-2 ( tło: beżowy; wyrównanie tekstu: do środka; ) .example-shadow-2 a ( display: inline-block; promień obramowania: 5px; dopełnienie: 15px 35px; rozmiar czcionki: 22px; tekst -dekoracja: brak; margines: 20px; tło: #55acee; cień ramki: 0 5px 0 #3C93D5; .example-shadow-2 a:hover (tło: #6FC6FF; ).example-shadow-3 ( tło: #e8e8e8; wyrównanie tekstu: do środka; ) .example-shadow-3 span ( tło: biały; wyświetlacz: blok inline; szerokość: 200 pikseli; wysokość: 100 pikseli; margines: 50 pikseli; pole -cień: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
Regularne cienie można łatwo wdrożyć za pomocą cienia pudełkowego lub cienia tekstowego. Ale co, jeśli chcesz zrobić cienie wewnętrzne? W tym artykule opisano, jak utworzyć te cienie za pomocą zaledwie kilku linii kodu.
Przesunięcie poziome I przesunięcie pionowe- odpowiednio przemieszczenie poziome i pionowe. Wartości te wskazują, w którą stronę obiekt rzuci cień:
Promień rozmycia I promień rozprzestrzeniania się trochę bardziej skomplikowane. Jaka jest różnica? Spójrzmy na przykład z dwoma elementami, gdzie wartości promień rozmycia różnić się:
Brzeg cienia jest po prostu rozmyty. Z różnymi wartościami promień rozprzestrzeniania się widzimy co następuje:
W tym przypadku widzimy, że cień jest rozproszony na dużym obszarze. Jeśli nie określisz wartości promień rozmycia I promień rozprzestrzeniania się, to będą równe 0.
Znaczenia są podobne, ale nie rozciągnięty cień. Przykład użycia:
Kiedy już zrozumiesz podstawową składnię cienia pudełkowego, bardzo łatwo będzie zrozumieć, jak zaimplementować cienie wewnętrzne. Wartości są nadal takie same, możesz dodać kolor (RGB w formacie szesnastkowym):
Kolor jest w formacie RGB, wartość alfa odpowiada za przezroczystość cienia:
Logiczne jest założenie, że możesz dodać cień w ten sposób:
Img (box-shadow: wstawka 0px 0px 10px rgba(0,0,0,0.5); )
Ale cień nie jest widoczny:
Istnieje kilka sposobów rozwiązania tego problemu, z których każdy ma swoje zalety i wady. Przyjrzyjmy się dwóm z nich. Pierwszym z nich jest zwykłe zawinięcie obrazu div:
Div ( wysokość: 200 pikseli; szerokość: 400 pikseli; box-shadow: wstawka 0px 0px 10px rgba(0,0,0,0.9); ) img ( wysokość: 200px; szerokość: 400px; pozycja: względna; indeks Z: -2 ;)
Wszystko działa, ale musimy dodać trochę dodatkowych znaczników HTML i CSS. Drugi sposób polega na ustawieniu obrazu jako tła żądany blok:
Div (wysokość: 200 pikseli; szerokość: 400 pikseli; tło: url(http://lorempixum.com/400/200/transport/2); box-shadow: wstawka 0px 0px 10px rgba(0,0,0,0.9); )
Oto, co może się zdarzyć, gdy użyjesz cieni wewnętrznych:
Aby rozwiązać, najpierw zastosuj się do nagłówka h1 Ustaw ciemne tło i jasny cień:
H1 (kolor tła: #565656; kolor: przezroczysty; cień tekstu: 0px 2px 3px rgba(255,255,255,0,5); )
Oto, co się dzieje:
Dodanie tajnego składnika klip w tle który odcina wszystko, co wykracza poza tekst (na ciemne tło):
H1 ( kolor tła: #565656; kolor: przezroczysty; cień tekstu: 0px 2px 3px rgba(255,255,255,0,5); -webkit-background-clip: tekst; -moz-background-clip: tekst; tło-clip: tekst ;)
Okazało się prawie dokładnie to, czego potrzebowaliśmy. Teraz po prostu trochę przyciemniamy tekst (alfa), a wynik jest następujący:
Typografia to ulubiona zabawka projektantów stron internetowych. CSS ma jedno bardzo interesujące narzędzie - cień tekstowy(cień tekstu), co na pierwszy rzut oka wydaje się dość proste, ale przy jego pomocy można stworzyć zapadające w pamięć efekty, jeśli użyje się pomysłowości i wyobraźni.
Nieruchomość cień tekstowy bardzo łatwy w użyciu. Jest wspierany przez wszystkich nowoczesne przeglądarki i nawet bez użycia przedrostków. Ale w IE nie ma wsparcia (nawet w IE9). Możesz użyć narzędzi takich jak Modernizr, aby pomóc w wyciągnięciu efektów CSS3 nawet w starszych wersjach IE.
Aby utworzyć cień tekstu, użyj składni właściwości cień tekstowy co podano poniżej. Do zdefiniowania są cztery parametry: pierwsze dwa określają położenie cienia, trzeci poziom rozmycia, a czwarty określa kolor cienia.
Cień tekstu: przesunięcie poziome przesunięcie pionowe rozmycie koloru;
Poniżej znajduje się przykład cienia tekstowego przesuniętego o dwa piksele w dół i cztery piksele w prawo, rozmytego o trzy piksele i ustawionego na kolor czarny przy kryciu 30%.
Cień tekstu: 2px 4px 3px rgba(0,0,0,0.3);
Wynik użycia tej właściwości będzie wyglądał następująco:
Nie musisz używać rgba do określenia koloru cienia podczas definiowania właściwości. Jednak rgba dodaje inny wymiar przy definiowaniu cienia - poziom przezroczystości.
Ta metoda jest znacznie prostsza niż inne metody określania koloru. Nie musisz skupiać się na określeniu odcienia koloru cienia, który może być jedynie nieco ciemniejszy lub jaśniejszy od koloru tła. Dzięki rgba możesz po prostu użyć bieli lub czerni i zwiększyć ich przezroczystość, aby uzyskać pożądany kolor tła podczas mieszania kolorów.
Korzystanie z własności cień tekstowy można stworzyć różne efekty dla tekstu, nie ograniczając się do prostych cieni. Na przykład tutaj jest kod tworzący iluzję przygnębionego tekstu.
Najpierw musisz ustawić kolor tekstu nieco ciemniejszy niż kolor tła. A potem musisz skorzystać z nieruchomości cień tekstowy o białym kolorze i zwiększonej przezroczystości.
Kolor tła to #222, a kolor tekstu jest ustawiony na 60% krycia. Biały cień jest umieszczony nieco w dół i w prawo, a poziom krycia wynosi 10%.
Treść ( tło: #222; ) #tekst h1 ( kolor: rgba(0,0,0,0.6); cień tekstu: 2px 2px 3px rgba(255,255,255,0.1); )
Nie ma potrzeby rozmywania cienia. Wyraźny cień może dobrze pasować do projektu strony internetowej.
Cień tekstu: 6px 6px 0px rgba(0,0,0,0.2);
Prawdziwa zabawa zaczyna się, gdy pozbędziesz się ograniczenia posiadania tylko jednego cienia. Używając przecinka do oddzielenia definicji, możesz użyć dowolnej liczby cieni!
Cień tekstu: cień1, cień2, cień3;
Oto przykład użycia dwóch cieni. Pierwsza ma ten sam kolor co tło.
Cień tekstowy: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
Kiedy już opanujesz używanie wielu cieni, rezultaty będą coraz bardziej dramatyczne. Tworzenie efektu 3D dla tekstu jest bardzo łatwe.
W przykładzie wykorzystano cztery cienie, wszystkie przesunięte w dół w różnych odległościach i rozmyte.
Cień tekstowy: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1 );
Oto kolejne wcielenie tego samego pomysłu. Trzy cienie są przesunięte na mniejszą odległość i bardziej rozmyte.
Cień tekstowy: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
Efekt stosowany jest na stronie MarkDotto.com. Wykorzystuje 12 różnych cieni, aby stworzyć wspaniały efekt 3D.
Cień tekstowy: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0 ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
Zauważ, że w powyższym przykładzie nazwałem moją technikę „szybkim i brudnym” efektem typografii. Dzieje się tak, ponieważ istnieje znacznie bardziej złożony sposób na utworzenie poważnie wstawianego tekstu, który jest znacznie bardziej wiarygodny.
Gordon używa poważnego voodoo CSS do ciągnięcia nie tylko cień zewnętrzny, ale także prawdziwy cień wewnętrzny. Pełne wyjaśnienie tej techniki znajdziesz w jego poście na blogu.
Kolor tła: #666666;
-moz-background-clip: tekst;
klip w tle: tekst;
cień tekstowy: rgba(255,255,255,0,5) 0px 3px 3px;
Blask
Cień tekstowy: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd; Wiele źródeł światła Cień tekstowy: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05); Kolor: rgba(0,0,0,0,6); cień tekstowy: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255.255.255,0.3); Wniosek
