Box Cień
Z CSS3 można utworzyć efekt cienia!
CSS3 Efekty cienia
Z CSS3 można dodać cień do tekstu i elementów.
W tym rozdziale dowiesz się o następujących właściwościach:
-
text-shadow -
box-shadow
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
Liczby następnie -webkit- lub -moz- określa pierwszą wersję, która pracowała z prefiksem.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.5 |
| box-shadow | 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
Tekst CSS3 Cień
CSS3 text-shadow właściwość ma zastosowanie cień do tekstu.
W najprostszej użytku, wystarczy tylko określić cień poziomą (2px) i pionową (cień 2px):
cień efekt tekstu!
Następnie dodać kolor cienia:
cień efekt tekstu!
Następnie dodać efekt rozmycia cienia:
cień efekt tekstu!
Poniższy przykład pokazuje biały tekst z czarnym cieniem:
cień efekt tekstu!
Poniższy przykład pokazuje czerwony neon blask cień:
cień efekt tekstu!
Wiele Cienie
Aby dodać więcej niż jeden cień do tekstu, można dodać listę oddzielonych przecinkami cieni.
Poniższy przykład pokazuje, czerwony i niebieski neon blask cień:
cień efekt tekstu!
Poniższy przykład pokazuje biały tekst z czarnym, niebieskim i granatowy cień:
cień efekt tekstu!
Przykład
h1
{
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
Spróbuj sam " CSS3 box-shadow nieruchomości
CSS3 box-shadow właściwość ma zastosowanie cień do elementów.
W najprostszej użytku, wystarczy tylko określić cień poziomą i pionową cień:
Następnie dodać kolor cienia:
Następnie dodać efekt rozmycia cienia:
Można również dodać cienie do :: przed i po :: pseudoklas, aby stworzyć ciekawy efekt:
Przykład
#boxshadow {
position: relative;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding:
10px;
background: white;
}
#boxshadow img {
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
}
#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind
image */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one
half of the remaining 30% */
height: 100px;
bottom: 0;
} Spróbuj sam " karty
Przykładem wykorzystania box-shadow nieruchomości do tworzenia kart papierowych, takich jak:
1
01 styczeń 2016
Hardanger, Norwegia
Przykład
div.card
{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
Spróbuj (karta tekst) » Wypróbuj go (karta Obrazek)» Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 »
Właściwości CSS3 Cień
Poniższa tabela zawiera listę właściwości CSS3 cieni:
| Nieruchomość | Opis |
|---|---|
| box-shadow | Dodaje jeden lub więcej cieni do elementu |
| text-shadow | Dodaje jeden lub więcej cieni do tekstu |