सीएसएस फिल्टर - पाठ और छवि प्रभाव
आप छवियों या अन्य ग्राफिक्स का उपयोग किए बिना वेब पेज के पाठ, छवियों और अन्य पहलुओं पर विशेष प्रभाव जोड़ने के लिए सीएसएस फिल्टर का उपयोग कर सकते हैं। Filters only work on Internet Explorer 4.0। यदि आप कई ब्राउज़रों के लिए अपनी साइट विकसित कर रहे हैं, तो यह सीएसएस फिल्टर का उपयोग करने के लिए एक अच्छा विचार नहीं हो सकता है क्योंकि ऐसी संभावना है कि यह कोई लाभ नहीं देगा।
इस अध्याय में, हम प्रत्येक सीएसएस फिल्टर का विवरण देखेंगे। ये फ़िल्टर आपके ब्राउज़र में काम नहीं कर सकते हैं।
अल्फा चैनल
अल्फा चैनल फ़िल्टर वस्तु की अस्पष्टता को बदल देता है, जो इसे पृष्ठभूमि में मिला देता है। इस फिल्टर में निम्नलिखित मापदंडों का उपयोग किया जा सकता है -
| अनु क्रमांक। | पैरामीटर और विवरण |
|---|---|
| 1 | opacity अपारदर्शिता का स्तर। 0 पूरी तरह से पारदर्शी है, 100 पूरी तरह से अपारदर्शी है। |
| 2 | finishopacity ऑब्जेक्ट के दूसरे छोर पर अपारदर्शिता का स्तर। |
| 3 | style अपारदर्शिता ढाल का आकार। 0 = वर्दी 1 = रेखीय 2 = रेडियल 3 = आयताकार |
| 4 | startX एक्स अपारदर्शिता ढाल के लिए समन्वय शुरू करने के लिए। |
| 5 | startY वाई अस्पष्टता ढाल के लिए शुरू करने के लिए समन्वय। |
| 6 | finishX एक्स अपारदर्शिता ढाल को समाप्त करने के लिए समन्वय। |
| 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>यह निम्नलिखित परिणाम का उत्पादन करेगा -
धीमी गति
मोशन ब्लर का उपयोग दिशा और शक्ति के साथ धुंधला चित्र या पाठ बनाने के लिए किया जाता है। इस फिल्टर में निम्नलिखित मापदंडों का उपयोग किया जा सकता है -
| अनु क्रमांक। | पैरामीटर और विवरण |
|---|---|
| 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 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>यह निम्नलिखित परिणाम का उत्पादन करेगा -
छाया प्रभाव छोड़ें
ड्रॉप शेड का उपयोग निर्दिष्ट एक्स (क्षैतिज) और वाई (ऊर्ध्वाधर) ऑफसेट और रंग पर अपनी वस्तु की छाया बनाने के लिए किया जाता है।
इस फिल्टर में निम्नलिखित मापदंडों का उपयोग किया जा सकता है -
| अनु क्रमांक। | पैरामीटर और विवरण |
|---|---|
| 1 | color रंग, #RRGGBB प्रारूप में, ड्रॉपशेडो का। |
| 2 | offX पिक्सल की संख्या ड्रॉप शैडो विज़ुअल ऑब्जेक्ट से एक्स-एक्सिस के साथ ऑफसेट होती है। सकारात्मक पूर्णांक ड्रॉप छाया को दाईं ओर ले जाते हैं, नकारात्मक पूर्णांक ड्रॉप छाया को बाईं ओर ले जाते हैं। |
| 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>यह निम्नलिखित परिणाम का उत्पादन करेगा -
ग्रेस्केल प्रभाव
ग्रेस्केल प्रभाव का उपयोग वस्तु के रंगों को 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>यह निम्नलिखित परिणाम का उत्पादन करेगा -
छाया फ़िल्टर
छाया फिल्टर का उपयोग निर्दिष्ट दिशा और रंग में एक छायांकित छाया बनाने के लिए किया जाता है। यह एक फिल्टर है जो ड्रॉपशॉ और ग्लो के बीच स्थित है। इस फिल्टर में निम्नलिखित मापदंडों का उपयोग किया जा सकता है -
| अनु क्रमांक। | पैरामीटर और विवरण |
|---|---|
| 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>यह निम्नलिखित परिणाम का उत्पादन करेगा -
एक्स-रे प्रभाव
एक्स-रे प्रभाव ग्रेस्केल्स और रंग की गहराई को समतल करता है। इस फ़िल्टर में निम्न पैरामीटर का उपयोग किया जाता है:
| अनु क्रमांक। | पैरामीटर और विवरण |
|---|---|
| 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>यह निम्नलिखित परिणाम का उत्पादन करेगा -