آپ کی ویب ترتیب کو ہلا دینے کے لئے سی ایس ایس کی ترکیبیں

مواد

• 01. سی ایس ایس ملاوٹ کے طریقوں کو دریافت کریں
• 02. ایک ماسک شامل کریں
• 03. تراشنے سے نہ گھبرائیں
• 04. باکس کے باہر سوچئے
• 05. حرکت پذیری کے لئے ایس وی جی آزمائیں
• 06. کچھ شور مچائیں
• 07. کولیج کے ساتھ تخلیقی بنائیں
• 08. براؤزر کی حمایت کو مت بھولنا

آپ کی ویب سائٹ کے ڈیزائن کو ہلا دینے کے ل ways سی ایس ایس کے نئے چالوں کو سیکھنا ایک بہترین طریقہ ہے۔ اگر آپ کچھ عرصے سے ویب انڈسٹری میں کام کر رہے ہیں تو ، آپ کو محسوس ہوسکتا ہے کہ آپ ہمیشہ اسی ترتیب کو کوڈنگ یا ڈیزائننگ کر رہے ہیں۔ رجحانات آتے اور جاتے ہیں لیکن زیادہ تر سائٹس یکساں نظر آتی ہیں - 12 کالم گرڈ ، دو اور تین کالم والے باکسڈ لے آؤٹ اور اسی طرح کی شکلوں کا استعمال کرتے ہوئے۔ نہ صرف یہ دیکھنے کے لئے تھوڑا سا بور ہو رہا ہے ، بلکہ صارف کا تجربہ بھی اتنا اچھا نہیں ہے۔

اس کو تبدیل کرنے کا ایک طریقہ یہ ہے کہ ڈیجیٹل ڈیزائن سے ماورا کھیتوں یا علاقوں سے انحصار حاصل کیا جا.۔ اپنی ویب سائٹ کے لئے پرنٹ یا ادارتی ڈیزائن کیوں نہیں استعمال کرتے ہیں؟ آپ نئی سی ایس ایس خصوصیات کے ساتھ پرانی عادات کو توڑ سکتے ہیں جو امکانات کی ایک نئی دنیا کھولتی ہے۔ آپ کو متاثر کرنے کیلئے ایک مہذب ویب سائٹ بلڈر استعمال کرسکتے ہیں۔

اگر آپ کو مزید ویب ڈیزائن کا مشورہ پسند ہے تو ، کامل ویب سائٹ لے آؤٹ کے بارے میں ہماری گائیڈ ملاحظہ کریں ، یا اٹامک ڈیزائن پر برش کریں۔ نیز ، صارف کے تجربے کے اشارے یہ ہیں جو آپ کو جاننے کی ضرورت ہے۔

• 2018 میں آپ کے ورک فلو کو تیز کرنے کے لئے 30 ویب ڈیزائن ٹولز

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

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

01. سی ایس ایس ملاوٹ کے طریقوں کو دریافت کریں

ڈوئٹون امیجری اور کولوریسر اثرات ویب ڈیزائن کے سب سے زیادہ گرم رجحانات ہیں۔ وہ اسپاٹائف کی بدولت پورے ویب میں وسیع پیمانے پر مقبول ہیں ، جو ان کو مستحکم طریقے سے نافذ کرتا ہے۔ اب آپ آخر کار اپنے اثاثوں کے متعدد مختلف رنگوں کے ورژن بنانا بند کرسکتے ہیں ، اور اثرات کو براہ راست براؤزر میں لاگو کرسکتے ہیں۔

سی ایس ایس مرکب کے طریقوں کو استعمال کرنا نہ صرف ویب سائٹوں میں موجود مواد کی شکل کو یکجا کرنے کا ایک بہترین طریقہ ہے ، بلکہ یہ آپ کو کسی بھی رنگ کے مختلف ورژن ترتیب دینے کا اہل بناتا ہے ، جس میں سی ایس ایس میں صرف ایک ہی قیمت کو تبدیل کیا جاتا ہے: رنگین۔ اسکرین ، اوورلے ، لائٹ اور گہرا سمیت 15 امکانی امتزاجی وضع کی اقدار ہیں۔

نفاذ کے متعدد طریقے ہیں ، عنصر کی قسم پر منحصر ہے کہ آپ اس پر اثر ڈالنا چاہتے ہیں۔ مثال کے طور پر ، آپ کنٹینر کے پس منظر - آمیزہ موڈ پر پس منظر کی تصویر اور پس منظر کا رنگ سیٹ استعمال کرسکتے ہیں۔ سیاہ، یا چھدو عناصر کے ساتھ ایک اتبشایی تخلیق کریں (یعنی۔ : پہلے اور : کے بعد) امیجنگ اثر حاصل کرنے کے ل image امیج ریپر پر۔

