Inti dari efek filter CSS

Penulis：Eve Cole Waktu Pembaruan：2009-06-12 17:23:02

Contoh kode html dan kode css yang disertakan di dalamnya diberikan di bawah ini. Gambar yang digunakan di dalamnya adalah fd.jpg. Salin kode dan beri nama gambar fd.jpg untuk melihat efek penuh

Efek filter CSS.html

.alpha
{
filter:alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=85,finishx=150,finishy=85);
}
.mengaburkan
{
font-family: lucida tulisan tangan miring;
ukuran font:72px;
gaya font: tebal;
warna:#336600;
lebar:350px;/*Atribut ini penting, jika tidak, efeknya tidak akan terlihat*/
filter:blur(tambahkan=benar,arah=90,kekuatan=25);
}
.chromas
{
font-family: lucida tulisan tangan miring;
ukuran font:72px;
gaya font: tebal;
warna: merah;
lebar:350 piksel;
filter:chroma(warna=merah);
}
.dropshadows
{
font-family: lucida tulisan tangan miring;
ukuran font:72px;
gaya font: tebal;
warna:#336600;
lebar:350 piksel;
filter:dropshadow(warna=merah,offx=15,offy=10,positif=1);
}
.fliphs
{
font-family: lucida tulisan tangan miring;
ukuran font:72px;
gaya font: tebal;
warna:#336600;
lebar:350 piksel;
filter:membalik;
}
.flipvs
{
font-family: lucida tulisan tangan miring;
ukuran font:72px;
gaya font: tebal;
warna:#336600;
lebar:350 piksel;
penyaring:flipv;
}
.bersinar
{
font-family: lucida tulisan tangan miring;
ukuran font:72px;
gaya font: tebal;
warna:#336600;
lebar:350 piksel;
filter:cahaya(warna=biru,kekuatan=15);
}
.abu-abu
{
font-family: lucida tulisan tangan miring;
ukuran font:72px;
gaya font: tebal;
warna:#336600;
lebar:350 piksel;
penyaring: abu-abu;
}
.membalikkan
{
font-family: lucida tulisan tangan miring;
ukuran font:72px;
gaya font: tebal;
warna:#336600;
lebar:350 piksel;
filter:membalikkan;
}
.masker
{
font-family: lucida tulisan tangan miring;
ukuran font:72px;
gaya font: tebal;
warna:#336600;
lebar:350 piksel;
filter:topeng(warna=hijau);
}
.bayangan
{
font-family: lucida tulisan tangan miring;
ukuran font:72px;
gaya font: tebal;
warna:#336600;
lebar:350 piksel;
filter:bayangan(warna=merah,arah=225);
}
.ombak
{
font-family: lucida tulisan tangan miring;
ukuran font:72px;
gaya font: tebal;
warna:#336600;
lebar:350 piksel;
filter:gelombang(tambahan=benar,freq=3,kekuatan cahaya=100,fase=45,kekuatan=20);
}
.xrays
{
font-family: lucida tulisan tangan miring;
ukuran font:72px;
gaya font: tebal;
warna:#336600;
lebar:350 piksel;
filter: sinar X;
}

Properti filterDeskripsiParameter dan nilaiContoh efek< /td >
AlphaSetel efek transparansiopasitas: tingkat transparansi, 0 hingga 100, 0 sepenuhnya transparan

gaya: Menentukan karakteristik bentuk area transparan, 0 adalah distribusi seragam; 1 linier; 2 radial; 3 persegi panjang
finishopasitas: mengatur transparansi di ujung gradien untuk mencapai efek gradien, nilainya adalah dari 0 hingga 100

startX, startY: koordinat awal efek transparansi gradien
finishX, finishY: koordinat akhir efek transparansi gradien

BlurMembuat efek buramtambahkan: Tentukan apakah gambar harus diubah menjadi efek buram, benar dan salah

arah: Mengatur arah keburaman, 0 derajat berarti vertikal ke atas, setiap 45 derajat adalah satuan, defaultnya adalah 270 derajat ke kiri
kekuatan: mewakili berapa lebar piksel yang dipengaruhi oleh keburaman, defaultnya adalah 5< /td>

SEMOGA BERHASIL !

ChromaSetel warna yang ditentukan menjadi transparanwarna: Tentukan warna transparanchroma

Contoh < /div>
DropShadowMembuat kerangka gambar offset, yaitu memberikan bayangancolor: warna proyeksi
offx, offy: bayangan di dalam x, offset arah y

positif: true membuat bayangan untuk piksel apa pun yang tidak transparan, false membuat bayangan untuk piksel transparan

contoh dropshadow

BalikHBalik HorizontalTidak Ada

Balik Horizontal

< /tr>
FlipVBalik VertikalTidak Ada

Balik Vertikal

< /tr>
CahayaTambahkan efek cahaya pada batas luar objekwarna: Menentukan warna cahaya

kekuatan: intensitas cahaya

Contoh GLOW

Abu-abuKurangi warna gambar dan ubah menjadi skala abu-abuTidak ada

BalikkanSepenuhnya membalikkan nilai warna, saturasi, dan kecerahan untuk menciptakan efek negatifTidak ada

CahayaMemproyeksikan cahaya pada objektidaktidak
MaskMembuat topeng transparan untuk suatu objekwarna: Menentukan warna topeng

Contoh MASKER

BayanganMembuat garis luar objek yang solid, yaitu efek bayanganwarna: warna proyeksi
arah: arah proyeksi < div class="shadows">Contoh BAYANGAN

GelombangGunakan riak sinusoidal untuk mengganggu gambar pada arah sumbu X dan sumbu Ytambahkan: true berarti mengganggu gambar dalam gelombang, false bukan mengganggunya

freq: Frekuensi pembangkitan riak (berapa banyak riak yang dihasilkan)
kekuatan cahaya: Meningkatkan efek riak yang dihasilkan (nilainya 0 hingga 100)

fase: Atur offset di awal gelombang sinus, umumnya 0, hingga 100
kekuatan: Atur amplitudo gelombang sinus

Contoh GELOMBANG
XrayHanya menampilkan garis luar objekTidak ada