سی ایس ایس کے ساتھ SVG فلٹرز شامل کریں

SVG ابتدائی 2000 کے بعد سے ہے، اور ابھی تک ابھی تک دلچسپ طریقے موجود ہیں کہ ڈیزائنرز اسے استعمال کرنے کے لئے تلاش کر رہے ہیں. اس سبق میں یہ فوکس اس فلٹر پر ہو گا جو SVG کے ذریعے لاگو ہوتے ہیں - لیکن SVG تصویر پر ان کو لاگو کرنے کے بجائے، ہم آپ کو کسی بھی باقاعدگی سے صفحہ مواد پر لاگو کیا جا سکتا ہے.

فلٹر SVG پر لاگو کیا جاتا ہے جس طرح سی ایس ایس کے ذریعہ اصل میں سی ایس ایس کے ذریعہ ہے، اس سے کہہ کر فلٹر کیا ہے. اسی خیال کا استعمال کرتے ہوئے، فلٹر باقاعدگی سے متن پر لاگو کیا جا سکتا ہے، مثال کے طور پر. اس کے بارے میں اچھا حصہ یہ ہے کہ آپ اپنے متن میں کچھ عظیم گرافیکل لگتے ہیں، جو ایک فوٹوشاپ فلٹرز کو لاگو کرنے اور تصویر کے طور پر بچانے کے ذریعہ صرف ممکنہ طور پر ممکن ہو گا. SVG فلٹر کا استعمال کرتے ہوئے، متن قابل رسائی اور منتخب ہے، کیونکہ یہ آپ کے صفحے پر صرف ایک باقاعدگی سے متن عنصر ہے.

یہ کوڈ یہاں متن میں ایک بے گھر ہونے کا نقشہ بنائے گا جس میں یہ پانی کی نمائش اور صفحے کے مرکزی خیال، موضوع کو فٹ کرنے کے لئے الفا نقشہ بھی شامل ہے. پھر ایک اور فلٹر تخلیق کیا جائے گا جس میں ایک مینو پانی کے بلبوں کے طور پر ظاہر ہوتا ہے، جس میں تھوڑا سا ایک دوسرے کے ساتھ رہتا ہے لیکن اس کے علاوہ بلب کے علاوہ وہ آگے بڑھتے ہیں. پھر یہ اس مخصوص صفحے کے مرکزی خیال، موضوع کے ساتھ رکھتا ہے اور دیگر مواد کو SVG فلٹرز کو لاگو کرنے کے لئے دو تخلیقی طریقوں سے پتہ چلتا ہے.

SVG کے بارے میں مزید سیکھنے میں دلچسپی رکھتے ہیں؟ ہمارے آرٹیکل پر ایک نظر ڈالیں آپ کو ویب پر SVG کے بارے میں جاننے کی ضرورت ہے . متبادل طور پر، ان میں سے ایک ٹھنڈا میں سے ایک کے ساتھ اپنی سائٹس کے لئے کچھ دلچسپی شامل کریں سی ایس ایس حرکت پذیری کی مثالیں .

• فائلوں کو ڈاؤن لوڈ کریں فائلوںیلو سے اس ٹیوٹوریل کے لئے

01. شروع کرو

سب سے پہلے، آپ کو براہ راست اوپر لنک کا استعمال کرتے ہوئے پروجیکٹ فائلوں کو ڈاؤن لوڈ کرنے کی ضرورت ہے. ایک بار جب آپ نے ایسا کیا ہے، ڈریگ شروع پروجیکٹ فولڈر آپ کے کوڈ IDE پر اور کھولیں index.html. صفحہ. آپ دیکھیں گے کہ کچھ صفحہ مواد پہلے ہی لکھا ہے. ہیڈر سیکشن کو پیدا کرنے کی ضرورت ہے، اور اس میں اس عنوان پر مشتمل ہوگا جو SVG فلٹر سے متاثر ہو گا. یہاں کے اندر اندر کوڈ شامل کریں جسم ٹیگ.

 & lt؛ ڈوی کلاس = "بی جی" اور جی ٹی؛
