سی ایس ایس کے سائز کے ساتھ کیسے ڈیزائن کرنا: ایک تعارف

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

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

• 20 بہترین تار فریم کے اوزار

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

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

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

01. شروع کرو

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

 & lt؛ لنک ریل = "stylesheet" href = "سی ایس ایس / shapes.css" & gt؛
& lt؛ لنک href = "https://fonts.googleapis.com/
سی ایس ایس؟ خاندان = اروو: 700 | لٹو: 700 "ریل =" شیلیفیٹ "اور جی ٹی؛ 

02. ایک دوسرے کے ساتھ شکلیں لنگر

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

 & lt؛ div id = "shape_contain" & gt؛
& lt؛ div id = "سرکل" & gt؛ & lt؛ / div & gt؛
& lt؛ / div & gt؛ 

03. صفحہ بنائیں

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

 جسم،
ایچ ٹی ایم ایل {
مارجن: 0؛
پڈنگنگ: 0؛
چوڑائی: 100٪؛
اونچائی: 100vh؛
اوور بہاؤ-ایکس: پوشیدہ؛
فونٹ-خاندان: 'لٹو'، سینسر سیرف؛
متن ٹرانسمیشن: بڑے پیمانے پر؛
} 

04. سائز پر مشتمل ہے

اگلے سی ایس ایس کا قاعدہ اس کی شناخت کے ساتھ ہے shape_contain. . یہ براؤزر کو کسی بھی بہاؤ پوشیدہ پوشیدہ ہے. The. Translate3d. یہ یقینی بنانا ہے کہ مواد ہارڈ ویئر تیز رفتار ہے. دو پس منظر کی تصاویر سے پہلے ایک بڑی سرحد شامل ہے. ایک باقاعدگی سے تصویر ہے جبکہ اوپر ایک ایکوا رنگ، نیم شفاف مریض ہے.

 #shape_contain {
باکس-سائز: سرحدی باکس؛
چوڑائی: 100٪؛
اونچائی: 100vh؛
چھپا ہوا رساو؛
ٹرانسمیشن: ترجمہ 3D (0، 0، 0)؛
سرحد: 20px ٹھوس آرجیبی (255، 254، 244)؛
پس منظر: لکیری-گریجویٹ (0DEG، RGBA (7،
47، 46، 0.8) 0٪، آرجیبی (255، 252، 226، 0.5)
100٪)، یو آر ایل (../ تصاویر / ماؤنٹین. jpg)
NO- دوبارہ مرکز مرکز؛
پس منظر کا سائز: کور؛
} 

05. ایک دائرے کے ساتھ شروع کریں

سب سے پہلے جیومیٹک شکل جس کو پیدا کیا جائے گا سب سے آسان شکلوں میں سے ایک ہے. کسی بھی مربع کے سائز سے ایک حلقہ بنایا جا سکتا ہے ڈیو سرحد کے ردعمل کو شامل کرکے 50٪ . حلقہ نیم شفاف ہے، نرم شیڈو اس کے کنارے میں شامل ہے.

 #circle {
چوڑائی: 80VH؛
اونچائی: 80VH؛
سرحدی ردعمل: 50٪؛
پس منظر: RGBA (136، 239، 231، 0.3)؛
پوزیشن: مطلق؛
اوپر: 7vh؛
بائیں: 50٪؛
ٹرانسمیشن: ترجمہ 3D (-50٪، 0، 0)؛
Box-Shadow: 0px 5px 40px RGBA (0، 0، 0، 0.3)؛
} 

06. مثلث کی کوشش کریں

اگلے شکل تھوڑا زیادہ پیچیدہ ہو جائے گا کیونکہ یہ ایک مثلث ہے. سی ایس ایس کلپ کے راستے کا استعمال کرتے ہوئے تخلیق کرنے کے لئے یہ نسبتا براہ راست براہ راست ہے جو ایک کثیر قوون کی شکل پیدا کرنے کی اجازت دیتا ہے. اس ڈیو میں شامل کریں shape_contain. ڈوی

 & lt؛ div id = "tri1" & gt؛ & lt؛ / div & gt؛ 

