Jak stworzyć cień za pomocą CSS

Chociaż trendy w projektowaniu zmieniają się co roku, możesz liczyć na wykorzystanie zszywanych efektów cienia, takich jak cień pudełka oraz cień pozytywnie wpłynąć na estetykę witryny. Możesz użyć cienie aby stworzyć przyjemne, pięknie oddane efekty bez odchodzenia tak tandetnych.

Przyjrzyjmy się bliżej CSS cień własność.

Co to jest cień CSS?

cień ( ) to efekt CSS, który wyświetla cień wokół kształtu określonego obiektu. Oto składnia stosowania CSS cień.

Składnia:
filtr: drop-shadow (offset-x offset-y blur-radius color);

Istnieje szeroka gama funkcje filtrowania łącznie z rozmycie ( ), jasność( ), oraz cień ( ).

przesunięcie-x określa odległość poziomą i przesunięcie-y określa odległość w pionie. Zauważ, że wartości ujemne umieszczają cień po lewej stronie (przesunięcie-x) i powyżej (przesunięcie-y) obiekt.

Ostatnie dwa parametry są opcjonalne. Promień rozmycia cienia można określić jako długość. Domyślnie jest ustawiony na 0. Nie możesz mieć ujemnego promienia rozmycia.

Kolor cienia jest określony jako. Jeśli nie określiłeś koloru, jest on zgodny z wartością kolor własność.

Kiedy cień CSS jest przydatny?

Być może już to wiesz cień pudełka wykonuje swoją pracę całkiem dobrze. Więc możesz pomyśleć, dlaczego potrzebujemy cień w ogóle? Istnieje wiele przypadków, w których cień ( ) funkcja ratuje życie. Przyjrzyjmy się kilku z nich:

Kształty inne niż prostokątne

W przeciwieństwie do cień pudełka, możesz dodać cień do kształtów innych niż prostokątne. Na przykład mamy przezroczysty SVG lub PNG o nieprostokątnym kształcie — na przykład gwiazda. Tutaj dodanie cienia odpowiadającego samemu obiektowi można zakończyć za pomocą cień pudełka lub cień. Rozważ oba scenariusze:

HTML

CSS

.gwiazdka-obraz {
wyświetlacz: inline-block;
wysokość: 15em;
szerokość: 25em;
}
.box-cień {
kolor czerwony;
box-cień: 0,60em 0,60em 0,2em;
}
. cień {
filtr: cień (0,60em 0,60em 0,2em);
}

Wyjście:

Porównując oba efekty, widać, że cień pudełka daje prostokątny cień; nie ma również znaczenia, czy obraz jest przezroczysty, czy ma już tło. Z drugiej strony, cień pozwala stworzyć cień dopasowany do kształtu samego obrazu.

Czynnikami ograniczającymi są to, że cień ( ) funkcja akceptuje wszystkie parametry typu z wyjątkiem wstawka słowo kluczowe i szerzyć się parametr.

Zgrupowane elementy

Istnieje kilka przypadków, w których konieczne może być zbudowanie komponentów przez nakładanie się pewnych elementów. Jeśli używasz cień pudełka, staniesz przed problemem próby rzucenia cienia we właściwy sposób. Oto jak to działa podczas grupowania obrazu i komponentu tekstowego:

HTML

Żyj chwilą

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores. Modi, korumpowane commodi quisquam ex numquam incidunt.

Podstawowy CSS

ciało {
wypełnienie: 5em 1em;
rodzina czcionek: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
„Lucida Sans Unicode”, Genewa, Verdana, bezszeryfowa;
}
godz.2 {
rozmiar czcionki: 2rem;
}
P {
rozmiar czcionki: 0,8 rem;
}
.kontener-nadrzędny {
wyświetlacz: elastyczny;
kierunek ugięcia: kolumna;
wysokość: 17rem;
szerokość: 50em;
}
.obraz-kontener obrazu {
szerokość: 15em;
pozycja: bezwzględna;
indeks z: 1;
góra: 2em;
lewy: 1,5em;
}
.tekst-kontener {
kolor: rgb (255, 236, 236);
kolor tła: rgb (141 0 35);
szerokość: 30rem;
wypełnienie: 3rem;
align-self: flex-end;
pozycja: względna;
}

