مواد
- 01. کنٹینر کے ساتھ شروع کریں
- 02. سر کا انداز
- 03. جسم پر منتقل کریں
- 04. گببارے شامل کریں
- 05. سی ایس ایس متحرک
سی ایس ایس کی تصاویر بنانا آپ کی مہارتوں کو عملی جامہ پہنانے اور آرٹ ورک کا صاف ستھرا ٹکڑا تخلیق کرنے کا ایک تفریح طریقہ ہے ویب کے اجزاء کی معمول کے مطابق اسٹائل میں یہ ایک عمدہ وقفہ ہے۔ آپ کو بس ایک خالی دستاویز اور سی ایس ایس فائل شروع کرنے کی ضرورت ہوگی۔ ہم ساس کے استعمال کی تجویز کرتے ہیں ، جو آپ کو اپنے اسٹائل کو دوبارہ استعمال کرنے اور آسان سلیکٹرز لکھنے کے اہل بنائے گا (اس پری پروسیسر کے بارے میں مزید معلومات کے ل S ساس کیا ہے اس کے بارے میں ہماری گائیڈ ملاحظہ کریں)۔
ہم سی ایس ایس آرٹ میں مہارت حاصل کرنے کے لئے کچھ ٹاپ ٹپس کے ساتھ شروعات کریں گے ، پھر آپ کو دکھائے گا کہ اس متحرک غبارے پکیچو کو صرف سی ایس ایس کا استعمال کرکے کیسے بنایا جائے (یقینی بنائیں کہ آپ اپنی فائلوں کو مہذب کلاؤڈ اسٹوریج میں محفوظ رکھیں)۔
مزید حوصلہ افزائی کے ل CSS ، حیرت انگیز سی ایس ایس حرکت پذیری کی ہماری حیرت انگیز مثالوں کا پتہ لگائیں۔ کچھ اور بنیادی کے بعد؟ سی ایس ایس کا استعمال کرتے ہوئے آئس لولی بنانے کا طریقہ سیکھنے سے شروع کریں۔
یا ، اگر آپ کوئی نئی سائٹ شروع کررہے ہیں تو ، ویب سائٹ کے ایک شاندار بلڈر کے ساتھ پیچیدگی کھودیں اور اس بات کو یقینی بنائیں کہ آپ کو اپنی ویب کی میزبانی کی جگہ مل جائے۔
ڈیزائن کو آسان شکلوں میں کم کریں
سی ایس ایس آرٹ تخلیق کرتے وقت ، یہ پریرتا کے ل a کچھ حوالہ امیجوں کو دیکھنے میں مدد کرسکتا ہے اور پھر آپ کے ساتھ چلتے ہوئے کارٹون کی ایک آسان تغیر پیدا کرسکتے ہیں ، جس میں ابتدائی شکلیں استعمال کرتے ہوئے مضمون کا تصور کیا جاتا ہے ، جو بہتر سی ایس ایس شکلیں بناتے ہیں۔
پوزیشننگ میں مدد کے لئے روشن پس منظر کا استعمال کریں
جب اسی طرح کے رنگوں کی شکلیں ڈھیر ہوجاتی ہیں تو ، یہ دیکھنا مشکل ہے کہ انہیں کہاں رکھا جارہا ہے یا وہ کس طرح کی ہیں۔ یہ تبدیل کرنا مفید ہے کہ جس شکل پر آپ کام کر رہے ہو اسے تبدیل کرکے بہتر بنائیں پس منظر کا رنگ چمکیلی اور خوشگوار چیز ، جیسے مینجٹا اس سے آپ آسانی سے اپنے عنصر کی صحیح پوزیشن اور شکل دیکھنے کے قابل ہوجاتے ہیں۔
سیال سائز استعمال کریں
جب خصوصیات کے لئے px ویلیو کی وضاحت کرنے کی بات آتی ہے تو ، ہم ریم یونٹ کو استعمال کرنے کی سفارش کرتے ہیں۔ اس صورت میں جب آپ یہ فیصلہ کرتے ہیں کہ آپ چاہتے ہیں کہ آپ کا مجموعی ٹکڑا بڑا یا چھوٹا ہو ، ریم یونٹ استعمال کرکے آپ کو صرف اڈے تبدیل کرنا ہوں گے HTML ml فونٹ سائز:… px} آپ کے ساس میں پورے آرٹ ورک کو اوپر یا نیچے پیمانے کے ل..
جب بچوں کے عناصر کی اونچائی اور چوڑائی کی وضاحت کرتے ہو جو والدین سے نسبتہ سائز کا ہونا چاہ. تو ، فیصد کام آتے ہیں۔ چونکہ یہ اقدار ہمیشہ ان کے والدین سے مطابقت رکھتی ہیں ، لہذا ان کو بھی پیمائش کرنا چاہئے HTML فونٹ سائز.
01. کنٹینر کے ساتھ شروع کریں
آرٹ ورک کے ٹکڑوں کو تھامنے کے ل A ایک ریپر کنٹینر شروع کرنے کے لئے اچھی جگہ ہے۔ کنٹینر کے اندر ، ہم تین اندرونی کنٹینر رکھ سکتے ہیں۔ سر ، جسم اور غبارے۔
تقسیم </ div> </ div> </ div> </ div> / div>
عام طور پر کنٹینر ہونا چاہئے پوزیشن: رشتہ دار تاکہ دوسرے عناصر کو نسبتا inside اس کے اندر رکھ دیا جا. پوزیشن: مطلق اور آپ کی اونچائی اور چوڑائی اچھی طرح سے طے شدہ ہے ، بصورت دیگر بچوں کے عناصر کی پوزیشننگ مشکل ہوجاتی ہے۔
اپنے اسٹائل میں ، اپنے بنیادی رنگوں کو دوبارہ پریوست کے ل S ساس متغیر کے طور پر شامل کریں۔ ساس ہلکا () اور سیاہ () افعال آپ کے رنگوں کے اشارے اور سائے پیدا کردیں گے ، جنہیں آپ کے کردار کے لئے نمایاں کریں یا سائے کے طور پر استعمال کیا جاسکتا ہے۔
02. سر کا انداز
اس ڈھانچے کا پتہ لگانے کے ساتھ ہی پہلے طرز کی طرز کی شکل دیں۔ اس معاملے میں ، سر آرٹ ورک کے ل a ایک عمدہ مرکز نقطہ بناتا ہے ، لہذا اپنی حیثیت کو مطلق پر مرتب کرنے کے بجائے ، اس کو نسبت کار پر مقرر کیا جاسکتا ہے۔ اس سے کنٹینر کے قابل ہوجاتا ہے کہ وہ اپنے اندر مستحکم عنصر رکھتا ہے ، جس سے دوسرے تیرتے ہوئے مطلق عنصر کو اینکر پوائنٹ ملتا ہے اور اس طرح ان کی پوزیشن پر زیادہ قابو پایا جاسکتا ہے۔
چہرے کی خصوصیات کو پوزیشننگ کے ل a ایک کنٹینر کی ضرورت ہوگی ، لہذا ایک بنائیں Div> چوڑائی ، اونچائی اور پس منظر کے رنگ والی پیلے رنگ کی شکل کے لئے ہیڈ کنٹینر کے اندر - اب آئیے اس مستطیل کو سر کی شکل کی طرح نظر آ.۔ سی ایس ایس آرٹ میں سب سے عام اور مفید خصوصیات میں سے ایک ہے بارہ رداس خاصیت ، جو کسی باکس کے کونے کے X یا Y کی وکر کو تبدیل کرتی ہے اور زیادہ نامیاتی شکلیں تخلیق کرنے کے لئے استعمال ہوسکتی ہے۔
ریم اور فیصد فیصد کمبو کے ساتھ اس تکنیک کا استعمال کرتے ہوئے ، آپ محض بیضوی شکل کی بجائے بلاب نما شکلیں بناسکتے ہیں ، جو قدرتی طور پر پیمانہ کرتے ہیں HTML{فونٹ سائز:… px}:
. سطح {بارڈر-ٹاپ-بائیں-رداس: 50٪ 4.5rem؛ بارڈر-اوپر سے دائیں رداس: 50٪ 4.5rem؛ بارڈر-نیچے-بائیں رداس: 50٪ 3rem؛ بارڈر-نیچے-دائیں رداس: 50٪ 3rem؛ ...
سر کی تکمیل کے بعد بارہ رداس، چہرے کی باقی خصوصیات کو سر کے چائلڈ عناصر ، جیسے آنکھیں ، رخساروں ، ناک اور کانوں کی حیثیت سے رکھیں۔ سر کی طرح ، بارہ رداس چال کے بعد سے کام آئے گا سرحد کا رداس: 50٪ اپیل نہیں لگ سکتا ہے۔
03. جسم پر منتقل کریں
ایک جسم Div> جسم کے کنٹینر کے اندر سر کے پیچھے رکھ دیا جاسکتا ہے اور اسی شکل کی شکل میں بارہ رداس تکنیک کے ساتھ ساتھ بازوؤں ، پیروں اور دم کو بھی۔ مناسب اوورلیپنگ کی اجازت دینے کے لئے ، اصل جسم اس کا اپنا عنصر ہونا چاہئے ، کیونکہ کچھ اندرونی عناصر جیسے پچھلے دھاروں کو کاٹنا پڑتا ہے۔ چھپا ہوا رساو. جسم کو زیادہ گہرائی دینے کے ل the ، transform: skew () جائیداد جسم کو قدرے سراسر کر سکتی ہے۔
بجلی کے بولٹ کی دم ایک عنصر سے اس شکل کو بنانے کی کوشش کرنے کے بجائے تین الگ مستطیل کا استعمال کرتے ہوئے تعمیر کی جاسکتی ہے۔ بولٹ بنانے کے لئے مستطیلوں کو ایک دوسرے کے اوپری حصے پر گھمایا جاسکتا ہے اور اسے لگایا جاسکتا ہے۔ بازو اور ٹانگیں گہرے پرائمری رنگ کا استعمال کرسکتے ہیں جو ہم نے ساس کا استعمال کرتے ہوئے تخلیق کیا ہے سیاہ () تو وہ باہر کھڑے ہیں۔
04. گببارے شامل کریں
اب جب کہ بجلی کا ماؤس مکمل ہوچکا ہے ، آئیے اس کی پیٹھ میں غبارے باندھیں۔ کچھ شامل کریں Div>بچوں کے تار کے ساتھ مشترکہ شیلیوں کے ساتھ Div> اور ان کو سر کے اوپر ٹکراؤ۔ سٹرنگ پوشیدہ ہے سوائے ایک کے بارڈر - بائیں، جو اس کی مدد سے زیادہ تار کی طرح نظر آتی ہے۔
کردار کی کمر کے گرد تار باندھنے کے لئے ، الف Div> جسم میں مناسب پوزیشننگ کی اجازت دینے کے ل be رکھا جاسکتا ہے۔ تار کو ظاہر ہونے کے لئے ہلکا سا وکر کی ضرورت ہوتی ہے گویا یہ جسم کے چاروں طرف بندھا ہوا ہے ، لہذا اس کی لمبائی چھوٹی ہوسکتی ہے ، سرحد نیچے اور ایک سرحد نیچے بائیں اور دائیں رداس ، جو ایک پتلی مڑے ہوئے لائن کو بناتا ہے:
.string؛ اونچائی: 1rem؛ چوڑائی: 9rem؛ بارڈر-دائیں: ٹھوس 1px $ سفید؛ سرحد سے بائیں: ٹھوس 1px $ سفید؛ سرحد کے نیچے: ٹھوس 1px $ سفید؛ بارڈر-نیچے-بائیں رداس: 50٪ 1rem؛ بارڈر-نیچے-دائیں رداس: 50٪ 1rem؛ }
05. سی ایس ایس متحرک
ہم شامل کرکے کردار کو زندگی بخش سکتے ہیں ٹویٹ ایمبیڈ کریں متحرک تصاویر. بازوؤں ، پیروں ، کانوں اور دم کے ساتھ متحرک ہوسکتے ہیں ٹرانسفارم: گھمائیں (). یقینی بنائیں تبدیلی اصل 'مشترکہ' (یعنی ایک ٹانگ کے لئے ٹاپ سینٹر) پر سیٹ ہے اور گردش کو ایڈجسٹ کرتا ہے۔ اس حرکت پذیری کی قسم کو ساس مکسین میں کئی بار استعمال کیا جاسکتا ہے۔
@ مکسین انیمیٹراوٹیٹ ($ نام ، $ شروع ، $ اختتام) {keyframes # {$ نام} {0٪، 100٪ {ٹرانسفارم: گھمائیں (# {$ شروع} ڈگ)} 50٪ {ٹرانسفارم: گھمائیں (# {$ آخر} ڈگ)}}
آخر میں ، ایک سست 5s شامل کریں ٹرانسفارم: ٹرانسلیٹ وائی () کلیدی فریم حرکت پذیری کردار کو اوپر اور نیچے متحرک کردے گی جیسے یہ تیرتا ہو۔ حقیقت پسندی کو چھونے کے ل a ، پلک جھپکتے حرکت پذیری کا استعمال کرتے ہوئے ٹرانسفارم: اسکیل وائی (0.1) املاک کو اس کو ظاہر کرنے کیلئے استعمال کیا جاسکتا ہے جیسے آنکھیں بند ہو رہی ہیں۔
یہ مضمون اصل میں تخلیقی ویب ڈیزائن میگزین میں شائع ہوا تھا نیٹ. ایشو 283 خریدیں یا سبسکرائب.
