مواد مارڪيٽنگ
CSS3 خاصيتون جيڪي توھان کان واقف نه ھجن: Flexbox، Grid Layouts، Custom Properties، Transitions، Animations، and Multiple Backgrounds
ڪِسڪيڊنگ اسٽائل شيٽ (ايس ايم ايس) ترقي ڪرڻ جاري رکو ۽ جديد نسخن ۾ شايد ڪجھ خاصيتون آھن جن جي توھان کي شايد خبر نه ھجي. هتي ڪي اهم سڌارا ۽ طريقا آهن CSS3 سان متعارف ڪرايل ڪوڊ مثالن سان گڏ:
- لچڪدار باڪس لي آئوٽ (Flexbox): هڪ ترتيب وارو موڊ جيڪو توهان کي ويب صفحن لاءِ لچڪدار ۽ جوابي ترتيب ٺاهڻ جي اجازت ڏئي ٿو. flexbox سان، توهان آساني سان ترتيب ڏئي سگهو ٿا ۽ هڪ ڪنٽينر اندر عناصر کي ورهائي سگهو ٿا. n هن مثال، جي
.container
طبقاتي استعمالdisplay: flex
flexbox layout mode کي فعال ڪرڻ لاءِ. جيjustify-content
ملڪيت مقرر ڪئي وئي آهيcenter
ڪنٽينر جي اندر ٻار جي عنصر کي افقي طور تي مرڪز ڪرڻ لاء. جيalign-items
ملڪيت مقرر ڪئي وئي آهيcenter
ٻار جي عنصر کي عمودي طور تي مرڪز ڪرڻ لاء. جي.item
ڪلاس ٻار جي عنصر لاءِ پس منظر جو رنگ ۽ پيڊنگ سيٽ ڪري ٿو.
HTML
<div class="container">
<div class="item">Centered Element</div>
</div>
ايس ايم ايس
.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>
ايس ايم ايس
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
نتيجا
ايٽم 1
ايٽم 2
ايٽم 3
ايٽم 4
- منتقلي: CSS3 متعارف ڪرايو ڪيترن ئي نيون خاصيتون ۽ ٽيڪنالاجيون ويب پيجز تي ٽرانزيڪشن ٺاهڻ لاءِ. مثال طور، جي
transition
ملڪيت وقت سان گڏ CSS ملڪيت ۾ تبديلين کي متحرڪ ڪرڻ لاء استعمال ڪري سگھجي ٿو. هن مثال ۾، جي.box
ڪلاس عنصر جي چوٽي، اوچائي، ۽ شروعاتي پس منظر جو رنگ مقرر ڪري ٿو. جيtransition
ملڪيت مقرر ڪئي وئي آهيbackground-color 0.5s ease
پس منظر جي رنگ جي ملڪيت ۾ تبديلين کي متحرڪ ڪرڻ لاءِ اڌ سيڪنڊ کان وڌيڪ آسان-ان-آئوٽ ٽائمنگ فنڪشن سان. جي.box:hover
طبقاتي عنصر جي پس منظر جو رنگ تبديل ڪري ٿو جڏهن ماؤس پوائنٽر ان جي مٿان هوندو آهي، منتقلي اينيميشن کي متحرڪ ڪندي.
HTML
<div class="box"></div>
ايس ايم ايس
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
نتيجا
Hover
هتي!
هتي!
- Animations: CSS3 ويب صفحن تي اينيميشن ٺاهڻ لاءِ ڪيتريون ئي نيون خاصيتون ۽ ٽيڪنالاجيون متعارف ڪرايون آهن. هن مثال ۾، اسان استعمال ڪندي هڪ متحرڪ شامل ڪيو آهي
animation
ملڪيت. اسان وضاحت ڪئي آهي a@keyframes
اينيميشن لاءِ قاعدو، جيڪو بيان ڪري ٿو ته باڪس کي 0 سيڪنڊن جي عرصي دوران 90 درجا کان 0.5 درجا گھمڻ گهرجي. جڏهن دٻي کي مٿي ڪيو ويندو آهي، تهspin
باڪس کي گھمائڻ لاءِ اينيميشن لاڳو ڪئي وئي آھي. جيanimation-fill-mode
ملڪيت مقرر ڪئي وئي آهيforwards
انهي کي يقيني بڻائڻ لاءِ ته اينيميشن جي آخري حالت ختم ٿيڻ کان پوءِ برقرار رهي.
HTML
<div class="rotate"></div>
ايس ايم ايس
.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;
}
نتيجا
Hover
هتي!
هتي!
- CSS ڪسٽم خاصيتون: پڻ سڃاتو وڃي ٿو CSS متغير, CSS3 ۾ ڪسٽم ملڪيت متعارف ڪرايا ويا. اهي توهان کي CSS ۾ توهان جي پنهنجي ڪسٽم ملڪيت جي وضاحت ۽ استعمال ڪرڻ جي اجازت ڏين ٿا، جيڪي توهان جي اسٽائل شيٽ ۾ قدرن کي ذخيرو ۽ ٻيهر استعمال ڪرڻ لاء استعمال ڪري سگھجن ٿيون. CSS متغيرن جي سڃاڻپ هڪ نالي سان ٿئي ٿي جيڪا ٻن ڊشز سان شروع ٿئي ٿي، جهڙوڪ
--my-variable
. هن مثال ۾، اسان هڪ CSS متغير جي وضاحت ڪريون ٿا جنهن کي -primary-color سڏيو وڃي ٿو ۽ ان کي قيمت ڏيو#007bff
، جيڪو هڪ نيرو رنگ آهي عام طور تي ڪيترن ئي ڊيزائنن ۾ بنيادي رنگ طور استعمال ڪيو ويندو آهي. اسان هن متغير کي سيٽ ڪرڻ لاء استعمال ڪيو آهيbackground-color
بٽڻ جي عنصر جي ملڪيت، استعمال ڪنديvar()
فعل ۽ variable نالي ۾ گذري. هي بٽڻ لاء پس منظر رنگ جي طور تي متغير جي قيمت استعمال ڪندو.
: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>
ايس ايم ايس
#multibackground {
background-image: url(red.png), url(blue.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 200px;
width: 200px;
}