tutorial pengembangan web terbaru
 

CSS Efek bayangan

❮ Sebelumnya Berikutnya Bab ❯
Norway

kotak Bayangan

Dengan CSS3 Anda dapat membuat efek bayangan!

Arahkan kursor saya!

CSS3 Efek Bayangan

Dengan CSS3 Anda dapat menambahkan bayangan untuk teks dan elemen.

Dalam bab ini Anda akan belajar tentang sifat-sifat berikut:

  • text-shadow
  • box-shadow

Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.

Nomor diikuti oleh -webkit- atau -moz- menentukan versi pertama yang bekerja dengan awalan.

Milik
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

CSS3 Bayangan Teks

CSS3 text-shadow properti berlaku bayangan untuk teks.

Dalam penggunaannya sederhana, Anda hanya menentukan bayangan horizontal (2px) dan bayangan vertikal (2px):

Teks efek bayangan!

Contoh

h1 {
    text-shadow: 2px 2px;
}
Cobalah sendiri "

Selanjutnya, tambahkan warna untuk bayangan:

Teks efek bayangan!

Contoh

h1 {
    text-shadow: 2px 2px red;
}
Cobalah sendiri "

Kemudian, menambahkan efek blur untuk bayangan:

Teks efek bayangan!

Contoh

h1 {
    text-shadow: 2px 2px 5px red;
}
Cobalah sendiri "

Contoh berikut menunjukkan teks putih dengan bayangan hitam:

Teks efek bayangan!

Contoh

h1 {
    color: white;
    text-shadow: 2px 2px 4px #000000;
}
Cobalah sendiri "

Contoh berikut menunjukkan neon cahaya bayangan merah:

Teks efek bayangan!

Contoh

h1 {
    text-shadow: 0 0 3px #FF0000;
}
Cobalah sendiri "

beberapa Bayangan

Untuk menambahkan lebih dari satu bayangan untuk teks, Anda dapat menambahkan daftar dipisahkan koma bayangan.

Contoh berikut menunjukkan neon cahaya bayangan merah dan biru:

Teks efek bayangan!

Contoh

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
Cobalah sendiri "

Contoh berikut menunjukkan teks putih dengan bayangan hitam, biru, dan darkblue:

Teks efek bayangan!

Contoh

h1 {
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
Cobalah sendiri "

CSS3 box-shadow Properti

CSS3 box-shadow properti berlaku bayangan untuk elemen.

Dalam penggunaannya sederhana, Anda hanya menentukan bayangan horizontal dan bayangan vertikal:

Ini adalah kuning <div> elemen dengan hitam box-shadow

Contoh

div {
    box-shadow: 10px 10px;
}
Cobalah sendiri "

Selanjutnya, tambahkan warna untuk bayangan:

Ini adalah kuning <div> elemen dengan abu-abu box-shadow

Contoh

div {
    box-shadow: 10px 10px grey;
}
Cobalah sendiri "

Berikutnya, menambahkan efek blur untuk bayangan:

Ini adalah kuning <div> elemen dengan kabur, abu-abu box-shadow

Contoh

div {
    box-shadow: 10px 10px 5px grey;
}
Cobalah sendiri "

Anda juga dapat menambahkan bayangan ke :: sebelum dan :: setelah pseudo-kelas, untuk menciptakan efek yang menarik:

Contoh

#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;
}
Cobalah sendiri "

Kartu-kartu

Contoh menggunakan box-shadow properti untuk membuat kartu seperti kertas:

1

1 Januari 2016

Norway

Hardanger, Norwegia

Contoh

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;
}
Cobalah (Kartu Text) » mencobanya (Gambar Card)»

Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 »

CSS3 Bayangan Properti

Tabel berikut berisi daftar properti CSS3 shadow:

Milik Deskripsi
box-shadow Menambahkan satu atau lebih bayangan untuk elemen
text-shadow Menambahkan satu atau lebih bayangan untuk teks

❮ Sebelumnya Berikutnya Bab ❯