قابل اطمینان بخش ڈیوٹون اثر حاصل کرنے کے ل it's ، آپ کو ایک اعلی برعکس سیاہ اور سفید رنگ کی شبیہہ استعمال کرنے کی سفارش کی جاتی ہے۔ آپ گریس اسکیل اور اعلی کے برعکس سطح کو مرتب کرنے کے لئے سی ایس ایس فلٹرز کو لاگو کرکے ایسا کرسکتے ہیں۔

ایک اور عمدہ پراپرٹی ہے مکس - آمیزہ موڈ، جو آپ کو اس کے براہ راست والدین کے مواد یا پس منظر کے ساتھ عنصر کے مواد کو گھل ملانے دیتا ہے۔ یہ خاص طور پر اوورلیپ لیٹرنگ پر اچھا کام کرتا ہے۔ آپ پوچھ سکتے ہیں کہ اس معاملے میں ہم صرف دھندلاپن کو ایڈجسٹ کیوں نہیں کرتے ہیں - جواب آسان ہے: ہم صرف شفافیت کا استعمال کرتے ہوئے رنگین آسانی سے آسانی سے کھو سکتے ہیں۔

آپ کے ویب براؤزر میں براہ راست تدوین کی جانے والی تصاویر کا دور آرہا ہے ، لیکن ہم براؤزر کی مطابقت کو نہیں بھول سکتے ہیں - اس وقت ملاوٹ کے طریقوں کے لئے تعاون محدود ہے۔ اور ان تصاویر کو محفوظ رکھنے کے ل make ، یقینی بنائیں کہ آپ اپنے کلاؤڈ اسٹوریج کے اختیارات تلاش کرتے ہیں۔

02. ایک ماسک شامل کریں

نقاب پوش آپ کے براؤزر کو بتاتا ہے کہ کون سے اثاثہ عناصر کو نظر آنا چاہئے ، اور تخلیقی شکلیں اور ترتیب کی تعمیر کے لئے بہت مفید ہے۔ ماسکنگ تین طریقوں سے کی جاسکتی ہے: ایک راسٹر امیج (جیسے شفافیت کے حصوں کے ساتھ پی این جی فارمیٹ) ، سی ایس ایس گریڈینٹ یا ایس وی جی عناصر کا استعمال۔

نوٹ کریں کہ ایک عام راسٹر تصویر کے برعکس ، ایس وی جی کو معیار کے نمایاں نقصان کے بغیر چھوٹا یا تبدیل کیا جاسکتا ہے۔