& lt؛ div class = "درمیانی" & gt؛
& lt؛ H2 کلاس = "عنوان" اور جی ٹی؛ پانی کے اندر
ساہسک پارک اور ایل ٹی؛ / H2 اور GT؛
& lt؛ div class = "intro_block" & gt؛ 

02. ہیڈر بند کرو

اب ہیڈر ختم ہو گیا ہے، اس کے لئے تمام متن کے ساتھ. اگر آپ اس وقت براؤزر میں اپنا صفحہ دیکھتے ہیں، تو آپ اس پر کچھ متن کے ساتھ پانی کی تصویر دیکھیں گے. عنوان، جو ابھی تک غیر جانبدار ہے، اس کو سجیلا کیا جا رہا ہے اور اس کے پاس ایس وی جی فلٹر لاگو ہوتا ہے.

 & lt؛ H3 کلاس = "ذیلی ہیڈ" اور جی ٹی؛ سمندر کا تجربہ
& lt؛ br & gt؛ کبھی نہیں پہلے اور ایل ٹی؛ / H3 اور GT؛
& lt؛ p کلاس = "انٹرو" & gt؛ پانی کے اندر
ساہسک پارک ایک تجربہ ہے
جو کچھ بھی آپ نے کبھی نہیں
تھا گہرائیوں کا سفر
سمندر اور درمیان میں چلتا ہے
سمندر کی زندگی! & lt؛ / p & gt؛
& lt؛ / div & gt؛
& lt؛ / div & gt؛
& lt؛ / div & gt؛ 

03. SVG فلٹر بنائیں

SVG کوڈ کسی بھی صفحے پر کہیں بھی شامل کیا جا سکتا ہے، لیکن یہ نہیں دیکھا جائے گا، یہ اختتامی جسم کی ٹیگ سے پہلے، نیچے دیئے جانے کے لئے یہ ایک اچھا خیال ہوسکتا ہے. SVG فلٹر لچکدار شور پیدا کرتا ہے. نوٹس فلٹر ایک ID ہے - یہ وہی ہے جو سی ایس ایس کو اس صفحے پر کسی دوسرے عنصر کو لاگو کرنے کے قابل بناتا ہے.

 & lt؛ svg xmlns = "http://www.w3.org/2000/svg" & gt؛
& lt؛ فلٹر ID = "بے گھر فلٹر" اور جی ٹی؛
& lt؛ Feturbulence کی قسم = "لچک"
BaseFrequency = "0.004" numoctaves =.
"2" نتیجہ = "لچک" / & gt؛
& lt؛ / فلٹر اور جی ٹی؛
& lt؛ / svg & gt؛ 

04. SVG چھپائیں

اس پر منتقل Page.css. اب فائل، اور باقی صفحے کے لئے تمام سی ایس ایس کوڈ کے اوپر، ہمارے نئے سی ایس ایس کہاں جائیں گے. یہاں SVG اس صفحے پر ظاہر نہیں کرنے کے لئے مقرر کیا جاتا ہے. سرخی دو ٹیگ اس پر لاگو صحیح ٹائپ فائی کرنے کے لئے مقرر کیا جاتا ہے.

 SVG {
ڈسپلے: کوئی بھی نہیں؛
}
H2 {
فونٹ سائز: 5.5VW؛
فونٹ خاندان: 'کریٹ راؤنڈ'، سیرف؛
} 

05. عنوان میں شامل کریں

The. لکیر کی اونچائی صفر پر مقرر کیا جاتا ہے کیونکہ بعد میں عنوان متحرک ہو جائے گا، لہذا صفحے پر اس کی سکیننگ پر کنٹرول کرنا ضروری ہے. یہ کچھ بھرتی بھی دی گئی ہے تاکہ اس کے ارد گرد صحیح جگہ کی جگہ کے ساتھ بیٹھا ہے اور رنگ بدل گیا ہے.

