منځپانګه بازار

د CSS3 ځانګړتیاوې چې تاسو شاید خبر نه یاست: فلیکس باکس، گرډ ترتیب، دودیز ملکیتونه، لیږدونه، حرکتونه، او ډیری شالیدونه

کاسکیډینګ سټایل شیټونه (سی ایس ایس) پرمختګ ته دوام ورکړئ او وروستي نسخې ممکن ځینې ځانګړتیاوې ولري چې تاسو یې حتی خبر نه یاست. دلته ځینې لوی پرمختګونه او میتودونه دي چې د CSS3 سره معرفي شوي، د کوډ مثالونو سره:

  • د انعطاف وړ بکس ترتیب (Flexbox): د ترتیب حالت چې تاسو ته اجازه درکوي د ویب پاڼو لپاره انعطاف وړ او ځواب ویونکي ترتیبونه رامینځته کړئ. د فلیکس بکس سره، تاسو کولی شئ په اسانۍ سره په کانټینر کې عناصر تنظیم او توزیع کړئ. د دې مثال، د .container ټولګي کارول display: flex د فلیکس باکس ترتیب حالت فعالولو لپاره. د 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;
}

د پايلو

هور
دلته!
  • انیمیشنونه: 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;
}

د پايلو

هور
دلته!
  • د 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>

    سی ایس ایس

    #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. ډګلاس د لسګونو بریالي مارټیک پیلونو سره مرسته کړې ، د مارټیک استملاک او پانګوونې کې د 5 ملیارد ډالرو څخه ډیر په پام کې نیولو کې مرسته کړې ، او د دوی د پلور او بازار موندنې ستراتیژیو پلي کولو او اتومات کولو کې شرکتونو سره مرستې ته دوام ورکوي. ډګلاس په نړیواله کچه پیژندل شوی ډیجیټل بدلون او د مار ټیک ماهر او سپیکر دی. ډګلاس د ډمي لارښود او د سوداګرۍ مشرتابه کتاب یو خپور شوی لیکوال هم دی.

    اړونده بیشتر

    بېرته پورته تڼۍ ته
    نژدې

    اډ بلاک کشف شو

    Martech Zone د دې وړتیا لري چې تاسو ته دا مینځپانګه په هیڅ لګښت چمتو کړي ځکه چې موږ د اعلاناتو عاید ، وابسته لینکونو ، او سپانسرشپونو له لارې زموږ سایټ منیټ کوو. موږ به ستاینه وکړو که تاسو زموږ د سایټ لیدو سره سم خپل د اعلاناتو بلاکر لرې کړئ.