Maudhui ya masoko

Vipengele vya CSS3 Ambavyo Huwezi Kuvifahamu: Flexbox, Miundo ya Gridi, Sifa Maalum, Mipito, Uhuishaji, na Mandhari Nyingi.

Laha za Mtindo wa Kuachia (CSS) endelea kubadilika na matoleo mapya zaidi yanaweza kuwa na baadhi ya vipengele ambavyo huenda hata hujui. Hapa kuna baadhi ya maboresho na mbinu kuu zilizoletwa na CSS3, pamoja na mifano ya msimbo:

  • Mpangilio wa Sanduku Inayobadilika (Flexbox): hali ya mpangilio inayokuruhusu kuunda mipangilio inayoweza kunyumbulika na sikivu kwa kurasa za wavuti. Ukiwa na flexbox, unaweza kupanga na kusambaza vipengele kwa urahisi ndani ya kontena. n mfano huu, .container matumizi ya darasa display: flex kuwezesha hali ya mpangilio wa flexbox. The justify-content mali imewekwa center kuweka kipengee cha mtoto kwa usawa ndani ya chombo. The align-items mali imewekwa center kuweka kipengee cha mtoto kiwima. The .item darasa huweka rangi ya mandharinyuma na pedi kwa kipengele cha mtoto.

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

Matokeo yake

Kipengele kilicho katikati
  • Muundo wa gridi: hali nyingine ya mpangilio ambayo hukuruhusu kuunda mipangilio changamano ya msingi wa gridi ya kurasa za wavuti. Kwa gridi ya taifa, unaweza kutaja safu na safu, na kisha kuweka vipengele ndani ya seli maalum za gridi ya taifa. Katika mfano huu, .grid-container matumizi ya darasa display: grid kuwezesha hali ya mpangilio wa gridi. The grid-template-columns mali imewekwa repeat(2, 1fr) kuunda safu mbili za upana sawa. The gap mali huweka nafasi kati ya seli za gridi ya taifa. The .grid-item class huweka rangi ya usuli na pedi za vipengee vya gridi ya taifa.

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

Matokeo yake

Item 1
Item 2
Item 3
Item 4
  • Mpito: CSS3 ilianzisha idadi ya sifa mpya na mbinu za kuunda mabadiliko kwenye kurasa za wavuti. Kwa mfano, transition mali inaweza kutumika kuhuisha mabadiliko katika sifa za CSS kwa wakati. Katika mfano huu, .box class huweka upana, urefu, na rangi ya asili ya mandharinyuma kwa kipengele. The transition mali imewekwa background-color 0.5s ease ili kuhuisha mabadiliko kwenye kipengele cha rangi ya usuli kwa zaidi ya nusu sekunde kwa kutumia muda wa kuingia kwa urahisi. The .box:hover class hubadilisha rangi ya usuli ya kipengele wakati kielekezi cha kipanya kiko juu yake, na kusababisha uhuishaji wa mpito.

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

Matokeo yake

hover
Hapa!
  • Mifano: CSS3 ilianzisha idadi ya sifa na mbinu mpya za kuunda uhuishaji kwenye kurasa za wavuti. Katika mfano huu, tumeongeza uhuishaji kwa kutumia animation mali. Tumefafanua a @keyframes sheria ya uhuishaji, ambayo inabainisha kuwa kisanduku kinapaswa kuzunguka kutoka digrii 0 hadi digrii 90 kwa muda wa sekunde 0.5. Wakati kisanduku kimewekwa juu, spin uhuishaji unatumika kuzungusha kisanduku. The animation-fill-mode mali imewekwa forwards ili kuhakikisha kuwa hali ya mwisho ya uhuishaji inahifadhiwa baada ya kukamilika.

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

Matokeo yake

hover
Hapa!
  • Sifa Maalum za CSS: Pia inajulikana kama Vigezo vya CSS, sifa maalum zilianzishwa katika CSS3. Zinakuruhusu kufafanua na kutumia sifa zako maalum katika CSS, ambazo zinaweza kutumika kuhifadhi na kutumia tena thamani katika laha zako zote za mitindo. Vigezo vya CSS vinatambuliwa kwa jina linaloanza na deshi mbili, kama vile
    --my-variable. Katika mfano huu, tunafafanua tofauti ya CSS inayoitwa -primary-color na kuipa thamani ya #007bff, ambayo ni rangi ya samawati inayotumika sana kama rangi ya msingi katika miundo mingi. Tumetumia utaftaji huu kuweka faili ya background-color mali ya kipengele cha kifungo, kwa kutumia var() kazi na kupita kwa jina la kutofautisha. Hii itatumia thamani ya kutofautisha kama rangi ya usuli ya kitufe.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Mandhari Nyingi: CSS3 hukuruhusu kubainisha picha nyingi za mandharinyuma za kipengele, chenye uwezo wa kudhibiti upangaji wake na mpangilio wa mrundikano. Usuli unajumuisha picha mbili, red.png na blue.png, ambazo hupakiwa kwa kutumia background-image mali. Picha ya kwanza, red.png, imewekwa kwenye kona ya chini ya kulia ya kipengele, wakati picha ya pili, blue.png, imewekwa kwenye kona ya juu ya kushoto ya kipengele. The background-position mali hutumika kudhibiti uwekaji wa kila picha. The background-repeat mali hutumika kudhibiti jinsi picha zinavyojirudia. Picha ya kwanza, red.png, imewekwa kutorudia (no-repeat), wakati picha ya pili, blue.png, imewekwa kurudia (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;
    }

    Matokeo yake

    Douglas Karr

    Douglas Karr ni CMO ya Fungua MAELEZO na mwanzilishi wa Martech Zone. Douglas amesaidia kampuni nyingi za kuanzisha MarTech zilizofaulu, amesaidia katika bidii inayofaa ya zaidi ya $5 bil katika ununuzi na uwekezaji wa Martech, na anaendelea kusaidia kampuni katika kutekeleza na kuelekeza mikakati yao ya uuzaji na uuzaji kiotomatiki. Douglas ni mtaalamu wa mabadiliko ya kidijitali anayetambulika kimataifa na mtaalam wa MarTech na spika. Douglas pia ni mwandishi aliyechapishwa wa mwongozo wa Dummie na kitabu cha uongozi wa biashara.

    Related Articles

    Rudi kwenye kifungo cha juu
    karibu

    Adblock Imegunduliwa

    Martech Zone inaweza kukupa maudhui haya bila gharama kwa sababu tunachuma mapato ya tovuti yetu kupitia mapato ya matangazo, viungo vya washirika na ufadhili. Tutashukuru ikiwa ungeondoa kizuizi chako cha matangazo unapotazama tovuti yetu.