. ہیڈ لائن {
لائن اونچائی: 0؛
ڈسپلے: ان لائن بلاک؛
پڈنگنگ: 70px؛
رنگ: #CCFFFF؛ 

06. ہیڈ لائن ختم کرو

عنوان کی کلاس ختم کرنے میں، اگلے لائن پر لاگو ہوتا ہے بے گھر SVG میں ID متن میں. The. Translate3d. اس بات کو یقینی بناتا ہے کہ متن ہارڈ ویئر کو تیز ہوجاتا ہے. پیمانے پر تھوڑا سا تبدیل کر دیا گیا ہے کہ اس بات کا یقین کرنے کے لئے کہ جب نقل مکانی کا اطلاق ہوتا ہے تو اسے صحیح لگ رہا ہے.

 فلٹر: URL (#DisplacementFilter)؛
ٹرانسمیشن: ترجمہ 3D (0، 0، 0)؛
ٹرانسمیشن: اسکالی (1.8) گھومنے (-2 ڈی جی جی)؛
} 

07. اسے خارج کردیں

اگر آپ اس مرحلے پر فلٹر کی جانچ پڑتال کرتے ہیں تو اس وقت تک ٹرانسولنس مکمل طور پر متن کو تبدیل کرتا ہے. ٹھیک کرنا آسان ہے. index.html صفحہ میں فلٹر کوڈ پر واپس جائیں. یہ اسباب اور ذریعہ گرافک لیتا ہے، جو متن ہے، اور اسے بے گھر فلٹر کے طور پر لاگو ہوتا ہے. بیس فریکوئنسی اور استحکام میں آکٹپس کی تعداد کو تبدیل کرنے کی کوشش کریں.

 & lt؛ fedisplacementmap in2 = "urbulence" میں = "
ماخذ گرافک "اسکیل =" 30 "xchannelselector =" r "
YCHANNELSELECTOR = "جی" نتیجہ = "ڈسپلے" / & gt؛ 

08. کناروں کو نرم کرنا

کناروں کو پانی کے اثر کے لئے تھوڑا سخت نظر آتا ہے. یہ ایک Gaussian دھندلا کے ساتھ علاج کیا جا سکتا ہے. بے گھر ہونے کے نقشے کے بعد کوڈ شامل کریں. جب آپ اس صفحے کو تازہ کر دیتے ہیں، تو اس نے یقینی طور پر متن کو دھکا دیا ہے لیکن بے گھر ہونے والی ہے. پھر یہ عناصر ہیں جو اثر کو پیدا کرنے کے راستے پر مقرر کیا جا سکتا ہے.

 & lt؛ fegaussianblur میں = "Mourdagraphic"
stddeviation = "15" نتیجہ = "BLR" / & GT؛ 

09. دو کو جامع

پچھلا گوسو بلور کے نیچے یہاں جامع لائن شامل کریں. آپ دیکھیں گے کہ یہ دھندلا اور بے گھر ہونے کے ساتھ مل کر جوڑتا ہے، اور متن میں پانی کے مترجم اثر بھی پیدا کرتا ہے. یہ کناروں کو نرم کرنے کے لئے کچھ راستہ چلا گیا ہے، لیکن کافی نہیں. اگر یہ اصل دھندلا اس میں شامل کیا جاسکتا ہے تو یہ اچھا ہوگا.

 & lt؛ fecomposite = "blr" in2 = "disp" آپریٹر = "میں" نتیجہ = "کمپ" / & gt؛ 

10. بلور کو ضم

ایک ضم آپریشن بلور اثر کے ساتھ ضم کرنے کے لئے جامع کا حتمی نتیجہ قابل بناتا ہے. یہ اب لگتا ہے کہ یہ پس منظر کی تصویر کے ساتھ فٹ بیٹھتا ہے اور پانی کے ذریعے روشنی آنے والی روشنی کی لائنوں کے ساتھ فٹ ہونے لگتا ہے. متن کے بارے میں سب سے بہترین حصہ یہ ہے کہ یہ اب بھی منتخب اور اس صفحے کا حصہ ہے، اس کے برعکس اگر آپ نے فوٹوشاپ میں اسے پیدا کیا.

 & lt؛ femerge نتیجہ = "فائنل" & gt؛
& lt؛ femergenode in = "blr" / & gt؛
& lt؛ femergenode in = "comp" / & gt؛
& lt؛ / femerge & gt؛ 

11. ایک حرکت پذیری بنائیں

واپس جاؤ Page.css. فائل اور کلیدی خصوصیات میں شامل کریں جیسا کہ یہاں دکھایا گیا ہے. یہ صرف ایک صفر عمودی چوڑائی سے 5.5 عمودی چوڑائی سے فونٹ کا سائز بناتا ہے. شروع میں یہ عنوان پر لاگو کیا جائے گا، تاکہ اسکرین پر متن اور جگہ میں. جیسا کہ متن چلتا ہے، بے گھر ہونے کی لمبائی میں بھی تبدیل ہوجائے گی، پانی کی رگ دے.

 keyframes scaler {
{
فونٹ سائز: 0VW؛
}
{
فونٹ سائز: 5.5VW؛
}
} 

12. H2 سٹائل کو تبدیل کریں

The. H2. سٹائل پہلے مرحلہ میں شامل کیا گیا تھا 4. اس کوڈ کو اس نئے کوڈ کے ساتھ تبدیل کریں، جس میں سی ایس ایس حرکت پذیری کو سرنگ میں چار سیکنڈ سے زیادہ اضافہ ہوتا ہے. حرکت پذیری کو آخری کلیدی فریم پر رک جاتا ہے. اس کو محفوظ کریں اور اس کو براؤزر میں جانچ پڑتال کرنے کے لۓ اسے دیکھنے کے لۓ.

 H2 {
لائن اونچائی: 0؛
فونٹ سائز: 0VW؛
حرکت پذیری کا نام: اسکالر؛
حرکت پذیری کی مدت: 4S؛
حرکت پذیری بھر موڈ: فارورڈز؛
فونٹ خاندان: 'کریٹ راؤنڈ'، سیرف؛
} 

13. نیویگیشن شامل کریں

اب ایک دوسرے SVG فلٹر کا استعمال کرتے ہوئے ایک مناسب پانی بلب سے متاثرہ حرکت پذیری بناتے ہیں. جسم کے کوڈ کے سب سے اوپر کے لئے مندرجہ ذیل نیویگیشن مواد شامل کریں، اس سے پہلے کہ وہ سبق کے پہلے مرحلے میں شروع ہونے سے پہلے. یہ ایک حلقہ میں ہیمبرگر مینو کی بنیادی باتیں بنائے گی.

& lt؛ نیوی کلاس = "مینو" اور جی ٹی؛
& lt؛ ان پٹ کی قسم = "چیک باکس" href = "#" کلاس =
"مینو- اوپن" نام = "مینو-اوپن" id = "مینو-
کھولیں "/ & gt؛
& lt؛ لیبل کلاس = "مینو-اوپن بٹن"
کے لئے = "مینو-اوپن" اور جی ٹی؛
& lt؛ اسپین کلاس = "ہیمبرگر
ہیمبرگر -1 "اور جی ٹی؛ & lt؛ / span & gt؛
& lt؛ اسپین کلاس = "ہیمبرگر
ہیمبرگر -2 "اور جی ٹی؛ & lt؛ / span & gt؛
& lt؛ اسپین کلاس = "ہیمبرگر
ہیمبرگر -3 "اور جی ٹی؛ & lt؛ / span & gt؛
& lt؛ / لیبل اور جی ٹی؛ 

14. نیویگیشن ختم

اب باقی نیوی گیشن عناصر کو شامل کیا جا سکتا ہے. یہ فونٹ بہت اچھے کھلا ذریعہ آئکن لائبریری کا استعمال کرتا ہے، جس میں اس لائبریری کے سی ڈی این سے منسلک کرنے کے لئے سر سیکشن میں شامل کیا گیا ہے. ہر مینو سرکلر عنصر اس کے اندر آئیکن پڑے گا.

 & lt؛ ایک href = "#" کلاس = "مینو آئٹم" اور جی ٹی؛ & lt؛ i کلاس = "fa.
ایف اے کار "اور جی ٹی؛ & lt؛ / i & gt؛ & lt؛ / a & gt؛
& lt؛ ایک href = "#" کلاس = "مینو آئٹم" اور جی ٹی؛ & lt؛ I.
کلاس = "ایف اے ایف جہاز" اور جی ٹی؛ & lt؛ / i & gt؛ & lt؛ / & gt؛
& lt؛ ایک href = "#" کلاس = "مینو آئٹم" اور جی ٹی؛ & lt؛ I.
کلاس = "FA FA-Map" & GT؛ & lt؛ / i & gt؛ & lt؛ / & gt؛
& lt؛ ایک href = "#" کلاس = "مینو آئٹم" اور جی ٹی؛ & lt؛ I.
کلاس = "FA FA-SUCTCES" اور GT؛ & lt؛ / i & gt؛ & lt؛ / & gt؛
& lt؛ / naw & gt؛ 

15. نیا فلٹر شامل کریں

اس اثر کے لئے ایک اور فلٹر شامل کیا جا رہا ہے. SVG میں، کوڈ کے اختتامی فلٹر ٹیگ کے بعد اس کوڈ کو شامل کریں. یہاں اثرات ایک بہت ہی اسی طرح کے راستے میں تعمیر کیے جاتے ہیں. یہ مینو کے لئے مائع کی چپچپا بلبوں کی طرح دیکھنے کی اجازت دے گی.

 & lt؛ فلٹر ID = "shadowed-blob" & gt؛
& lt؛ fegaussianblur میں = "Mourdagraphic"
نتیجہ = "دھندلا" stddeviation = "20" / & gt؛
& lt؛ fecolormatrix میں = "دھندلا" موڈ =
"میٹرکس" اقدار = "1 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 18 -7 "
نتیجہ = "بلب" / & gt؛
& lt؛ fegaussianblur میں = "بلب"
stddeviation = "3" نتیجہ = "شیڈو" / & gt؛
& lt؛ fecolormatrix = "شیڈو" موڈ =
"میٹرکس" اقدار = "0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 1 -0.2 "
نتیجہ = "شیڈو" / & gt؛ 

16. فلٹر ختم کرو

فلٹر کا باقی یہاں شامل کیا جاتا ہے، جو اس اثر کو مکمل کرتا ہے جو مینو اشیاء کے ہر دائرے پر رکھا جائے گا. اس کے عناصر کو مائع بلب اثر شامل کرنے کا سبب بنتا ہے. اس صفحہ کو محفوظ کریں اور پھر 'design.css' فائل پر سوئچ کریں.

 & lt؛ feoffset = "شیڈو" DX = "0" DY = "2"
نتیجہ = "شیڈو" / & gt؛
& lt؛ fecomposite in2 = "شیڈو" میں = "بلب"
نتیجہ = "بلب" / & gt؛
& lt؛ fecomposite in2 = "بلب"
میں = "ذریعہگرافک" نتیجہ = "مکس" / & gt؛
& lt؛ / فلٹر اور جی ٹی؛ 

17. فلٹر کو لاگو کریں

سی ایس ایس کوڈ اب مختلف میں شامل کیا جا سکتا ہے design.css. ، صرف ایک ہی جگہ میں تمام نیویگیشن سی ایس ایس کے ساتھ ساتھ رکھنے کے لئے. کچھ کوڈ شامل کردی گئی ہے، لیکن یہاں فلٹر مینو پر لاگو ہوتا ہے، جو ایک مقررہ مینو ہوگا تاکہ یہ ہر وقت اسکرین پر موجود ہے.

 .menu {
فلٹر: یو آر ایل ("# شیڈڈ بلب")؛
پوزیشن: فکسڈ؛
Padding-top: 20px؛
پڈنگ-بائیں: 80px؛
چوڑائی: 650px؛
اونچائی: 150px؛
باکس-سائز: سرحدی باکس؛
فونٹ سائز: 20px؛
متن سیدھا: بائیں؛
} 

18. مینو کام کرو

مینو کھلی ہے جب مینو کو پوشیدہ تبدیل کرنے کے لئے مقرر کیا جاتا ہے. مینو اشیاء میں سے ہر ایک کا ہور عنصر پیدا ہوتا ہے تاکہ صارف اس پر چلتا ہے تو ایک تبدیلی ہے. مینو کے ہر بچے کو 0.4 سیکنڈ کی منتقلی دی جاتی ہے جب مینو اشیاء اپنی اصل پوزیشن میں واپس آ رہے ہیں.

 .مناؤ-اوپن {
ڈسپلے: کوئی بھی نہیں؛
}
.menu آئٹم: ہور {
پس منظر: # 47959 ایف؛
رنگ: # B2F0F8؛
}
.menu اشیاء: nth-child (3)، .menu-item: nth-
بچے (4)، .menu-item: nth-child (5)، .menu-
آئٹم: نتھ-بچے (6) {
منتقلی کی مدت: 400ms؛
} 

19. ہیمبرگر شامل کریں

برگر آئکن اس کو تبدیل کرکے دوسرے عناصر سے اوپر بلند ہے Z-index. . مینو میں اضافہ ہوتا ہے جب صارف اس پر چلتا ہے، اور مینو پر کلک کرنے کے لئے اب برگر کو ایک برگر کی تین لائنوں سے 'ایکس' سے متحرک کرنے کے لۓ، مینو کو ہٹانے کا اختیار ظاہر ہوتا ہے.

 .ہم - اوپن بٹن {
Z-index: 2؛
منتقلی کے وقت کی تقریب: کیوبک-
Bezier (0.175، 0.885، 0.32، 1.275)؛
منتقلی کی مدت: 400ms؛
ٹرانسمیشن: اسکیل (1.1، 1.1) ترجمہ 3D.
(0، 0، 0)؛
کرسر: پوائنٹر؛
}
.منا - اوپن بٹن: ہور {
ٹرانسمیشن: اسکیل (1.2، 1.2) ترجمہ 3D.
(0، 0، 0)؛
}

20. عناصر کو منتقل کریں

پہلا مینو آئٹم اصل میں مینو کا تیسرا بچہ ہے، کیونکہ اس سے پہلے ایک چیک باکس اور ہیمبرگر موجود ہے. یہ شامل کرنے کے بعد مینو صارف کی طرف سے کلک کرنے کے بعد پہلی مینو عنصر کو پوزیشن میں منتقل کرنے کے قابل بناتا ہے. ہر مینو عنصر تھوڑا سا وقت کے ساتھ باہر نکل جائے گا.

.menu-love: جانچ پڑتال + .menu- کھلی بٹن {
منتقلی وقت کی تقریب: لکیری؛
منتقلی کی مدت: 400ms؛
ٹرانسمیشن: اسکیل (0.8، 0.8) ترجمہ 3D.
(0، 0، 0)؛
}
.menu-love: جانچ پڑتال ~ .menu-item {
منتقلی کے وقت کی تقریب: کیوبک-
Bezier (0.165، 0.84، 0.44، 1)؛
}
.menu-love: جانچ پڑتال ~ .menu اشیاء: nth-child (3) {
منتقلی کی مدت: 390ms؛
ٹرانسمیشن: ترجمہ 3D (110px، 0، 0)؛
} 

21. باقی تحریک کا پتہ لگائیں

باقی مینو عناصر مختلف رفتار کے ساتھ باہر منتقل کر رہے ہیں. یہ عناصر کو حرکت پذیری کے ابتدائی مراحل میں مل کر رہنا قابل بناتا ہے، جو SVG فلٹر کا استعمال کرتے ہوئے، بلبلا مائع نظر دے گا. دستاویزات کو محفوظ کریں اور اپنے براؤزر میں مکمل نتائج دیکھیں.

 .ہم - اوپن: چیک کیا ~ .menu اشیاء: nth-child (4) {
منتقلی کی مدت: 490ms؛
ٹرانسمیشن: ترجمہ 3D (220px، 0، 0)؛
}
.menu-love: جانچ پڑتال ~ .menu اشیاء: nth-child (5) {
منتقلی کی مدت: 590ms؛
ٹرانسمیشن: ترجمہ 3D (330px، 0، 0)؛
}
.menu-love: جانچ پڑتال ~ .menu اشیاء: nth-child (6) {
منتقلی کی مدت: 690ms؛
ٹرانسمیشن: ترجمہ 3D (440px، 0، 0)؛
} 

یہ مضمون اصل میں تخلیقی ویب ڈیزائن میگزین میں شائع کیا گیا تھا ویب ڈیزائنر . مسئلہ 283 خریدیں یا یہاں ویب ڈیزائنر کو سبسکرائب کریں .

متعلقہ مضامین:

• جاوا اسکرپٹ کے ساتھ متحرک SVG
• SVG کے لئے مکمل گائیڈ
• GSAP کے ساتھ سپر چارج SVG حرکت پذیری