เช่นคอลเลกชันตัวกรอง

คือทำให้เราพัฒนาสิ่งที่ปวดหัวในอดีต เขาแตกต่างจากคนอื่น เขาไม่สนับสนุนและเขามีบางสิ่งที่คนอื่นไม่สนับสนุน วันนี้ฉันจะแนะนำหนึ่งในคุณสมบัติของเขาสั้น ๆ - ตัวกรอง

ตัวกรอง CSS ส่วนใหญ่จะใช้เพื่อให้ได้เอฟเฟกต์พิเศษต่าง ๆ ของภาพ มีบทบาทที่วิเศษมากในการสร้างเว็บไซต์ เว็บไซต์สามารถทำให้สวยขึ้นผ่านตัวกรอง CSS ใน CSS แอตทริบิวต์ตัวกรองแสดงถึงความหมายของตัวกรองซึ่งสามารถตั้งค่าเอฟเฟกต์ตัวกรองของข้อความรูปภาพและตาราง

ไวยากรณ์: style = {ตัวกรอง: filtername (fparameter1, fparameter2 ... )}

หมายเหตุ: filtername เป็นชื่อของตัวกรอง, fparameter1, fparameter2 ฯลฯ เป็นพารามิเตอร์ของตัวกรอง

13 เอฟเฟกต์ตัวกรอง CSS

1. ตัวกรอง: Chroma - ทำสีพิเศษโปร่งใส

ไวยากรณ์: style = filter: chroma (color = color)

Tag: Color: #RRGGBBBB, ใด ๆ

2. ตัวกรอง: เบลอ-สร้างเอฟเฟกต์การเคลื่อนไหวความเร็วสูงนั่นคือเอฟเฟกต์เบลอ

ไวยากรณ์: style = ตัวกรอง: เบลอ (เพิ่ม = เพิ่ม, ทิศทาง = ทิศทาง, ความแข็งแรง = ความแข็งแรง)

หมายเหตุ: เพิ่ม: โดยทั่วไป 1 หรือ 0; ทิศทาง: มุม, 0-315 องศา, ความยาวขั้นตอนคือ 45 องศา; ความแข็งแกร่ง: มูลค่าของการเติบโตของผลกระทบโดยปกติ 5

3. ตัวกรอง: Flipv-สร้างภาพกระจกแนวตั้ง

ไวยากรณ์: style = filter: flipv

4. ตัวกรอง: อัลฟ่า-ตั้งค่าลำดับชั้นโปร่งใส

ไวยากรณ์: style = ตัวกรอง: alpha (ความทึบ = ความทึบ, finishOpacity = finishOpacity, style = style, startx = startx, starty = starty, finishx = finishx, finishy = finishy)

หมายเหตุ: ความทึบ: ค่าเริ่มต้นค่าคือ 0-100, 0 มีความโปร่งใส 100 คือภาพต้นฉบับ FinishPacity: ค่าเป้าหมาย; สไตล์: 1 หรือ 2 หรือ 3; startx: ค่าใด ๆ ; starty: ค่าใด ๆ

5. ตัวกรอง: FLIPH - สร้างภาพกระจกแนวนอน

ไวยากรณ์: style = filter: Fliph

6. ตัวกรอง: เรืองแสง-สง่าราศีด้านนอกขอบของวัตถุใกล้เคียง

ไวยากรณ์: style = filter: Glow (color = color, strength = strength)

ฉลาก: สี: สีส่องสว่าง; ความแข็งแกร่ง: ความเข้ม (0-100)

7. ตัวกรอง: หน้ากาก-สร้างหน้ากากโปร่งใสบนวัตถุ

ไวยากรณ์: style = filter: mask (color = color)

8. ตัวกรอง: ตัวกรอง: xray-make วัตถุดูเหมือนว่ามันจะส่องสว่างโดย X-ray

ไวยากรณ์: style = filter: xray

9. ตัวกรอง: สีคว่ำ

ไวยากรณ์: style = filter: invert

10. ตัวกรอง: Dropshadow - สร้างเงาคงที่ของวัตถุ

ไวยากรณ์: style = filter: dropshadow (color = color, Offx = Offx, Offy = Offy, Positive = Positive)

ฉลาก: สี: #RRGGBB รูปแบบโดยพลการ; OffX: ค่าเบี่ยงเบนแกน x; Offy: ค่าเบี่ยงเบนแกน y; บวก: 1 หรือ 0

11. ตัวกรอง: สีเทาเทาภาพ

ไวยากรณ์: style = filter: สีเทา

12. ตัวกรอง: เอฟเฟกต์การริบคลื่น

ไวยากรณ์: ตัวกรอง: คลื่น (เพิ่ม = เพิ่ม, freq = freq, lightstrength = strength, เฟส = เฟส, ความแข็งแรง = ความแข็งแรง)

หมายเหตุ: เพิ่ม: โดยทั่วไป 1 หรือ 0; Freq: ค่าการเสียรูป; LightStrength: เปอร์เซ็นต์การเสียรูป; เฟส: เปอร์เซ็นต์การเสียรูปแบบมุม; ความแข็งแกร่ง: ความแข็งแรงของการเสียรูป

13. Shadow-สร้างชดเชยเงาคงที่

ไวยากรณ์: ตัวกรอง: เงา (สี = สี, ทิศทาง = ทิศทาง)

ฉลาก: สี: #rrggbb รูปแบบ; ทิศทาง: มุม, 0-315 องศา, ขนาดขั้นตอนคือ 45 องศา

เมื่อใช้ตัวกรอง CSS สิ่งหนึ่งที่คุณควรทราบคือในรูปแบบการผลิตเว็บไซต์ปัจจุบันตัวกรองมักจะติดอยู่กับ DIV หากคุณเพียงแค่ตั้งค่า ID สำหรับ DIV ในรหัส HTML ตัวกรองจะไม่ทำงาน แอตทริบิวต์ ID นี้จะต้องกำหนดในสไตล์หรือ CSS มิฉะนั้นจะไม่ทำงาน

จำเป็นต้องใช้รหัสเพียงหนึ่งประโยคและสามารถเปลี่ยนรูปภาพได้อย่างอิสระเช่นเอกสาร PPT เมื่อสร้างเว็บไซต์ มันง่ายมาก! ก่อนที่จะแปลงเราต้องเข้าใจรหัสพื้นฐานสามรหัส:

การหมุน: style = ตัวกรอง: progid: dximagetransform.microsoft.basicimage (การหมุน: 1)

