مواد مارڪيٽنگ

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;
    }

    نتيجا

    Douglas Karr

    Douglas Karr جو CMO آهي OpenINSIGHTS ۽ جو باني Martech Zone. ڊگلس ڪيترن ئي ڪامياب MarTech startups جي مدد ڪئي آهي، مارٽيڪ حاصلات ۽ سيڙپڪاري ۾ 5 بلين ڊالر کان وڌيڪ جي محنت ۾ مدد ڪئي آهي، ۽ انهن جي سيلز ۽ مارڪيٽنگ جي حڪمت عملي کي لاڳو ڪرڻ ۽ خودڪار ڪرڻ ۾ ڪمپنين جي مدد ڪرڻ جاري آهي. ڊگلس هڪ بين الاقوامي طور تي تسليم ٿيل ڊجيٽل ٽرانسفارميشن ۽ مار ٽيڪ ماهر ۽ اسپيڪر آهي. ڊگلس هڪ ڊمي جي گائيڊ ۽ ڪاروباري قيادت جي ڪتاب جو شايع ٿيل ليکڪ پڻ آهي.

    لاڳاپيل مقالات

    مٿي تي ڪلڪ ڪري بٽڻ
    بند

    Adblock جو پتو لڳايو ويو

    Martech Zone توهان کي هي مواد بغير ڪنهن قيمت تي مهيا ڪرڻ جي قابل آهي ڇو ته اسان اسان جي سائيٽ کي اشتهارن جي آمدني، الحاق لنڪس، ۽ اسپانسرشپ ذريعي رقم ڪريون ٿا. اسان جي تعريف ڪنداسين جيڪڏهن توهان پنهنجي اشتهار بلاڪ ڪندڙ کي هٽائي ڇڏيو جيئن توهان اسان جي سائيٽ کي ڏسو.