Teraz zastosuj cień pudełka oraz cień aby zobaczyć różnicę.

. cień {
filtr: cień (0,4rem 0,4rem 0,45rem rgba (0, 0, 30, 0,5));
}
.skrzynka,
.box obraz {
cień skrzynkowy: 0,4rem 0,4rem 0,45rem rgba (0, 0, 30, 0,3);
}

Wyjście:

Jak widać, cień pudełka nakłada się na każdy element indywidualnie, podczas gdy cień grupuje je obie i stosuje cień.

Przycięte elementy

Możesz użyć ścieżka przycinania właściwość, aby przyciąć określony region, który określa, które części obrazu lub elementu powinny być wyświetlane. ten filtr cienia pozwala nam stworzyć cień na przyciętym elemencie, stosując go do rodzica tego elementu:

HTML

CSS

.kontener-nadrzędny {
filtr: cień (0rem 0rem 1,5rem bordowy);
}
.przycięty-element {
szerokość: 50em;
wysokość: 50em;
margines: 0 auto;
obraz w tle: url (uśmiechnięta-dziewczyna.jpg);
ścieżka przycinania: koło (50%);
rozmiar tła: okładka;
powtarzanie w tle: bez powtórzeń;
}

Wyjście:

Obcięliśmy 50% obrazu ścieżką okrężną. Dlatego też filtr cienia jest stosowany tylko do widocznej części obrazu. Czy to nie jest niesamowite?

Ograniczenia i różnice

Jak omówiliśmy powyżej, cień nie obsługuje szerzyć się parametr. Oznacza to, że stworzenie efektu konturu nie byłoby możliwe przy użyciu cień ( ) funkcji, ponieważ zostaje zabity wszędzie. Ponadto renderuje różne efekty cienia od cień pudełka oraz cień tekstu (z tymi samymi parametrami). Możesz czuć, że różnice między cień pudełka oraz cień sprowadza się do Model skrzynki CSS. Jeden podąża za nim, a drugi nie. Oto przykład:

HTML

Każdy artykuł MUO przybliży Cię o krok.


Każdy artykuł MUO przybliży Cię o krok.



Każdy artykuł MUO przybliży Cię o krok.

Podstawowy CSS

ciało {
wypełnienie: 5em 1em;
rodzina czcionek: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
„Lucida Sans Unicode”, Genewa, Verdana, bezszeryfowa;
}
.kontener-nadrzędny {
szerokość: 72rem;
}
P {
rozmiar czcionki: 3em;
styl czcionki: pogrubiony;
}

Stosowanie efektów cienia

. cień {
filtr: drop-shadow (0,5em 0,5em 0,1em #555);
}
.box-cień {
box-shadow: 0.5em 0.5em 0.1em #555;
}
.cień tekstu {
cień tekstu: 0,5em 0,5em 0,1em #555;
}

Wyjście:

Widać, że cień pudełka daje cięższy, ciemniejszy cień niż cień tekstu oraz cień. Ponadto istnieje niewielka różnica w położeniu cienia między cień tekstu oraz cień. Niemniej jednak możesz preferować różne efekty cienia zgodnie z własnymi wymaganiami.

Obsługa przeglądarki

ten cień ( ) funkcja jest obsługiwana we wszystkich nowoczesnych przeglądarkach z wyjątkiem starszych przeglądarek, takich jak Internet Explorer. Chociaż nie jest to coś, co poważnie utrudniłoby UX, możesz dodać zapytanie o funkcję za pomocą cień pudełka awaryjny.

Eksperymentuj z różnymi efektami cieni

Popularność cień pudełka jest dość oczywiste ze względu na mnogość przypadków użycia. Jednakże cień ( ) funkcja jest wysoce niewykorzystana. Mamy nadzieję, że poeksperymentujesz z różnymi efektami cieni i spróbujesz je wdrożyć cień w przyszłych projektach.

Pseudo-klasy dodają zupełnie nowy zakres funkcjonalności do CSS i osobistego repertuaru tworzenia stron internetowych. Dowiedz się więcej o nich, aby stać się bardziej sprawnym i wydajnym programistą internetowym.

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

Pudełka nijakie wyglądają nudno. Udekoruj je efektem CSS box-shadow!

Czytaj dalej

O autorze