ตัวกรอง 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>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -