tutorial pengembangan web terbaru
×

CSS Referensi

CSS Referensi CSS penyeleksi CSS fungsi CSS referensi Aural CSS Web Aman Font CSS animatable CSS unit CSS PX-EM Converter CSS warna CSS Warna Nilai-nilai CSS3 Dukungan Browser

CSS properti

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-shadow box-sizing caption-side clear clip color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-size font-size-adjust font-stretch font-style font-variant font-weight hanging-punctuation height justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width nav-down nav-index nav-left nav-right nav-up opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin position quotes resize right tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space width word-break word-spacing word-wrap z-index



 

CSS3 filter Property

❮ Sebelumnya Berikutnya ❯

Contoh

Mengubah warna semua gambar menjadi hitam dan putih (100% gray) :

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

mountain View
Original image
mountain View
grayscale(100%)

Cobalah sendiri "

Tip: Lebih "Try it Yourself" contoh di bawah ini.

Definisi dan Penggunaan

Filter properti mendefinisikan efek visual (like blur and saturation) ke elemen (often <img>) .

nilai default: tak satupun
mewarisi: no
animatable: yes. Read about animatable
Versi: CSS3
sintaks JavaScript: object .style.WebkitFilter="grayscale(100%)" Try it

Dukungan Browser

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

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

Milik
filter 18,0 -webkit- 13.0 35,0 9.1
6.0 -webkit- 		15,0 -webkit-

Catatan: Lama versi Internet Explorer (4.0 to 8.0) mendukung non-standar "filter" properti yang telah usang. Hal ini sebagian besar digunakan untuk opacity bila diperlukan dukungan dari IE8 dan ke bawah.

CSS Syntax

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Tip: Untuk menggunakan beberapa filter, memisahkan setiap filter dengan spasi (See "More Examples" below) .

Filter Fungsi

Catatan: filter yang menggunakan nilai persentase (ie 75%) , juga menerima nilai sebagai desimal (ie 0.75) .

Menyaring Deskripsi Mainkan
none nilai default. Menentukan ada efek Mainkan "
blur( px ) Menerapkan efek blur pada gambar. Sebuah nilai yang lebih besar akan membuat lebih blur.

Jika tidak ada nilai yang ditentukan, 0 digunakan. 		Mainkan "
brightness( % ) Menyesuaikan kecerahan gambar.

0% akan membuat gambar benar-benar hitam.
100% (1) adalah default dan merupakan gambar asli.
Nilai lebih dari 100% akan memberikan hasil yang lebih cerah. 		Mainkan "
contrast( % ) Menyesuaikan kontras gambar.

0% akan membuat gambar benar-benar hitam.
100% (1) adalah default dan merupakan gambar asli.
Nilai lebih dari 100% akan memberikan hasil dengan kurang kontras. 		Mainkan "
drop-shadow( h-shadow v-shadow blur spread color ) Menerapkan drop shadow efek gambar.

Kemungkinan nilai:
h-shadow - Diperlukan. Menentukan nilai pixel untuk bayangan horizontal. nilai negatif menempatkan bayangan di sebelah kiri gambar.

v-shadow - Diperlukan. Menentukan nilai pixel untuk bayangan vertikal. nilai negatif menempatkan bayangan di atas gambar.

blur - Opsional. Ini adalah nilai yang ketiga, dan harus dalam piksel. Menambahkan efek blur untuk bayangan. Sebuah nilai yang lebih besar akan membuat lebih blur (bayangan menjadi lebih besar dan lebih ringan). nilai negatif tidak diperbolehkan. Jika tidak ada nilai yang ditentukan, 0 digunakan (tepi bayangan adalah tajam).

spread - Opsional. Ini adalah nilai yang keempat, dan harus dalam piksel. nilai-nilai positif akan menyebabkan bayangan untuk memperluas dan tumbuh lebih besar, dan nilai-nilai negatif akan menyebabkan bayangan menyusut. Jika tidak ditentukan, maka akan 0 (the shadow will be the same size as the element) .
Catatan: Chrome, Safari dan Opera, dan mungkin browser lain, tidak mendukung panjang 4 ini; itu tidak akan membuat jika ditambahkan.

Warna - Opsional. Menambahkan warna untuk bayangan. Jika tidak ditentukan, warna tergantung pada browser (often black) .

Contoh menciptakan bayangan merah, yang merupakan 8px besar secara horisontal dan vertikal, dengan efek blur dari 10px:

filter: drop-shadow (8px 8px 10px red);

Tip: Filter ini mirip dengan kotak-shadow properti. 		Mainkan "
grayscale( % ) Mengkonversi gambar ke grayscale.

0% (0) adalah default dan merupakan gambar asli.
100% akan membuat gambar benar-benar abu-abu (used for black and white images) .

Catatan: nilai negatif tidak diizinkan. 		Mainkan "
hue-rotate( deg ) Menerapkan rotasi rona pada gambar. nilai mendefinisikan jumlah derajat sekitar lingkaran warna sampel gambar akan disesuaikan. 0deg adalah default, dan merupakan gambar asli.

Catatan: Nilai maksimum adalah 360deg. 		Mainkan "
invert( % ) Membalikkan sampel dalam gambar.

