ตัวกรอง CSS - เอฟเฟกต์ข้อความและรูปภาพ
คุณสามารถใช้ฟิลเตอร์ CSS เพื่อเพิ่มเอฟเฟกต์พิเศษให้กับข้อความรูปภาพและลักษณะอื่น ๆ ของเว็บเพจโดยไม่ต้องใช้รูปภาพหรือกราฟิกอื่น ๆ Filters only work on Internet Explorer 4.0. หากคุณกำลังพัฒนาไซต์ของคุณสำหรับเบราว์เซอร์หลายตัวอาจไม่ควรใช้ตัวกรอง CSS เนื่องจากมีความเป็นไปได้ที่จะไม่ให้ประโยชน์ใด ๆ
ในบทนี้เราจะดูรายละเอียดของตัวกรอง CSS แต่ละรายการ ตัวกรองเหล่านี้อาจไม่ทำงานในเบราว์เซอร์ของคุณ
Alpha Channel
ตัวกรองอัลฟ่าแชนแนลจะปรับเปลี่ยนความทึบของวัตถุซึ่งทำให้มันกลมกลืนกับพื้นหลัง สามารถใช้พารามิเตอร์ต่อไปนี้ในตัวกรองนี้ -
| ซีเนียร์ | พารามิเตอร์และคำอธิบาย |
|---|---|
| 1 | opacity ระดับความทึบ 0 โปร่งใสเต็มที่ 100 ทึบแสงเต็มที่ |
| 2 | finishopacity ระดับความทึบที่ปลายอีกด้านของวัตถุ |
| 3 | style รูปร่างของการไล่ระดับสีทึบ 0 = เครื่องแบบ 1 = เชิงเส้น 2 = รัศมี 3 = สี่เหลี่ยม |
| 4 | startX X ประสานงานเพื่อเริ่มการไล่ระดับสีทึบ |
| 5 | startY Y ประสานงานเพื่อเริ่มการไล่ระดับสีทึบ |
| 6 | finishX X ประสานงานเพื่อให้การไล่ระดับสีทึบสิ้นสุดลง |
| 7 | finishY Y ประสานงานเพื่อให้การไล่ระดับสีทึบสิ้นสุดลง |
ตัวอย่าง
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png" alt = "CSS Logo"
style = "Filter: Alpha(Opacity=100,
FinishOpacity = 0,
Style = 2,
StartX = 20,
StartY = 40,
FinishX = 0,
FinishY = 0)" />
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: blue;
Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Tutorials</div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
โมชั่นเบลอ
Motion Blur ใช้เพื่อสร้างภาพเบลอหรือข้อความตามทิศทางและความแรง สามารถใช้พารามิเตอร์ต่อไปนี้ในตัวกรองนี้ -
| ซีเนียร์ | พารามิเตอร์และคำอธิบาย |
|---|---|
| 1 | add จริงหรือเท็จ หากเป็นจริงภาพจะถูกเพิ่มลงในภาพเบลอ และหากเป็นเท็จภาพจะไม่ถูกเพิ่มลงในภาพเบลอ |
| 2 | direction ทิศทางของความเบลอจะหมุนตามเข็มนาฬิกาปัดไปทีละ 45 องศา ค่าเริ่มต้นคือ 270 (ซ้าย) 0 = ด้านบน 45 = ขวาบน 90 = ขวา 135 = ขวาล่าง 180 = ด้านล่าง 225 = ซ้ายล่าง 270 = ซ้าย 315 = ซ้ายบน |
| 3 | strength จำนวนพิกเซลที่เบลอจะขยายออกไป ค่าเริ่มต้นคือ 5 พิกเซล |
ตัวอย่าง
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png" alt = "CSS Logo"
style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: blue;
Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials
</div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
ตัวกรอง Chroma
Chroma Filter ใช้เพื่อทำให้สีใด ๆ โปร่งใสโดยปกติจะใช้กับรูปภาพ คุณสามารถใช้กับแถบเลื่อนได้เช่นกัน สามารถใช้พารามิเตอร์ต่อไปนี้ในตัวกรองนี้ -
| ซีเนียร์ | พารามิเตอร์และคำอธิบาย |
|---|---|
| 1 | color สีที่คุณต้องการจะโปร่งใส |
ตัวอย่าง
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/images/css.gif"
alt = "CSS Logo" style = "Filter: Chroma(Color = #FFFFFF)">
<p>Text Example:</p>
<div style = "width: 580;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: #3300FF;
Filter: Chroma(Color = #3300FF)">CSS Tutorials</div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
วางเอฟเฟกต์เงา
Drop Shadow ใช้เพื่อสร้างเงาของวัตถุของคุณที่ออฟเซ็ตและสี X (แนวนอน) และ Y (แนวตั้ง) ที่ระบุ
สามารถใช้พารามิเตอร์ต่อไปนี้ในตัวกรองนี้ -
| ซีเนียร์ | พารามิเตอร์และคำอธิบาย |
|---|---|
| 1 | color สีในรูปแบบ #RRGGBB ของอายแชโดว์ |
| 2 | offX จำนวนพิกเซลที่เงาตกกระทบถูกหักล้างจากวัตถุภาพตามแนวแกน x จำนวนเต็มบวกจะย้ายเงาหล่นไปทางขวาส่วนจำนวนเต็มลบจะย้ายเงาตกไปทางซ้าย |
| 3 | offY จำนวนพิกเซลที่เงาตกกระทบถูกหักล้างจากวัตถุที่มองเห็นตามแกน y จำนวนเต็มบวกย้ายเงาหล่นลงมาจำนวนเต็มลบจะเลื่อนเงาขึ้น |
| 4 | positive หากเป็นจริงพิกเซลทึบแสงทั้งหมดของวัตถุจะมีหยดเงา หากเป็นเท็จพิกเซลโปร่งใสทั้งหมดจะมีอายแชโดว์ ค่าเริ่มต้นเป็นจริง |
ตัวอย่าง
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter:drop-shadow(2px 2px 1px #FF0000);">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter:drop-shadow(3px 3px 2px #000000);">CSS Tutorials</div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
พลิกเอฟเฟกต์
เอฟเฟกต์การพลิกใช้เพื่อสร้างภาพสะท้อนของวัตถุ สามารถใช้พารามิเตอร์ต่อไปนี้ในตัวกรองนี้ -
| ซีเนียร์ | พารามิเตอร์และคำอธิบาย |
|---|---|
| 1 | FlipH สร้างภาพสะท้อนในแนวนอน |
| 2 | FlipV สร้างภาพสะท้อนในแนวตั้ง |
ตัวอย่าง
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: FlipH">
<img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: FlipV">
<p>Text Example:</p>
<div style = "width: 300;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: FlipV">CSS Tutorials</div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
ผลเรืองแสง
เอฟเฟกต์เรืองแสงใช้เพื่อสร้างแสงเรืองรอบวัตถุ หากเป็นภาพโปร่งใสจะมีการสร้างเรืองแสงขึ้นรอบ ๆ พิกเซลทึบแสง สามารถใช้พารามิเตอร์ต่อไปนี้ในตัวกรองนี้ -
| ซีเนียร์ | พารามิเตอร์และคำอธิบาย |
|---|---|
| 1 | color สีที่คุณต้องการให้เรืองแสงเป็น |
| 2 | strength ความเข้มของการเรืองแสง (ตั้งแต่ 1 ถึง 255) |
ตัวอย่าง
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
ผลระดับสีเทา
Grayscale effect ใช้เพื่อแปลงสีของวัตถุเป็นสีเทา 256 เฉด ใช้พารามิเตอร์ต่อไปนี้ในตัวกรองนี้ -
| ซีเนียร์ | พารามิเตอร์และคำอธิบาย |
|---|---|
| 1 | grayscale แปลงสีของวัตถุเป็นสีเทา 256 เฉด |
ตัวอย่าง
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: grayscale(50%)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: grayscale(50%)">CSS Tutorials</div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
กลับผล
เอฟเฟกต์กลับด้านใช้เพื่อแมปสีของวัตถุกับค่าที่ตรงกันข้ามในสเปกตรัมสีกล่าวคือเพื่อสร้างภาพเชิงลบ ใช้พารามิเตอร์ต่อไปนี้ในตัวกรองนี้ -
| ซีเนียร์ | พารามิเตอร์และคำอธิบาย |
|---|---|
| 1 | Invert จับคู่สีของวัตถุกับค่าตรงข้ามในสเปกตรัมสี |
ตัวอย่าง
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: invert(100%)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: invert(100%)">CSS Tutorials</div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
เอฟเฟกต์หน้ากาก
เอฟเฟกต์มาสก์ใช้เพื่อเปลี่ยนพิกเซลโปร่งใสให้เป็นสีที่กำหนดและทำให้พิกเซลทึบแสงโปร่งใส ใช้พารามิเตอร์ต่อไปนี้ในตัวกรองนี้ -
| ซีเนียร์ | พารามิเตอร์และคำอธิบาย |
|---|---|
| 1 | color สีที่พื้นที่โปร่งใสจะกลายเป็น |
ตัวอย่าง
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Mask(Color=#00FF00)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Mask(Color=#00FF00)">CSS Tutorials
</div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
ฟิลเตอร์เงา
ฟิลเตอร์เงาใช้เพื่อสร้างเงาที่ถูกลดทอนตามทิศทางและสีที่ระบุ นี่คือฟิลเตอร์ที่อยู่ระหว่าง Dropshadow และ Glow สามารถใช้พารามิเตอร์ต่อไปนี้ในตัวกรองนี้ -
| ซีเนียร์ | พารามิเตอร์และคำอธิบาย |
|---|---|
| 1 | color สีที่คุณต้องการให้เงาเป็น |
| 2 | direction ทิศทางของความเบลอจะหมุนตามเข็มนาฬิกาปัดไปทีละ 45 องศา ค่าเริ่มต้นคือ 270 (ซ้าย) 0 = ด้านบน 45 = ขวาบน 90 = ขวา 135 = ขวาล่าง 180 = ด้านล่าง 225 = ซ้ายล่าง 270 = ซ้าย 315 = ซ้ายบน |
ตัวอย่าง
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family:
Arial Black;
color: red;
filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials
</div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
เอฟเฟกต์คลื่น
เอฟเฟกต์ของคลื่นใช้เพื่อทำให้วัตถุมีการบิดเบือนของคลื่นไซน์เพื่อให้ดูเป็นคลื่น สามารถใช้พารามิเตอร์ต่อไปนี้ในตัวกรองนี้ -
| ซีเนียร์ | พารามิเตอร์และคำอธิบาย |
|---|---|
| 1 | add ค่า 1 จะเพิ่มภาพต้นฉบับให้กับภาพที่โบกมือ แต่ 0 ไม่ได้ |
| 2 | freq จำนวนคลื่น |
| 3 | light ความแรงของแสงบนคลื่น (จาก 0 ถึง 100) |
| 4 | phase คลื่นไซน์ควรเริ่มที่ระดับใด (จาก 0 ถึง 100) |
| 5 | strength ความเข้มของผลคลื่น |
ตัวอย่าง
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000)
Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials
</div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
ผล X-Ray
เอฟเฟกต์ X-Ray เป็นสีเทาและทำให้ความลึกของสีเรียบขึ้น ใช้พารามิเตอร์ต่อไปนี้ในตัวกรองนี้:
| ซีเนียร์ | พารามิเตอร์และคำอธิบาย |
|---|---|
| 1 | xray สีเทาและปรับความลึกของสี |
ตัวอย่าง
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Xray">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Xray">CSS Tutorials
</div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -