IE جعلنا نطور شيئًا كان يمثل صداعًا في الماضي. كان مختلفا عن الآخرين. لم يدعمه ، وكان لديه شيء لم يدعمه الآخرون. اليوم سأقدم بإيجاز إحدى ميزاته - المرشحات.
تستخدم مرشحات CSS بشكل أساسي لتحقيق مؤثرات خاصة مختلفة من الصور. لها دور سحري للغاية في صنع الموقع. يمكن جعل الموقع أكثر جمالا من خلال مرشحات CSS. في CSS ، تمثل سمة المرشح معنى المرشح ، والذي يمكنه ضبط تأثيرات المرشح للنص والصور والجداول.
بناء الجملة: style = {filter: flittername (fparameter1 ، fparameter2 ...)}
ملاحظة: اسم Filtername هو اسم المرشح ، fparameter1 ، fparameter2 ، وما إلى ذلك هي معلمات المرشح.
13 تأثيرات مرشح CSS
1. مرشح: Chroma - جعل الألوان الخاصة شفافة.
بناء الجملة: النمط = مرشح: chroma (اللون = اللون)
العلامة: اللون: #rrggbb تنسيق ، أي.
2. مرشح: طمس تأثير حركة عالية السرعة ، أي تأثير ضبابي.
بناء الجملة: النمط = مرشح: تمويه (إضافة = إضافة ، اتجاه = الاتجاه ، القوة = القوة)
ملاحظة: إضافة: بشكل عام 1 ، أو 0 ؛ الاتجاه: زاوية ، 0-315 درجة ، طول الخطوة 45 درجة ؛ القوة: قيمة نمو تأثير ، عادة 5.
3. مرشح: FLIPV-خلق صورة المرآة العمودية.
بناء الجملة: النمط = مرشح: flipv
4. مرشح: التسلسل الهرمي الشفاف ألفا-
بناء جملة: النمط = مرشح: ألفا (التعتيم = التعتيم ، الانتهاء من الانتهاء = الانتهاء من النمط = النمط ، startx = startx ، starty = starty ، finishx = finishx ، finishy = finishy)
ملاحظة: العتامة: قيمة البدء ، القيمة 0-100 ، 0 شفافة ، 100 هي الصورة الأصلية ؛ الانتهاء من: القيمة المستهدفة ؛ النمط: 1 أو 2 أو 3 ؛ startx: أي قيمة ؛ البداية: أي قيمة
5. مرشح: Fliph - إنشاء صورة مرآة أفقية.
بناء الجملة: النمط = المرشح: Fliph
6. مرشح: Glow-Glory Glory خارج حافة الكائنات القريبة.
بناء الجملة: نمط = مرشح: توهج (اللون = اللون ، القوة = القوة)
الملصق: اللون: لون مضيئة ؛ القوة: الشدة (0-100)
7. مرشح: قناع-إنشاء قناع شفاف على الكائن.
بناء الجملة: نمط = مرشح: قناع (لون = لون)
8. مرشح: مرشح: Xray-Make الكائن يبدو وكأنه مضاء بالأشعة السينية.
بناء الجملة: النمط = مرشح: Xray
9. مرشح: لون العكس.
بناء الجملة: النمط = المرشح: عكسي
10. مرشح: Dropshadow - يخلق ظلًا ثابتًا لكائن.
بناء الجملة: النمط = مرشح: dropshadow (اللون = اللون ، Offx = Offx ، Offy = Offy ، إيجابي = موجب)
التسمية: اللون: #rrggbb تنسيق ، تعسفي ؛ OFFX: قيمة انحراف المحور X ؛ Offy: قيمة انحراف المحور ؛ إيجابي: 1 أو 0.
11. مرشح: الرمادي الرمادي الصورة.
بناء الجملة: النمط = مرشح: رمادي
12. مرشح: تأثير إعادة الطرد الموجي.
بناء الجملة: مرشح: موجة (إضافة = إضافة ، Freq = Freq ، LightStrength = القوة ، المرحلة = الطور ، القوة = القوة)
ملاحظة: إضافة: بشكل عام 1 ، أو 0 ؛ Freq: قيمة التشوه ؛ LightStrength: نسبة التشوه ؛ المرحلة: نسبة تشوه الزاوية ؛ القوة: قوة التشوه.
13. شادو-إزاحة الظل الثابت.
بناء الجملة: مرشح: الظل (اللون = اللون ، الاتجاه = الاتجاه)
التسمية: اللون: #rrggbb format ؛ الاتجاه: زاوية ، 0-315 درجة ، حجم الخطوة هو 45 درجة.
عند استخدام مرشحات CSS ، هناك شيء واحد يجب أن تلاحظه هو أنه في تصميم إنتاج موقع الويب الحالي ، غالبًا ما يتم ربط المرشحات بـ DIV. إذا قمت ببساطة بتعيين معرف لـ DIV في رمز HTML ، فلن يعمل المرشح. يجب تعريف سمة المعرف هذه بأناقة أو CSS ، وإلا فلن تعمل.
هناك حاجة إلى جملة واحدة فقط من التعليمات البرمجية ، ويمكن تبديل الصور بحرية مثل مستندات PPT عند إنشاء موقع ويب. الأمر بسيط للغاية! قبل التحويل ، نحتاج إلى فهم ثلاثة رموز أساسية:
الدوران: نمط = مرشح: progid: dimixagetransform.microsoft.basicimage (الدوران: 1)
إزالة لون الخلفية: النمط = مرشح: chroma (اللون =#000000)
تعيين لون التدرج اللون: style = الموضع: النسبية ؛ اليسار: 0px ؛ الأعلى: 0px ؛ مرشح: progid: dimizageTransform.microsoft.gradient (StartColorstr =#ff0000 ، endcolorstr =#ffff00 ، gradienttype = 1)
مراجعة رائعة: مجموعة كاملة من تأثيرات مرشح CSS لإنتاج موقع الويب
فيما يلي مجموعة كاملة من مرشحات تحويل الصور ، آمل أن تساعد الأصدقاء ~! ! !
التحول العشوائي: progid: dximagetransform.microsoft.revealtrans (تمكين = صحيح ، الانتقال = 23)
Square أصبح أصغر: progid: dimizageTransform.microsoft.iris (IrisStyle = Square ، Motion = in)
Square يزداد: progid: dximagetransform.microsoft.iris (IrisStyle = Square ، Motion = Out)
المتقاطع: progid: dimixagetransform.microsoft.iris (IrisStyle = Cross ، Motion = in)
Crossive: progid: dximagetransform.microsoft.iris (IrisStyle = Cross ، Motion = Out)
شكل النجوم يزداد: progid: dximagetransform.microsoft.iris (IrisStyle = star ، motion = out)
شكل النجوم أصغر تدريجيا: progid: dimizageTransform.microsoft.iris (IrisStyle = Star ، Motion = in)
الدائرة تزداد: progid: dimizageTransform.microsoft.iris (IrisStyle = Circle ، Motion = Out)
دائرة أصغر تدريجيا: progid: dimixagetransform.microsoft.iris (IrisStyle = Circle ، Motion = in)
شكل الماس أصغر تدريجيا: progid: dimixagetransform.microsoft.iris (IrisStyle = Diamond ، Motion = in)
يزداد الماس: progid: dimixagetransform.microsoft.iris (IrisStyle = Diamond ، Motion = Out)
علامة Plus تزداد: progid: dimixagetransform.microsoft.iris (IrisStyle = plus ، motion = out)
تصبح علامة Plus تدريجياً أصغر: progid: dimixagetransform.microsoft.iris (IrisStyle = plus ، motion = in)
المسح الصعودي: البروتوكول: dximagetransform.microsoft.blinds (النطاقات = 1 ، الاتجاه = UP)
المسح لأسفل: البروتوكول: dximagetransform.microsoft.blinds (النطاقات = 1 ، الاتجاه = أسفل)
المسح اليسار: البروتوكول: dximagetransform.microsoft.blinds (النطاقات = 1 ، الاتجاه = يسار)
تمحو إلى اليمين: البروتوكول: dximagetransform.microsoft.blinds (نطاقات = 1 ، الاتجاه = يمين)
التراجع من اليسار واليمين: progid: dimixagetransform.microsoft.barn (الحركة = في ، الاتجاه = عمودي)
ذوبان عشوائي: progid: dximagetransform.microsoft.randomDissolve (تمكين = صحيح)
يتم توسيع المنطقة المركزية لأعلى ولأسفل: progid: dimixagetransform.microsoft.barn (Motion = Out ، الاتجاه = أفقي)
قم بتوسيع اليسار واليمين في الوسط: progid: dximagetransform.microsoft.barn (الحركة = خارج ، الاتجاه = عمودي)
الخط الأفقي العشوائي: progid: dimixagetransform.microsoft.randombars (الاتجاه = أفقي)
الخط العشوائي العشوائي: progid: dximagetransform.microsoft.randombars (الاتجاه = عمودي)
الانكماش العلوي والسفلي المتوسط: progid: dimixagetransform.microsoft.barn (الحركة = في ، الاتجاه = أفقي)
تحويل التدرج القياسي: blendtrans (تمكين = صواب ، النسبة المئوية = 10)
تحويل التدرج القابل للتعديل: progid: dimizageTransform.microsoft.fade (تمكين = ture ، تداخل = 1.0)
إدراج إلى أسفل اليمين: البروتوكول: dximagetransform.microsoft.ins (تمكين = ture)
إخفاء التمدد: progid: dimizageTransform.microsoft.stretch (stretchstyle = Hide)
progid: dimixagetransform.microsoft.stretch (stretchstyle = push)
التمدد الدوار: progid: dximagetransform.microsoft.stretch (stretch -style = spin)
anti-clock: progid: dximagetransform.microsoft.radialwipe (wipestyle = wedge)
أشعة الإشعاع: progid: dimizageTransform.Microsoft.RadialWipe (wipestyle = شعاعي)
تأثير الفسيفساء: progid: dximagetransform.microsoft.pixelate (maxsquare = 20)
الساعة: progid: dximagetransform.microsoft.radialwipe (wipestyle = clock)
أسفل يسار السلم: progid: dximagetransform.microsoft.strips (الحركة = اليسار)
أعلى يمين السلم: progid: dimixagetransform.microsoft.strips (الحركة = اليمين)
أعلى يسار السلم: progid: dximagetransform.microsoft.strips (Motion = Leftup)
يمين السلم السفلي: progid: dximagetransform.microsoft.strips (حركة = Quitddown)
الانكماش الحلزوني: progid: dimizageTransform.Microsoft.Spiral (Gridsizex = 20 ، Gridsizey = 20)
دوران Windmill: progid: dimixagetransform.microsoft.wheel (المتحدث = 20)
التحولات على شكل z: progid: dimizageTransform.microsoft.zigzag (Gridsizex = 20 ، Gridsizey = 20)
ｈblinds: progid: dximagetransform.microsoft.blinds (نطاقات = 6 ، اتجاه = أسفل)
: progid: dximagetransform.microsoft.blinds (نطاقات = 6 ، الاتجاه = UP)
: progid: dximagetransform.microsoft.blinds (نطاقات = 60 ، الاتجاه = أسفل)
: progid: dximagetransform.microsoft.blinds (نطاقات = 60 ، الاتجاه = UP)
الستائر الخامس: progid: dximagetransform.microsoft.blinds (النطاقات = 6 ، الاتجاه = يمين)
: progid: dximagetransform.microsoft.blinds (نطاقات = 6 ، الاتجاه = يسار)
: progid: dximagetransform.microsoft.blinds (نطاقات = 60 ، الاتجاه = يمين)
: progid: dximagetransform.microsoft.blinds (نطاقات = 60 ، الاتجاه = يسار)
Switch Slide: Progid: dimizageTransform.microsoft.slide (slidestyle = swap ، نطاقات = 1)
: progid: dximagetransform.microsoft.slide (slidestyle = swap ، العصابات = 20)
PUSH SLIDE: PROGID: DXIMAagetransform.microsoft.slide (Slidestyle = push ، bands = 1)
: progid: dximagetransform.microsoft.slide (slidestyle = push ، bands = 20)
إخفاء الشريحة: progid: dximagetransform.microsoft.slide (Slidestyle = Hide ، العصابات = 1)
: progid: dximagetransform.microsoft.slide (slidestyle = Hide ، bands = 20)
التقدم الضخم: progid: dimizageTransform.microsoft.gradientwipe (BradientSize = 0.5 ، wipestyle = 0 ، Motion = forward)
: progid: dximageTransform.microsoft.gradientwipe (التدرجات = 0.5 ، wipestyle = 0 ، الحركة = عكسي)
: progid: dximageTransform.microsoft.gradientwipe (BradientSize = 0.5 ، wipestyle = 1 ، motion = forward)
: progid: dximagetransform.microsoft.gradientwipe (التدرجات = 0.5 ، wipestyle = 1 ، الحركة = عكس)
الشطرنج العمودي: progid: dimixagetransform.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 ، مربع = 2)
: progid: dximageTransform.Microsoft.Checkerboard (الاتجاه = يمين ، squaresx = 60 ، squaresy = 60)
: progid: dximagetransform.microsoft.checkerboard (الاتجاه = اليسار ، squaresx = 60 ، مربع = 60)
الشطرنج الأفقي: progid: dimixagetransform.microsoft.checkerboard (الاتجاه = أسفل ، squaresx = 12 ، squaresy = 12)
: progid: dximageTransform.microsoft.Checkerboard (Direction = Up ، Squaresx = 12 ، Squaresy = 12)
: progid: dximagetransform.microsoft.checkerboard (Direction = Down ، Squaresx = 2 ، Squaresy = 2)
: progid: dimizageTransform.Microsoft.Checkerboard (Direction = Up ، Squaresx = 2 ، Squaresy = 2)
: progid: dximageTransform.Microsoft.Checkerboard (Direction = Down ، Squaresx = 60 ، Squaresy = 60)
: progid: dximageTransform.Microsoft.Checkerboard (Direction = Up ، Squaresx = 60 ، Squaresy = 60)