Najnowsze tutoriale tworzenie stron internetowych
 

CSS Efekty cienia


Norwegia

Box Cień

Z CSS3 można utworzyć efekt cienia!

Najedź na mnie!

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!

Przykład

h1 {
    text-shadow: 2px 2px;
}
Spróbuj sam "

Następnie dodać kolor cienia:

cień efekt tekstu!

Przykład

h1 {
    text-shadow: 2px 2px red;
}
Spróbuj sam "

Następnie dodać efekt rozmycia cienia:

cień efekt tekstu!

Przykład

h1 {
    text-shadow: 2px 2px 5px red;
}
Spróbuj sam "

Poniższy przykład pokazuje biały tekst z czarnym cieniem:

cień efekt tekstu!

Przykład

h1 {
    color: white;
    text-shadow: 2px 2px 4px #000000;
}
Spróbuj sam "

Poniższy przykład pokazuje czerwony neon blask cień:

cień efekt tekstu!

Przykład

h1 {
    text-shadow: 0 0 3px #FF0000;
}
Spróbuj sam "

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!

Przykład

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
Spróbuj sam "

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ń:

To jest żółty <div> Element z czarnym box-shadow

Przykład

div {
    box-shadow: 10px 10px;
}
Spróbuj sam "

Następnie dodać kolor cienia:

To jest żółty <div> Element z szarą box-shadow

Przykład

div {
    box-shadow: 10px 10px grey;
}
Spróbuj sam "

Następnie dodać efekt rozmycia cienia:

To jest żółty <div> Element z niewyraźne, szare box-shadow

Przykład

div {
    box-shadow: 10px 10px 5px grey;
}
Spróbuj sam "

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

Norwegia

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