مواد مارکیٹنگ
CSS3 کی خصوصیات جن سے آپ واقف نہیں ہوں گے: فلیکس باکس، گرڈ لے آؤٹ، کسٹم پراپرٹیز، ٹرانزیشن، اینیمیشنز، اور متعدد پس منظر
کاسکیڈنگ اسٹائل شیٹس (CSS) تیار ہونا جاری رکھیں اور تازہ ترین ورژن میں کچھ ایسی خصوصیات ہو سکتی ہیں جن کے بارے میں شاید آپ کو علم بھی نہ ہو۔ کوڈ کی مثالوں کے ساتھ CSS3 کے ساتھ متعارف کرائی گئی کچھ بڑی اصلاحات اور طریقہ کار یہ ہیں:
- لچکدار باکس لے آؤٹ (Flexbox): ایک لے آؤٹ موڈ جو آپ کو ویب صفحات کے لیے لچکدار اور ذمہ دار لے آؤٹ بنانے کی اجازت دیتا ہے۔ flexbox کے ساتھ، آپ آسانی سے ایک کنٹینر کے اندر عناصر کو سیدھ میں اور تقسیم کر سکتے ہیں۔ n یہ مثال، the
.container
کلاس استعمال کرتا ہےdisplay: flex
flexbox لے آؤٹ موڈ کو فعال کرنے کے لیے۔ دیjustify-content
جائیداد مقرر ہےcenter
کنٹینر کے اندر بچے کے عنصر کو افقی طور پر مرکز کرنے کے لیے۔ دیalign-items
جائیداد مقرر ہےcenter
بچے کے عنصر کو عمودی طور پر مرکز کرنے کے لیے۔ دی.item
کلاس چائلڈ عنصر کے لیے پس منظر کا رنگ اور پیڈنگ سیٹ کرتا ہے۔
HTML
<div class="container">
<div class="item">Centered Element</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
background-color: #ddd;
padding: 20px;
}
نتیجہ
مرکزی عنصر
- گرڈ لے آؤٹ: ایک اور لے آؤٹ موڈ جو آپ کو ویب صفحات کے لیے پیچیدہ گرڈ پر مبنی لے آؤٹ بنانے کی اجازت دیتا ہے۔ گرڈ کے ساتھ، آپ قطاروں اور کالموں کی وضاحت کر سکتے ہیں، اور پھر عناصر کو گرڈ کے مخصوص خلیوں میں رکھ سکتے ہیں۔ اس مثال میں،
.grid-container
کلاس استعمال کرتا ہےdisplay: grid
گرڈ لے آؤٹ موڈ کو فعال کرنے کے لیے۔ دیgrid-template-columns
جائیداد مقرر ہےrepeat(2, 1fr)
برابر چوڑائی کے دو کالم بنانے کے لیے۔ دیgap
پراپرٹی گرڈ سیلز کے درمیان فاصلہ طے کرتی ہے۔ دی.grid-item
کلاس گرڈ آئٹمز کے لیے پس منظر کا رنگ اور پیڈنگ سیٹ کرتا ہے۔
HTML
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
نتیجہ
آئٹم 1
آئٹم 2
آئٹم 3
آئٹم 4
- ٹرانزیشن: CSS3 نے ویب صفحات پر ٹرانزیشن بنانے کے لیے متعدد نئی خصوصیات اور تکنیکیں متعارف کروائیں۔ مثال کے طور پر، the
transition
پراپرٹی کو وقت کے ساتھ سی ایس ایس کی خصوصیات میں تبدیلیوں کو متحرک کرنے کے لیے استعمال کیا جا سکتا ہے۔ اس مثال میں،.box
کلاس عنصر کے لیے چوڑائی، اونچائی اور ابتدائی پس منظر کا رنگ سیٹ کرتا ہے۔ دیtransition
جائیداد مقرر ہےbackground-color 0.5s ease
آسانی سے آؤٹ ٹائمنگ فنکشن کے ساتھ آدھے سیکنڈ میں بیک گراؤنڈ کلر پراپرٹی میں تبدیلیوں کو متحرک کرنا۔ دی.box:hover
کلاس عنصر کے پس منظر کا رنگ تبدیل کرتا ہے جب ماؤس پوائنٹر اس پر ہوتا ہے، ٹرانزیشن اینیمیشن کو متحرک کرتا ہے۔
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
نتیجہ
ہور
یہاں!
یہاں!
- متحرک تصاویر: CSS3 نے ویب صفحات پر متحرک تصاویر بنانے کے لیے متعدد نئی خصوصیات اور تکنیکیں متعارف کروائیں۔ اس مثال میں، ہم نے استعمال کرتے ہوئے ایک اینیمیشن شامل کیا ہے۔
animation
جائیداد ہم نے ایک کی وضاحت کی ہے۔@keyframes
اینیمیشن کے لیے قاعدہ، جو یہ بتاتا ہے کہ باکس کو 0 سیکنڈ کے دورانیے میں 90 ڈگری سے 0.5 ڈگری تک گھومنا چاہیے۔ جب باکس پر منڈلا دیا جاتا ہے،spin
باکس کو گھمانے کے لیے اینیمیشن کا اطلاق ہوتا ہے۔ دیanimation-fill-mode
جائیداد مقرر ہےforwards
اس بات کو یقینی بنانے کے لیے کہ اینیمیشن کی آخری حالت ختم ہونے کے بعد اسے برقرار رکھا جائے۔
HTML
<div class="rotate"></div>
CSS
.rotate {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
/* Add animation properties */
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
/* Define the animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(90deg); }
}
.rotate:hover {
animation-name: spin;
}
نتیجہ
ہور
یہاں!
یہاں!
- CSS حسب ضرورت خصوصیات: اس نام سے بہی جانا جاتاہے سی ایس ایس متغیرات، اپنی مرضی کے مطابق خصوصیات CSS3 میں متعارف کرائے گئے تھے۔ وہ آپ کو CSS میں اپنی مرضی کے مطابق خصوصیات کی وضاحت اور استعمال کرنے کی اجازت دیتے ہیں، جو آپ کی سٹائل شیٹس میں اقدار کو ذخیرہ کرنے اور دوبارہ استعمال کرنے کے لیے استعمال کی جا سکتی ہیں۔ CSS متغیر کی شناخت ایک ایسے نام سے ہوتی ہے جو دو ڈیشوں سے شروع ہوتا ہے، جیسے
--my-variable
. اس مثال میں، ہم ایک CSS متغیر کی وضاحت کرتے ہیں جسے -primary-color کہتے ہیں اور اسے ایک قدر دیتے ہیں#007bff
، جو ایک نیلا رنگ ہے جو عام طور پر بہت سے ڈیزائنوں میں بنیادی رنگ کے طور پر استعمال ہوتا ہے۔ ہم نے اس متغیر کو سیٹ کرنے کے لیے استعمال کیا ہے۔background-color
بٹن عنصر کی خاصیت، کا استعمال کرتے ہوئےvar()
متغیر کے نام میں فنکشن اور پاسنگ۔ یہ بٹن کے پس منظر کے رنگ کے طور پر متغیر کی قدر کا استعمال کرے گا۔
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- متعدد پس منظر: CSS3 آپ کو ایک عنصر کے لیے متعدد پس منظر کی تصاویر کی وضاحت کرنے کی اجازت دیتا ہے، اس کی پوزیشننگ اور اسٹیکنگ آرڈر کو کنٹرول کرنے کی صلاحیت کے ساتھ۔ پس منظر دو امیجز پر مشتمل ہے،
red.png
اورblue.png
، جو استعمال کرتے ہوئے بھری ہوئی ہیں۔background-image
جائیداد پہلی تصویر،red.png
، عنصر کے دائیں نیچے کونے میں واقع ہے، جبکہ دوسری تصویر،blue.png
, عنصر کے بائیں سب سے اوپر کونے میں پوزیشن میں ہے. دیbackground-position
پراپرٹی کا استعمال ہر تصویر کی پوزیشننگ کو کنٹرول کرنے کے لیے کیا جاتا ہے۔ دیbackground-repeat
امیجز کو کنٹرول کرنے کے لیے استعمال کیا جاتا ہے کہ تصاویر کیسے دہرائی جاتی ہیں۔ پہلی تصویر،red.png
، دوبارہ نہ کرنے کے لئے مقرر کیا گیا ہے (no-repeat
جبکہ دوسری تصویر،blue.png
، دہرانے کے لیے سیٹ ہے (repeat
).
HTML
<div id="multibackground"></div>
CSS
#multibackground {
background-image: url(red.png), url(blue.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 200px;
width: 200px;
}