0% (0) adalah default dan merupakan gambar asli.
100% akan membuat gambar benar-benar terbalik.

Catatan: nilai negatif tidak diizinkan. 		Mainkan "
opacity( % ) Menetapkan tingkat opacity untuk gambar. The opacity tingkat menggambarkan transparansi tingkat, di mana:

0% benar-benar transparan.
100% (1) adalah default dan merupakan gambar asli (no transparency) .

Catatan: nilai negatif tidak diizinkan.
Tip: Filter ini mirip dengan opacity properti. 		Mainkan "
saturate( % ) Jenuh gambar.

0% (0) akan membuat gambar benar-benar un-jenuh.
100% adalah default dan merupakan gambar asli.
Nilai lebih dari 100% memberikan hasil super-jenuh.

Catatan: nilai negatif tidak diizinkan. 		Mainkan "
sepia( % ) Mengkonversi gambar ke sepia.

0% (0) adalah default dan merupakan gambar asli.
100% akan membuat gambar benar-benar sepia.

Catatan: nilai negatif tidak diizinkan. 		Mainkan "
url() The url() fungsi mengambil lokasi file XML yang menentukan filter SVG, dan mungkin termasuk jangkar untuk elemen filter tertentu. Contoh:

filter: url(svg-url#element-id)
initial Set properti ini ke nilai default. Baca tentang awal
inherit Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi
contoh

Contoh lebih

Blur Contoh

Menerapkan efek blur pada gambar:

img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}

mountain View
Original image
mountain View
blur(5px)

Cobalah sendiri "

kecerahan Contoh

Menyesuaikan kecerahan gambar:

img {
    -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
    filter: brightness(200%);
}

mountain View
Original image
mountain View
brightness(200%)

Cobalah sendiri "

kontras Contoh

Mengatur kontras gambar:

img {
    -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
    filter: contrast(200%);
}

mountain View
Original image
mountain View
contrast(200%)

Cobalah sendiri "

Drop Shadow Contoh

Menerapkan drop shadow efek pada gambar:

img {
    -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
    filter: drop-shadow(8px 8px 10px red);
}

mountain View
Original image
mountain View
drop-shadow(8px 8px 10px red)

Cobalah sendiri "

grayscale Contoh

Mengkonversi gambar ke grayscale:

img {
    -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
    filter: grayscale(50%);
}

mountain View
Original image
mountain View
grayscale(50%)

Cobalah sendiri "

Hue Rotasi Contoh

Menerapkan rotasi rona pada gambar:

img {
    -webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(90deg);
}

mountain View
Original image
mountain View
hue-rotate(90deg)

Cobalah sendiri "

invert Contoh

Membalikkan sampel dalam gambar:

img {
    -webkit-filter: invert(100%); /* Chrome, Safari, Opera */
    filter: invert(100%);
}

mountain View
Original image
mountain View
invert(100%)

Cobalah sendiri "

opacity Contoh

Mengatur tingkat opacity untuk gambar:

img {
    -webkit-filter: opacity(30%); /* Chrome, Safari, Opera */
    filter: opacity(30%);
}

mountain View
Original image
mountain View
opacity(30%)

Cobalah sendiri "

jenuh Contoh

Menjenuhkan gambar:

img {
    -webkit-filter: saturate(800%); /* Chrome, Safari, Opera */
    filter: saturate(800%);
}

mountain View
Original image
mountain View
saturate(800%)

Cobalah sendiri "

Sepia Contoh

Mengkonversi gambar ke sepia:

img {
    -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
    filter: sepia(100%);
}

mountain View
Original image
mountain View
sepia(100%)

Cobalah sendiri "

Menggabungkan Filter / Beberapa Filter

Untuk menggunakan beberapa filter, memisahkan setiap filter dengan spasi.

Catatan: Order penting (ie using grayscale() setelah sepia() akan menghasilkan gambar yang sama sekali abu-abu).

img {
    -webkit-filter: contrast(200%) brightness(150%);  /* Chrome, Safari, Opera */
    filter: contrast(200%) brightness(150%);
}

mountain View
Original image
mountain View
contrast(200%) brightness(150%)

Cobalah sendiri "

semua Filter

Sebuah demonstrasi dari semua fungsi filter:

.blur {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

.brightness {
    -webkit-filter: brightness(0.30);
    filter: brightness(0.30);
}

.contrast {
    -webkit-filter: contrast(180%);
    filter: contrast(180%);
}

.grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.huerotate {
    -webkit-filter: hue-rotate(180deg);
    filter: hue-rotate(180deg);
}

.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

.opacity {
    -webkit-filter: opacity(50%);
    filter: opacity(50%);
}

.saturate {
    -webkit-filter: saturate(7);
    filter: saturate(7);
}

.sepia {
    -webkit-filter: sepia(100%);
    filter: sepia(100%);
}

.shadow {
    -webkit-filter: drop-shadow(8px 8px 10px green);
    filter: drop-shadow(8px 8px 10px green);
}
Cobalah sendiri "

Pages terkait

Referensi HTML DOM: filter property


❮ Sebelumnya Berikutnya ❯