07. مثلث کو لاگو کریں

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

 # Tri1 {
کلپ راہ: کثافت (0 0، 100٪ 0، 50٪
100٪)؛
چوڑائی: 100Vh؛
اونچائی: 88Vh؛
پس منظر: یو آر ایل (../ تصاویر / girl3.jpg)
NO- دوبارہ مرکز مرکز؛
پس منظر کا سائز: کور؛
پوزیشن: مطلق؛
اوپر: 10vh؛
بائیں: 50٪؛
ٹرانسمیشن: ترجمہ 3D (-50٪، 0، 0)؛
فلٹر: ہیو گھومنے (310 ڈی جی) کے برعکس (140٪)؛
دھندلاپن: 0.8؛
} 

08. زیادہ پیچیدہ جاؤ

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

 & lt؛ div id = "tri2" & gt؛ & lt؛ / div & gt؛ 

09. سائز اسٹیک کریں

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

 # Tri2 {
کلپ کا راستہ: کثافت (50٪ 0، 0٪ 100٪، 9٪ 100٪،
50٪ 17٪، 50٪ 17٪، 85٪ 91٪، 13٪ 91٪، 0 100٪،
100٪ 100٪، 50٪ 0)؛
چوڑائی: 80VH؛
اونچائی: 70Vh؛
پس منظر: یو آر ایل (../ تصاویر / clouds.jpg)
NO- دوبارہ مرکز مرکز؛
پس منظر کا سائز: کور؛
پوزیشن: مطلق؛
اوپر: 1vh؛
بائیں: 50٪؛
ٹرانسمیشن: ترجمہ 3D (-50٪، 0، 0)؛
فلٹر: ہیو گھومنے (90 ڈی جی) کے برعکس (140٪)؛
دھندلاپن: 0.7؛} 

10. براؤزر کا سائز تبدیل کرنے کی کوشش کریں

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

 & lt؛ div id = "tri3" & gt؛ & lt؛ / div & gt؛ 

11. یہ انداز اپ

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

 # ٹری 3 {
کلپ کا راستہ: کثافت (50٪ 0، 0٪ 100٪، 9٪ 100٪،
50٪ 17٪، 50٪ 17٪، 85٪ 91٪، 13٪ 91٪، 0 100٪،
100٪ 100٪، 50٪ 0)؛
چوڑائی: 80VH؛
اونچائی: 70Vh؛
پس منظر: RGBA (0، 113، 110، 0.2)؛
پوزیشن: مطلق؛
اوپر: 20vh؛
بائیں: 50٪؛
ٹرانسمیشن: ترجمہ 3D (-50٪، 0، 0)؛
} 

12. ایک زاویہ پٹی بنائیں

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

& lt؛ div id = "strip1" کلاس = "پٹی" اور GT؛ & lt؛ / div & gt؛ 

13. زاویہ بنائیں

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

 .یسٹ {
پوزیشن: مطلق؛
پس منظر: لکیری تدریسی (0DEG، RGBA (164،
0، 217، 0) 0٪، RGBA (164، 0، 217، 0.3) 35٪،
آر جی بی اے (255، 67، 134، 0.3) 65٪، آرجیبی (255، 67،
134، 0) 100٪)؛
}
# strip1 {
چوڑائی: 20vh؛
اونچائی: 120VH؛
بائیں: 50٪؛
ٹرانسمیشن: ترجمہ 3D (-175٪، -15٪، 0)
rotatez (30deg)؛
} 

14. مزید تدریسی زاویہ کی کوشش کریں

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

 & lt؛ div id = "strip2" کلاس = "پٹی" اور GT؛ & lt؛ / div & gt؛