img {ماسک-تصویری: url (‘mask.png ') لکیری-میلان (-45deg ، rgba (0،0،0،1) 20٪، rgba (0،0،0،0) 50٪)؛ ماسک-تصویری: یو آر ایل (# ماسکنگ)؛ / * SVG کوڈ میں پیدا اور بیان کردہ عنصر کا حوالہ دینا * /}

یہ بتانا ضروری ہے کہ فائر فاکس صرف تازہ ترین کی حمایت کرتا ہے ، لہذا ہمیں ایک ان لائن ایس وی جی ماسک عنصر استعمال کرنے کی ضرورت ہے۔ اگر ہم شفافیت کی سطح کے ساتھ راسٹر کی تصویر استعمال کریں تو کیا ہوگا؟ تصویر کے شفاف حصے نہیں دیکھے جائیں گے - لہذا دوسرے الفاظ میں ، مبہم ٹکڑے دکھائے جائیں گے ، اور دوسرے ٹکڑوں کو چھپا کر رکھیں گے۔

ماسکنگ خاص طور پر طاقتور ہے کیونکہ یہ آپ کو ان کی خصوصیات ، سائز اور تکرار کی وضاحت کرتے ہوئے ، پس منظر کی تصاویر پر ایک ہی خصوصیات کو لاگو کرنے کے قابل بناتا ہے۔

سی ایس ایس ماسکنگ کے لئے استعمال کرنے کا ایک عمدہ مضمون ان مضامین میں ہے جو متن اور تصاویر کو یکجا کرتے ہیں۔ فاسد کنٹینر اور تصاویر پرنٹ میں بہت مشہور ہیں ، لیکن ویب پر عمل درآمد کرنے میں سخت اور وقت طلب ہے۔ لیکن نقاب پوش کرنے کا شکریہ ، اور نہیں!

آپ متحرک تصاویر (جیسے GIF فائلیں) کا حصہ کم کرنے کے لئے شفافیت کی سطح کا استعمال کرکے بھی لطف اٹھاسکتے ہیں۔ تاہم ، ان خصوصیات کو استعمال کرتے وقت ، کراس براؤزر کی حمایت کے بارے میں مت بھولویں ، اور فروش کے سابقے شامل کریں۔

03. تراشنے سے نہ گھبرائیں

ایک اور بڑی خصوصیت سی ایس ایس تراشنا ہے۔ کسی شکل کی حدود کو کہتے ہیں کلپ پاتھ (فرسودہ کلپ پراپرٹی کے ساتھ الجھن میں نہ پڑنا) اور کلپنگ اس بات کی وضاحت کرتی ہے کہ کون سا تصویری علاقہ نظر آنا چاہئے۔ تراشنا کاغذ کے ٹکڑے کو کاٹنے کے مترادف ہے - راستے سے باہر کی کوئی بھی چیز چھپی ہوگی ، جبکہ راستے کے اندر کوئی بھی چیز نظر آئے گی۔

clip-path: دائرہ (x ، y پر رداس)؛ clip-path: url (#clpping)؛ / * ایس وی جی عنصر کا حوالہ دینا * /

مثال کے طور پر ، اگر کسی دائرے کا فنکشن کسی شبیہ کے اوپری حصے پر تراشنے کا ماسک لگاتا ہے تو آپ کو اس دائرے میں صرف اس تصویر کا حصہ نظر آئے گا۔

عمدہ بات یہ ہے کہ ہم شکل کے افعال اور ایس وی جی کو کلپ پاتھوں کے طور پر استعمال کرسکتے ہیں ، جو ہمیں بہت سارے مواقع فراہم کرتا ہے - مثال کے طور پر ، ہم ان کو شکل میں ڈھال سکتے ہیں۔ ایس وی جی کلپ پاتھ کا استعمال کرتے ہوئے شفاف جے پی جی بنانے کے بارے میں کرس کوئر کا یہ مضمون دیکھیں۔

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

اسی لئے یہ سفارش کی جاتی ہے کہ جب آپ جزوی طور پر شفافیت کا اثر چاہتے ہو تو آپ ماسک استعمال کریں۔ اگر آپ کرکرا کنارے چاہتے ہیں تو ، کلپ پاتھوں کا استعمال کرنا بہتر ہے۔

04. باکس کے باہر سوچئے

شکل-باہر اور شکل کے اندر بچانے کے لیے! کس نے کہا کہ ٹیکسٹ کنٹینرز کو ہمیشہ مستطیل ہونے کی ضرورت ہے؟ آئیے ہم خانے سے باہر نکلیں ، لفظی طور پر ، اور اپنے نئے صفحات کی ترتیب کو زیادہ سے زیادہ کم اور بہتر بنانے والی نئی شکلیں ڈھونڈیں۔ شکل سے باہر اور شکل کے اندر کی خصوصیات آپ کو اپنے مواد کو CSS میں اپنی مرضی کے مطابق راستوں پر لپیٹنے کی اجازت دیتی ہیں۔

تو یہ کیسے کام کرتا ہے؟ دی گئی کوڈ کو دیئے ہوئے تیرتے ہوئے تصویر یا کنٹینر پر سیدھے سادے لگائیں:

شکل سے باہر: دائرہ (50٪)؛ / * مواد دائرے میں پھیل جائے گا * /

یہ نوٹ کرنا ضروری ہے کہ فلوٹ پراپرٹی اور عنصر کے طول و عرض - اونچائی اور چوڑائی کی وضاحت کی جانی چاہئے ، بصورت دیگر یہ کام نہیں کرے گا۔ جس شکل کے ساتھ آپ جاسکتے ہیں دائرہ(), کثیرالاضلاع (), inset () یا بیضوی ().

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

اگر آپ اپنے عنصر اور مواد کے درمیان مزید گنجائش پیدا کرنا چاہتے ہیں تو ، اس کو استعمال کریں شکل مارجن پراپرٹی ، جو بالکل مارجن کی طرح کام کرے گی۔ شکل افعال متحرک ہوسکتے ہیں ، لیکن صرف متعین کثیر الاضلاع کے لئے یو آر ایل () بدقسمتی سے تقریب متحرک ہونے کے قابل نہیں ہے۔

کے لئے براؤزر کی حمایت شکل سے باہر اس وقت محدود ہے ، لیکن دوسرے براؤزرز میں تیزی سے اس کے نفاذ کے ل your اپنی انگلیاں عبور رکھیں۔

05. حرکت پذیری کے لئے ایس وی جی آزمائیں

سچ پوچھیں تو ، میں ایس وی جی (توسیع پذیر ویکٹر گرافکس) کے بغیر آج کے ویب کا تصور بھی نہیں کرسکتا۔ اس کا نام خود ہی بولتا ہے - یہ ترازو ہوتا ہے ، لہذا یہ ویب کے ڈیزائن کے متعلق تمام خدشات کا جواب دیتا ہے۔ SVG گرافک کرکرا ہو گا اس سے قطع نظر کہ اس کے آلے کی اسکرین ریزولوشن جس پر دیکھا گیا ہے۔

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

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

سی ایس ایس کے ساتھ ایس وی جی متحرک کرنا HTML میں کسی بھی دوسرے عنصر کو متحرک کرنے کے مترادف ہے - یہ ٹرانزیشن ، ٹرانسفارمز اور کی فریم متحرک تصاویر کے ساتھ کیا جاسکتا ہے۔ ایک بار جب آپ ایس وی جی کوڈ سے واقف ہوں گے تو ، باقی سیدھا اور بہت ہی بدیہی ہے ، کیونکہ آپ بنیادی طور پر ایسا ہی کرتے ہیں جیسے آپ HTML میں کرتے تھے۔

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

06. کچھ شور مچائیں

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

صرف سی ایس ایس میں اس کو کیسے کرنا ہے اس کی کامل مثال کیپٹن گمنام ’کوڈ پیین‘ پر مل سکتی ہے ، جو اسکیچ ، متحرک متن پیش کرتا ہے۔ کوڈ کی ایک لائن جادو کرتی ہے:

ٹرانسفارم: اسکو (60deg -30deg) اسکیل Y (.66667)؛

07. کولیج کے ساتھ تخلیقی بنائیں

کولیج سے متاثرہ ڈیزائن بصری فنون میں اپنے لمحے سے لطف اندوز ہو رہے ہیں - اس مضمون کی تحقیق کرتے ہوئے ، روزنا ویبسٹر اور باراکز کا کام فوری طور پر میرے دل کو چرا لیا - اور یہاں تک کہ ویب پر بھی انھیں زیادہ سے زیادہ توجہ مل رہی ہے۔ اگر آپ کو شک ہے تو ، میل چیمپ ہوم پیج (نیچے) چیک کریں۔ کیا آپ نے کولیج کو دیکھا؟

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

میں نے ان تمام ٹھنڈی سی ایس ایس پراپرٹیز کا استعمال کرتے ہوئے کچھ مثالیں تیار کیں ، لہذا آپ دیکھ سکتے ہیں کہ ویب پر کولیج جیسا انداز حاصل کرنے کے لئے ان کو کس طرح جوڑا جاسکتا ہے۔ میری مثالوں پر ایک نظر ڈالیں۔

08. براؤزر کی حمایت کو مت بھولنا

اگر آپ محسوس کرتے ہیں کہ جب آپ سی ایس ایس کی خصوصیات کو استعمال کرنا چاہتے ہیں جب آپ کو شبہ ہے کہ تمام براؤزرز اس کی حمایت نہیں کرتے ہیں تو ٹویٹ ایمبیڈ کریں حکمرانی آپ کی مدد کے لئے موجود ہے۔ ٹویٹ ایمبیڈ کریں سی ایس ایس پراپرٹی کے لئے براؤزر سپورٹ چیک کرنے کی اجازت دیتا ہے: ویلیو جوڑے۔

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

@ سپورٹس (مکس بلینڈ-موڈ: اوورلے) {. نمونہ {مکس-مرکب موڈ: اوورلے؛ }

ملاوٹ کے طریقوں ، ماسکنگ ، تراشنا ، سی ایس ایس کی شکلیں اور ایس وی جی کی طاقت جیسی خصوصیات کا امتزاج ہمیں اپنی تخلیقی صلاحیتوں کو فروغ دینے اور معمول سے الگ ہونے کے لئے ٹولز کا ایک بہت بڑا مجموعہ فراہم کرتا ہے۔ ان ٹولز کے ذریعہ ہمارے پاس ان چیزوں کا ویب ورژن بنانے کا موقع ہے جو ہم فی الحال پرنٹ میں دیکھتے ہیں۔

اگرچہ کچھ خصوصیات میں اب بھی براؤزرز کی مطابقت کے ساتھ دشواریوں کا سامنا ہوسکتا ہے (اگر آپ کو بہت ساری پریشانی ہو رہی ہے تو ، ایک زیادہ مضبوط ویب ہوسٹنگ سروس پر غور کریں) ، ان کے ساتھ کھیلنے میں ہچکچاہٹ محسوس نہیں کریں۔ اگرچہ اب براؤزر کی سہولت محدود ہوسکتی ہے ، لیکن مستقبل میں ایسا نہیں ہوگا۔ بس وقت کی بات ہے۔

یہ مضمون اصل میں نیٹ میگزین میں شائع ہوا تھا۔