انداز میں آپ کی تصاویر اور تصاویر استعمال کریں
بہت سے لوگوں کو متن ایڈجسٹ کرنے کے لئے سی ایس ایس کا استعمال کرتے ہیں، فونٹ تبدیل کرنے، رنگ، سائز اور زیادہ. لیکن ایک بات یہ ہے کہ بہت سے لوگوں کو اکثر بھول جاتا ہے کہ آپ بھی تصاویر کے ساتھ سی ایس ایس استعمال کرسکتے ہیں.
تصویر کو تبدیل کرنا
سی ایس ایس آپ کو اس صفحہ کو ایڈجسٹ کرنے کی اجازت دیتا ہے کہ صفحہ کس طرح تصویر پر دکھاتا ہے. آپ کے صفحات کو مسلسل رکھنے کے لۓ یہ واقعی مفید ہوسکتا ہے. تمام تصاویر پر شیلیوں کو ترتیب دینے سے، آپ اپنی تصاویر کے لئے ایک معیاری نظر بناتے ہیں. کچھ چیزیں جو آپ کر سکتے ہیں:
- تصویروں کے ارد گرد ایک سرحد یا نقطہ نظر شامل کریں
- منسلک تصاویر کے ارد گرد رنگ کی سرحد کو ہٹا دیں
- تصاویر کی چوڑائی اور / یا اونچائی کو ایڈجسٹ کرنا
- ڈراپ سائے شامل کریں
- تصویر کو گھمائیں
- اس تصویر کو تبدیل کریں جب تصویر پر ہورہی ہے
اپنی تصویر کو ایک سرحد دینے کے لئے ایک عظیم جگہ ہے. لیکن آپ کو صرف حد سے زیادہ غور کرنا چاہئے - آپ کی تصویر کے پورے کنارے کے بارے میں سوچیں اور مارجن اور بہاؤ کو ایڈجسٹ کریں. پتلی سیاہ سرحد کے ساتھ ایک تصویر اچھا لگ رہا ہے، لیکن سرحدی اور تصویر کے درمیان کچھ بھرتی بھی بہتر نظر آتی ہے.
img {
سرحد: 1px ٹھوس سیاہ؛
بھرتی: 5px؛
}
ہمیشہ غیر آرائشی تصاویر کو لنک کرنے کا ایک اچھا خیال ہے، جب ممکن ہو. لیکن جب آپ کرتے ہیں، یاد رکھیں کہ زیادہ سے زیادہ براؤزر تصویر کے ارد گرد ایک رنگ کی سرحد کو شامل کریں. یہاں تک کہ اگر آپ سرحد کو تبدیل کرنے کے لۓ اوپر کا کوڈ استعمال کرتے ہیں، تو لنک اس پر نظر ثانی کرے گا جب تک کہ آپ کو لنک پر بھی حد ہٹانے یا تبدیل نہ کریں. ایسا کرنے کیلئے آپ کو منسلک تصاویر کے ارد گرد سرحد کو ہٹانے یا تبدیل کرنے کے لئے آپ کو سی ایس ایس کے بچے کے اصول کا استعمال کرنا چاہئے:
img> a {
سرحد: کوئی نہیں
}
آپ اپنی تصویروں کی اونچائی اور چوڑائی کو تبدیل یا سیٹ کرنے کے لئے بھی سی ایس ایس کا استعمال کرسکتے ہیں. جبکہ براؤزر کا استعمال کرنے کے لئے براؤزر استعمال کرنے کے لئے تصویر سائز کو ایڈجسٹ کرنے کی وجہ سے یہ نہیں ہے کہ وہ ڈاؤن لوڈ کی رفتار کی وجہ سے، وہ تصاویر کو دوبارہ سائز میں بہتر بنائے تاکہ وہ اب بھی اچھی لگیں. اور سی ایس ایس کے ساتھ آپ اپنی تصاویر کو ایک معیاری چوڑائی یا اونچائی مقرر کر سکتے ہیں یا کنٹینر سے متعلق رشتہ داروں کو بھی مقرر کرسکتے ہیں.
یاد رکھیں، جب آپ تصاویر کا سائز تبدیل کرتے ہیں تو، بہترین نتائج کے لۓ، آپ کو صرف ایک طول و عرض کا سائز تبدیل کرنا چاہئے - اونچائی یا چوڑائی. یہ اس بات کو یقینی بنائے گا کہ تصویر اس کے پہلو تناسب کو برقرار رکھتا ہے، اور اس طرح عجيب نظر نہیں آتا. دوسری قیمت کو آٹو مقرر کریں یا اسے باہر چھوڑ دیں تاکہ براؤزر کو پہلو تناسب کو برقرار رکھنے کے بارے میں بتائیں.
img {
چوڑائی: 50٪؛
اونچائی: آٹو؛
}
سی ایس ایس 3 نئی خصوصیات اعتراض کے مطابق اور اعتراض پوزیشن کے ساتھ اس مسئلے کا حل پیش کرتا ہے. ان خصوصیات کے ساتھ آپ درست تصویر اونچائی اور چوڑائی کی وضاحت کرنے کے قابل ہو جائیں گے اور پہلو تناسب کو کس طرح سنبھالا جانا چاہئے. یہ آپ کی تصاویر کے ارد گرد خط باکس باکسنگ کے اثرات کو تخلیق کرسکتا ہے یا اس کی شکل کو سائز میں فٹ ہونے کی ضرورت ہوتی ہے.
حالانکہ CSS3 اعتراض-فٹ اور اعتراض پوزیشن کی خصوصیات ابھی تک وسیع پیمانے پر نہیں کی جاتی ہیں، وہاں موجود دیگر CSS3 خصوصیات ہیں جو آپ کو اپنی تصاویر میں ترمیم کرنے کے لئے استعمال کر سکتے ہیں. چیزوں کو ڈراپ سائے، گول کناروں، اور تبدیلیاں جیسے گھومنے، کھوئے ہوئے، یا اپنی تصاویر کو سب سے زیادہ جدید براؤزروں میں ابھی تک کام کرنے کے لۓ چیزوں کو منتقل کرنا ہے. اس کے بعد آپ کو تصاویر تبدیل کرنے کے لئے سی ایس ایس کی منتقلی کا استعمال کر سکتے ہیں، یا اس وقت پر کلک کیا جاسکتا ہے، یا کلک کر کے.
پس منظر کے طور پر تصاویر کا استعمال کرتے ہوئے
CSS آپ کی تصاویر کے ساتھ پسند پس منظر تخلیق کرنے میں آسان بناتا ہے.
آپ پورے صفحہ یا صرف ایک مخصوص عنصر پر پس منظر شامل کرسکتے ہیں. صفحہ پر پس منظر کی تصویر پراپرٹی کے ساتھ ایک پس منظر کی تصویر بنانا آسان ہے:
جسم {
پس منظر کی تصویر: url (background.jpg)؛
}
جسم کو منتخب کرنے والے صفحے پر مخصوص عنصر پر تبدیل کریں صرف ایک عنصر پر پس منظر ڈالیں.
تصاویر کے ساتھ آپ کر سکتے ہیں ایک اور مزہ چیز ایک پس منظر کی تصویر بنا رہی ہے جو باقی صفحات کے ساتھ سکرال نہیں کرتا ہے جیسے پانی کی طرح. آپ صرف سٹائل پس منظر سے منسلک کرتے ہیں: مقررہ؛ آپ کے پس منظر کی تصویر کے ساتھ ساتھ. آپ کے پس منظر کے لۓ دیگر اختیارات میں انہیں پس منظر سے دوبارہ پراپرٹی کا استعمال کرتے ہوئے صرف افقی طور پر یا عمودی ٹائل بنانے میں شامل ہے.
پس منظر دوپہر لکھیں: دوبارہ دہرائیں؛ تصویر افقی طور پر اور پس منظر دوبارہ ٹائل کرنے کے لئے: repeat-y؛ عمودی طور پر ٹائل کرنے کے لئے. اور آپ اپنی پس منظر کی تصویر کو پس منظر پوزیشن کی جائیداد کے ساتھ پوزیشن کرسکتے ہیں.
اور CSS3 آپ کے پس منظر کے ساتھ ساتھ مزید شیلیوں کو بھی شامل کرتا ہے. آپ اپنی تصاویر کو کسی بھی سائز کے پس منظر سے فٹ کرنے یا ونڈو کے سائز کے ساتھ پیمانے پر پس منظر کی تصویر کو مقرر کرنے کے لئے بڑھا سکتے ہیں. آپ پوزیشن کو تبدیل کر سکتے ہیں اور پھر پس منظر کی تصویر کلپ سکتے ہیں. لیکن CSS3 کے بارے میں سب سے بہترین چیزیں یہ ہے کہ آپ اب بھی زیادہ پیچیدہ اثرات پیدا کرنے کے لئے ایک سے زیادہ پس منظر کی تصاویر پرت سکتے ہیں.
ایچ ٹی ایم ایل 5 ہالی ووڈ کی مدد کرتا ہے
ایچ ٹی ایم ایل 5 میں شکل عنصر کسی بھی تصویر کے ارد گرد رکھنا چاہئے جو دستاویز میں اندر ہی کھڑے ہوسکتا ہے. اس کے بارے میں سوچنے کا ایک طریقہ یہ ہے کہ اگر تصویر ایک ضمیمہ میں ظاہر ہوسکتی ہے، تو اس کے بعد اس میں عنصر ہونا چاہئے. آپ اس عنصر اور FIGCAPTION عنصر کو اپنی تصاویر میں شیلیوں کو شامل کرنے کے لئے استعمال کر سکتے ہیں.