& lt؛ div id = "strip3" کلاس = "پٹی" اور GT؛ & lt؛ / div & gt؛ 

15. زاویہ کی حیثیت

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

 # strip2 {
چوڑائی: 5vh؛
اونچائی: 90Vh؛
بائیں: 50٪؛
ٹرانسمیشن: ترجمہ 3 ڈی (60VH، -15٪، 0)
rotatez (30deg)؛
}
# strip3 {
چوڑائی: 5vh؛
اونچائی: 90Vh؛
بائیں: 50٪؛
ٹرانسمیشن: ترجمہ 3 ڈی (-70VH، 25٪، 0)
rotatez (30deg)؛
} 

16. کچھ ٹیکسٹ مواد شامل کریں

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

 & lt؛ div id = "بائیں طرف" اور GT؛ آئتاکار سے باہر جاؤ
& lt؛ / div & gt؛
& lt؛ div id = "حقائق" اور GT؛ ذمہ دار شکل
لے آؤٹ اور لیفٹیننٹ؛ / div & gt؛
& lt؛ div id = "tapleft" اور GT؛ ویب ڈیزائنرز
& lt؛ br & gt؛ & lt؛ اسپین اور GT؛ سی ایس ایس ٹول کٹ اور ایل ٹی؛ / اسپین اور جی ٹی؛ & lt؛ / div & gt؛
& lt؛ div id = "topright" & gt؛ 2019 & lt؛ / div & gt؛
& lt؛ div id = "عنوان لائن" اور GT؛ سی ایس ایس کے سائز اور ایل ٹی؛ / ڈی وی اور جی ٹی؛ 

17. متن کو گھومائیں

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

 #leftside {
پوزیشن: مطلق؛
بائیں: 20px؛
اوپر: 70٪؛
ٹرانسمیشن اصل: 10٪ 0٪؛
ٹرانسمیشن: گھومنے (-90 ڈی جی)؛
} 

18. دائیں ہاتھ کا متن پوزیشن

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

 #rightside {
پوزیشن: مطلق؛
دائیں: 20px؛
اوپر: 70٪؛
ٹرانسمیشن اصل: 90٪ 0٪؛
ٹرانسمیشن: گھومنے (90 ڈی جی)؛
} 

19. متن سٹائل

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

 #topleft {
پوزیشن: مطلق؛
بائیں: 40px؛
اوپر: 40px؛
چوڑائی: 180px؛
متن سیدھا: مرکز؛
}
#Topleft Span {
فونٹ سائز: 1.8em؛
} 

20. دائیں ہاتھ کا متن مقرر کریں

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

 # ٹروچ {
پوزیشن: مطلق؛
دائیں: 35px؛
اوپر: 25px؛
لائن اونچائی: 100px؛
فونٹ سائز: 1.4em؛
چوڑائی: 100px؛
اونچائی: 100px؛
پس منظر: # 000؛
رنگ: #fff؛
متن سیدھا: مرکز؛
سرحدی ردعمل: 50٪؛
} 

21. عنوان کا متن مقرر کریں

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

 # ہیڈ لائن {
پوزیشن: مطلق؛
چوڑائی: 100٪؛
Z-index: 200؛
Padding-top: 65vh؛
فونٹ-خاندان: 'ارورو'، سیرف؛
متن سیدھا: مرکز؛
رنگین: RGBA (233، 173، 255، 0.8)؛
فونٹ سائز: 8VW؛
ٹیکسٹ شیڈو: 0px 3px 50px RGBA (0، 0، 0، 0.5)؛
} 

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

مزید پڑھ:

• سی ایس ایس آرٹ کے ساتھ شروع کرو
• 5 ڈاؤن لوڈ، اتارنا سی ایس ایس گرڈ جنریٹر
• سی ایس ایس کے طریقوں کے لئے ایک ویب ڈیزائنر کا گائیڈ