Kontenta Merkatumado

CSS3-Trajtoj pri kiuj Vi Eble Ne Konsciu: Flexbox, Kradaj Aranĝoj, Propraj Propraĵoj, Transiroj, Animacioj kaj Multoblaj Fonoj

Kaskadaj stilfolioj (CSS) daŭre evoluas kaj la plej novaj versioj eble havas kelkajn funkciojn, pri kiuj vi eble eĉ ne konscias. Jen kelkaj el la ĉefaj plibonigoj kaj metodaroj enkondukitaj kun CSS3, kune kun kodaj ekzemploj:

  • Fleksebla Skatolo Aranĝo (Flexbox): aranĝa reĝimo, kiu ebligas al vi krei flekseblajn kaj respondemajn aranĝojn por retpaĝoj. Kun flexbox, vi povas facile vicigi kaj distribui elementojn ene de ujo. n ĉi tiu ekzemplo, la .container klasaj uzoj display: flex por ebligi flekskestan aranĝan reĝimon. La justify-content posedaĵo estas agordita al center por horizontale centri la infanan elementon ene de la ujo. La align-items posedaĵo estas agordita al center por vertikale centri la infanan elementon. La .item klaso fiksas la fonkoloron kaj kompletigo por la infana elemento.

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

rezulto

Centrita Elemento
  • Krada aranĝo: alia aranĝa reĝimo, kiu ebligas al vi krei kompleksajn krad-bazitajn aranĝojn por retpaĝoj. Kun krado, vi povas specifi vicojn kaj kolumnojn, kaj poste meti elementojn ene de specifaj ĉeloj de la krado. En ĉi tiu ekzemplo, la .grid-container klasaj uzoj display: grid por ebligi kradan aranĝan reĝimon. La grid-template-columns posedaĵo estas agordita al repeat(2, 1fr) krei du kolumnojn de egala larĝo. La gap posedaĵo fiksas la interspacon inter kradaj ĉeloj. La .grid-item klaso fiksas la fonkoloron kaj kompletigo por la kradaj eroj.

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

rezulto

Item 1
Item 2
Item 3
Item 4
  • Transiroj: CSS3 enkondukis kelkajn novajn trajtojn kaj teknikojn por krei transirojn sur retpaĝoj. Ekzemple, la transition posedaĵo povas esti uzata por animi ŝanĝojn en CSS-ecoj laŭlonge de la tempo. En ĉi tiu ekzemplo, la .box klaso fiksas la larĝon, altecon kaj komencan fonkoloron por la elemento. La transition posedaĵo estas agordita al background-color 0.5s ease por vigligi ŝanĝojn al la fonkoloro-posedaĵo dum duona sekundo kun facil-en-elira tempofunkcio. La .box:hover klaso ŝanĝas la fonkoloron de la elemento kiam la musmontrilo estas super ĝi, ekigante la transiran animacion.

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

rezulto

Ŝvebi
Jen!
  • Animacioj: CSS3 lanĉis kelkajn novajn trajtojn kaj teknikojn por krei animaciojn sur retpaĝoj. En ĉi tiu ekzemplo, ni aldonis animacion uzante la animation posedaĵo. Ni difinis a @keyframes regulo por la animacio, kiu specifas, ke la skatolo devas turni de 0 gradoj ĝis 90 gradoj dum daŭro de 0.5 sekundoj. Kiam la skatolo ŝvebas super, la spin animacio estas aplikata por turni la skatolon. La animation-fill-mode posedaĵo estas agordita al forwards por certigi ke la fina stato de la animacio estas konservita post kiam ĝi finiĝas.

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

rezulto

Ŝvebi
Jen!
  • CSS Propraj Propraĵoj: Ankaŭ konata kiel CSS-variabloj, kutimaj propraĵoj estis enkondukitaj en CSS3. Ili permesas vin difini kaj uzi viajn proprajn kutimajn ecojn en CSS, kiuj povas esti uzataj por stoki kaj reuzi valorojn tra viaj stilfolioj. CSS-variabloj estas identigitaj per nomo, kiu komenciĝas per du streketoj, kiel ekzemple
    --my-variable. En ĉi tiu ekzemplo, ni difinas CSS-variablon nomatan –primary-color kaj donas al ĝi valoron de #007bff, kiu estas blua koloro ofte uzata kiel primara koloro en multaj dezajnoj. Ni uzis ĉi tiun variablon por agordi la background-color posedaĵo de butonelemento, uzante la var() funkcio kaj eniranta la variablonomon. Ĉi tio uzos la valoron de la variablo kiel la fonkoloron por la butono.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Multoblaj Fonoj: CSS3 permesas vin specifi plurajn fonbildojn por elemento, kun la kapablo kontroli ĝian poziciigon kaj stakordon. La fono estas kunmetita de du bildoj, red.png kaj blue.png, kiuj estas ŝarĝitaj uzante la background-image posedaĵo. La unua bildo, red.png, estas poziciigita ĉe la dekstra malsupra angulo de la elemento, dum la dua bildo, blue.png, estas poziciigita ĉe la maldekstra supra angulo de la elemento. La background-position posedaĵo estas uzata por kontroli la poziciigon de ĉiu bildo. La background-repeat posedaĵo estas uzata por kontroli kiel la bildoj ripetas. La unua bildo, red.png, estas agordita por ne ripeti (no-repeat), dum la dua bildo, blue.png, estas agordita por ripeti (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;
    }

    rezulto

    Douglas Karr

    Douglas Karr estas CMO de OpenINSIGHTS kaj la fondinto de la Martech Zone. Douglas helpis dekduojn da sukcesaj MarTech-noventreprenoj, helpis en la konvena diligento de pli ol $ 5 miliardoj en Martech-akiroj kaj investoj, kaj daŭre helpas firmaojn en efektivigado kaj aŭtomatigo de siaj vendaj kaj merkatigstrategioj. Douglas estas internacie agnoskita cifereca transformo kaj MarTech-eksperto kaj parolanto. Douglas ankaŭ estas publikigita verkinto de la gvidisto de Dummie kaj komerca gvidadlibro.

    rilataj Artikoloj

    Reen al la supra butono
    Fermi

    Adbloko Detektita

    Martech Zone kapablas provizi al vi ĉi tiun enhavon senkoste ĉar ni monetigas nian retejon per reklamaj enspezoj, filiaj ligiloj kaj sponsorado. Ni dankus se vi forigus vian reklamblokilon dum vi rigardas nian retejon.