CSS3-kenmerke waarvan u dalk nie bewus is nie: Flexbox, roosteruitlegte, pasgemaakte eienskappe, oorgange, animasies en veelvuldige agtergronde

Cascading Style Sheets (CSS) gaan voort om te ontwikkel en die nuutste weergawes kan 'n paar kenmerke hê waarvan jy dalk nie eers bewus is nie. Hier is 'n paar van die belangrikste verbeterings en metodologieë wat met CSS3 bekendgestel is, saam met kodevoorbeelde:

• Buigsame boksuitleg (Flexbox): 'n uitlegmodus waarmee u buigsame en responsiewe uitlegte vir webblaaie kan skep. Met flexbox kan u elemente maklik in 'n houer in lyn bring en versprei. n hierdie voorbeeld, die .container klas gebruik display: flex om flexbox-uitlegmodus te aktiveer. Die justify-content eiendom is ingestel op center om die kinderelement horisontaal binne die houer te sentreer. Die align-items eiendom is ingestel op center om die kinderelement vertikaal te sentreer. Die .item klas stel die agtergrondkleur en opvulling vir die kinderelement.

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

• Roosteruitleg: 'n ander uitlegmodus waarmee u komplekse roostergebaseerde uitlegte vir webblaaie kan skep. Met rooster kan jy rye en kolomme spesifiseer en dan elemente binne spesifieke selle van die rooster plaas. In hierdie voorbeeld, die .grid-container klas gebruik display: grid om roosteruitlegmodus te aktiveer. Die grid-template-columns eiendom is ingestel op repeat(2, 1fr) om twee kolomme van gelyke breedte te skep. Die gap eienskap stel die spasiëring tussen roosterselle. Die .grid-item klas stel die agtergrondkleur en opvulling vir die roosteritems.

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

• Oorgange: CSS3 het 'n aantal nuwe eienskappe en tegnieke bekendgestel om oorgange op webblaaie te skep. Byvoorbeeld, die transition eiendom kan gebruik word om veranderinge in CSS-eienskappe oor tyd te animeer. In hierdie voorbeeld, die .box klas stel die breedte, hoogte en aanvanklike agtergrondkleur vir die element. Die transition eiendom is ingestel op background-color 0.5s ease om veranderinge aan die agtergrondkleur-eienskap oor 'n halwe sekonde te animeer met 'n gemak-in-uit tydsberekening funksie. Die .box:hover klas verander die agtergrondkleur van die element wanneer die muiswyser daaroor is, wat die oorgangsanimasie aktiveer.

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: blue;
}

• animasies: CSS3 het 'n aantal nuwe eienskappe en tegnieke bekendgestel vir die skep van animasies op webblaaie. In hierdie voorbeeld het ons 'n animasie bygevoeg deur die animation eiendom. Ons het 'n gedefinieer @keyframes reël vir die animasie, wat spesifiseer dat die boks van 0 grade tot 90 grade oor 'n duur van 0.5 sekondes moet draai. Wanneer die boks oor gesweef word, sal die spin animasie word toegepas om die boks te draai. Die animation-fill-mode eiendom is ingestel op forwards om te verseker dat die finale toestand van die animasie behou word nadat dit klaar is.

<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 persoonlike eienskappe: Ook bekend as CSS veranderlikes, pasgemaakte eienskappe is in CSS3 bekendgestel. Hulle laat jou toe om jou eie pasgemaakte eienskappe in CSS te definieer en te gebruik, wat gebruik kan word om waardes regdeur jou stylblaaie te stoor en te hergebruik. CSS veranderlikes word geïdentifiseer deur 'n naam wat begin met twee strepies, soos --my-variable. In hierdie voorbeeld definieer ons 'n CSS-veranderlike genaamd -primary-color en gee dit 'n waarde van #007bff, wat 'n blou kleur is wat algemeen gebruik word as 'n primêre kleur in baie ontwerpe. Ons het hierdie veranderlike gebruik om die background-color eienskap van 'n knoppie element, deur die gebruik van die var() funksie en die veranderlike naam deur te gee. Dit sal die waarde van die veranderlike gebruik as die agtergrondkleur vir die knoppie.

:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}

• Veelvuldige agtergronde: Met CSS3 kan u verskeie agtergrondprente vir 'n element spesifiseer, met die vermoë om die posisionering en stapelvolgorde daarvan te beheer. Die agtergrond is saamgestel uit twee beelde, red.png en blue.png, wat gelaai word met behulp van die background-image eiendom. Die eerste beeld, red.png, is in die regter onderste hoek van die element geplaas, terwyl die tweede prent, blue.png, is in die linker boonste hoek van die element geplaas. Die background-position eiendom word gebruik om die posisionering van elke prent te beheer. Die background-repeat eiendom word gebruik om te beheer hoe die beelde herhaal. Die eerste beeld, red.png, is gestel om nie te herhaal nie (no-repeat), terwyl die tweede beeld, blue.png, is gestel om te herhaal (repeat).

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