ลบสีพื้นหลัง: style = filter: chroma (color =#000000)

ตั้งค่าสีไล่ระดับสี: สไตล์ = ตำแหน่ง: สัมพัทธ์; ซ้าย: 0px; ด้านบน: 0px; ตัวกรอง: progid: dximagetransform.microsoft.gradient (startColorstr =#ff0000, endColorstr =#ffff00, gradientType = 1)

รีวิวที่ยอดเยี่ยม: คอลเลกชันที่สมบูรณ์ของเอฟเฟกต์ตัวกรอง CSS สำหรับการผลิตเว็บไซต์

ด้านล่างนี้เป็นคอลเลกชันที่สมบูรณ์ของตัวกรองการแปลงรูปภาพฉันหวังว่ามันจะช่วยเพื่อนได้ ~! - -

การแปลงแบบสุ่ม: progid: dximagetransform.microsoft.revealtrans (enabled = true, transition = 23)

สแควร์มีขนาดเล็กลง: progid: dximagetransform.microsoft.iris (irisstyle = square, motion = in)

สแควร์เริ่มใหญ่ขึ้น: progid: dximagetransform.microsoft.iris (irisstyle = square, motion = out)

Cross-smashing: progid: dximagetransform.microsoft.iris (irisstyle = cross, motion = in)

Cross-dive: progid: dximagetransform.microsoft.iris (irisstyle = cross, motion = out)

Star Shape มีขนาดใหญ่ขึ้น: progid: dximagetransform.microsoft.iris (irisstyle = star, motion = out)

รูปร่างของดาวค่อยๆเล็กลง: progid: dximagetransform.microsoft.iris (irisstyle = star, motion = in)

วงกลมมีขนาดใหญ่ขึ้น: progid: dximagetransform.microsoft.iris (Irisstyle = Circle, motion = out)

วงกลมค่อยๆเล็กลง: progid: dximagetransform.microsoft.iris (irisstyle = circle, motion = in)

รูปร่างเพชรค่อยๆเล็กลง: progid: dximagetransform.microsoft.iris (Irisstyle = Diamond, motion = in)

เพชรมีขนาดใหญ่ขึ้น: progid: dximagetransform.microsoft.iris (Irisstyle = Diamond, motion = out)

เครื่องหมายบวกมีขนาดใหญ่ขึ้น: progid: dximagetransform.microsoft.iris (irisstyle = plus, motion = out)

เครื่องหมายบวกค่อยๆมีขนาดเล็กลง: progid: dximagetransform.microsoft.iris (irisstyle = plus, motion = in)

การลบขึ้นด้านบน: โปรโตคอล: dximagetransform.microsoft.blinds (bands = 1, direction = up)

ลบลง: โปรโตคอล: dximagetransform.microsoft.blinds (แถบ = 1, ทิศทาง = ลง)

ลบซ้าย: โปรโตคอล: dximagetransform.microsoft.blinds (bands = 1, ทิศทาง = ซ้าย)

ลบไปทางขวา: โปรโตคอล: dximagetransform.microsoft.blinds (bands = 1, ทิศทาง = ขวา)

ดึงกลับจากกลางและขวาตรงกลาง: progid: dximagetransform.microsoft.barn (motion = in, การวางแนว = แนวตั้ง)

สุ่มละลาย: progid: dximagetransform.microsoft.randomdissolve (enable = true)

พื้นที่ส่วนกลางถูกขยายขึ้นและลง: progid: dximagetransform.microsoft.barn (motion = out, การวางแนว = แนวนอน)

ขยายซ้ายและขวาตรงกลาง: progid: dximagetransform.microsoft.barn (motion = out, การวางแนว = แนวตั้ง)

เส้นแนวนอนแบบสุ่ม: progid: dximagetransform.microsoft.randombars (การวางแนว = แนวนอน)

แบบสุ่มแนวตั้ง: Progid: Dximagetransform.microsoft.randombars (การวางแนว = แนวตั้ง)

การหดตัวกลางตอนบนและล่าง: progid: dximagetransform.microsoft.barn (motion = in, การวางแนว = แนวนอน)

การแปลงการไล่ระดับสีมาตรฐาน: BlendTrans (enabled = true, เปอร์เซ็นต์ = 10)

การเปลี่ยนการไล่ระดับสีแบบปรับได้: progid: dximagetransform.microsoft.fade (enabled = ture, ทับซ้อน = 1.0)

แทรกไปที่ด้านล่างขวา: โปรโตคอล: dximagetransform.microsoft.inset (enabled = ture)

ซ่อนยืด: progid: dximagetransform.microsoft.stretch (stretchstyle = ซ่อน)

progid: dximagetransform.microsoft.stretch (stretchstyle = push)

การยืดแบบโรตารี่: progid: dximagetransform.microsoft.stretch (stretchstyle = สปิน)

Anti-clock: Progid: Dximagetransform.microsoft.radialwipe (Wipestyle = Wedge)

รังสีรังสี: progid: dximagetransform.microsoft.radialwipe (Wipestyle = Radial)

Mosaic Effect: Progid: Dximagetransform.microsoft.pixelate (maxsquare = 20)

นาฬิกา: progid: dximagetransform.microsoft.radialwipe (Wipestyle = นาฬิกา)

ซ้ายล่างของบันได: progid: dximagetransform.microsoft.strips (motion = ซ้าย)

ขวาบนของบันได: progid: dximagetransform.microsoft.strips (motion = rightup)

ซ้ายบนของบันได: progid: dximagetransform.microsoft.strips (motion = leftup)

ด้านล่างขวาของบันได: Progid: Dximagetransform.microsoft.strips (motion = ขวา)

การหดตัวของเกลียว: progid: dximagetransform.microsoft.spiral (gridsizex = 20, gridsizey = 20)

การหมุนของกังหันลม: Progid: dximagetransform.microsoft.wheel (ซี่ = 20)

การบิดรูปตัว Z: progid: dximagetransform.microsoft.zigzag (gridsizex = 20, gridsizey = 20)

ｈblinds: progid: dximagetransform.microsoft.blinds (bands = 6, direction = down)

: progid: dximagetransform.microsoft.blinds (bands = 6, direction = up)

: progid: dximagetransform.microsoft.blinds (bands = 60, direction = down)

: progid: dximagetransform.microsoft.blinds (bands = 60, direction = up)

V Blinds: Progid: dimationagetransform.microsoft.blinds (bands = 6, direction = ขวา)

: progid: dximagetransform.microsoft.blinds (bands = 6, direction = ซ้าย)

: progid: dximagetransform.microsoft.blinds (bands = 60, direction = ขวา)

: progid: dximagetransform.microsoft.blinds (bands = 60, direction = ซ้าย)

Switched Slide: Progid: Dximagetransform.microsoft.slide (slidestyle = swap, bands = 1)

: progid: dximagetransform.microsoft.slide (slidestyle = swap, bands = 20)

Push Slide: Progid: Dximagetransform.microsoft.slide (slidestyle = push, bands = 1)

: progid: dximagetransform.microsoft.slide (slidestyle = push, bands = 20)

ซ่อนสไลด์: progid: dximagetransform.microsoft.slide (slidestyle = hide, bands = 1)

: progid: dximagetransform.microsoft.slide (slidestyle = hide, bands = 20)

ความก้าวหน้าฟัซซี่: progid: dximagetransform.microsoft.gradientwipe (gradientize = 0.5, wipestyle = 0, motion = forward)

: progid: dximagetransform.microsoft.gradientwipe (gradientsize = 0.5, wipestyle = 0, motion = reverse)

: progid: dximagetransform.microsoft.gradientwipe (gradientsize = 0.5, wipestyle = 1, motion = forward)

: progid: dximagetransform.microsoft.gradientwipe (gradientsize = 0.5, wipestyle = 1, motion = reverse)

กระดานหมากรุกแนวตั้ง: progid: dximagetransform.microsoft.checkerboard (ทิศทาง = ขวา, squaresx = 12, squaresy = 12)

: progid: dximagetransform.microsoft.checkerboard (ทิศทาง = ซ้าย, squaresx = 12, squaresy = 12)

: progid: dximagetransform.microsoft.checkerboard (ทิศทาง = ขวา, squaresx = 2, squaresy = 2)

: progid: dximagetransform.microsoft.checkerboard (ทิศทาง = ซ้าย, squaresx = 2, squaresy = 2)

: progid: dximagetransform.microsoft.checkerboard (ทิศทาง = ขวา, squaresx = 60, squaresy = 60)

: progid: dximagetransform.microsoft.checkerboard (ทิศทาง = ซ้าย, squaresx = 60, squaresy = 60)

กระดานหมากรุกแนวนอน: progid: dximagetransform.microsoft.checkerboard (ทิศทาง = ลง, squaresx = 12, squaresy = 12)

: progid: dximagetransform.microsoft.checkerboard (ทิศทาง = up, squaresx = 12, squaresy = 12)

: progid: dximagetransform.microsoft.checkerboard (ทิศทาง = ลง, squaresx = 2, squaresy = 2)

: progid: dximagetransform.microsoft.checkerboard (ทิศทาง = up, squaresx = 2, squaresy = 2)

: progid: dximagetransform.microsoft.checkerboard (ทิศทาง = ลง, squaresx = 60, squaresy = 60)

: progid: dximagetransform.microsoft.checkerboard (ทิศทาง = up, squaresx = 60, squaresy = 60)