Edukia Marketing

Agian ezagutzen ez dituzun CSS3 ezaugarriak: Flexbox, Sare-diseinuak, Propietate pertsonalizatuak, Trantsizioak, Animazioak eta hainbat atzeko plano

Kaskadako estilo-orriak (CSS) eboluzionatzen jarraitzen du eta azken bertsioek agian ezagutzen ez dituzun ezaugarri batzuk izan ditzakete. Hona hemen CSS3-rekin sartutako hobekuntza eta metodologia nagusietako batzuk, kode adibideekin batera:

  • Kutxa malguaren diseinua (Flexbox): web orrietarako diseinu malguak eta sentikorrak sortzeko aukera ematen duen diseinu modua. Flexbox-ekin, erraz lerrokatu eta banatu ditzakezu elementuak edukiontzi batean. n adibide honetan, .container klase erabilerak display: flex flexbox diseinu modua gaitzeko. The justify-content jabetza ezarrita dago center elementu umea edukiontzi barruan horizontalki zentratzeko. The align-items jabetza ezarrita dago center elementu umea bertikalki zentratzeko. The .item klaseak atzeko planoaren kolorea eta betegarria ezartzen ditu haurraren elementuarentzat.

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

Emaitza

Zentratutako elementua
  • Sarearen diseinua: sarean oinarritutako diseinu konplexuak sortzeko aukera ematen duen beste diseinu-modu bat web orrietarako. Saretarekin, errenkadak eta zutabeak zehaztu ditzakezu, eta, ondoren, elementuak sareko gelaxka zehatzetan jar ditzakezu. Adibide honetan, .grid-container klase erabilerak display: grid sareta diseinu modua gaitzeko. The grid-template-columns jabetza ezarrita dago repeat(2, 1fr) zabalera berdineko bi zutabe sortzeko. The gap propietateak sareko gelaxken arteko tartea ezartzen du. The .grid-item klaseak atzeko planoaren kolorea eta betegarria ezartzen ditu sareta-elementuen.

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

Emaitza

Item 1
Item 2
Item 3
Item 4
  • Trantsizioak: CSS3-k web orrietan trantsizioak sortzeko hainbat propietate eta teknika berri sartu zituen. Adibidez, the transition propietatea CSS propietateetan aldaketak animatzeko erabil daiteke denboran zehar. Adibide honetan, .box class-ek elementuaren zabalera, altuera eta hasierako atzeko kolorea ezartzen ditu. The transition jabetza ezarrita dago background-color 0.5s ease atzeko planoko kolorearen propietatearen aldaketak segundo erdi baino gehiago animatzeko, erraz sartzeko denbora-funtzio batekin. The .box:hover klaseak elementuaren atzeko planoaren kolorea aldatzen du saguaren erakuslea gainean dagoenean, trantsizio animazioa abiaraziz.

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

Emaitza

Pasatzean
Hemen!
  • animazioak: CSS3-k web orrietan animazioak sortzeko hainbat propietate eta teknika berri sartu zituen. Adibide honetan, animazio bat gehitu dugu hau erabiliz animation jabetza. A definitu dugu @keyframes animaziorako araua, kutxa 0 gradutik 90 gradura biratu behar dela zehazten duena 0.5 segundoko iraupenean. Kutxa gainean jartzen denean, spin animazioa aplikatzen da koadroa biratzeko. The animation-fill-mode jabetza ezarrita dago forwards animazioaren azken egoera amaitu ondoren mantentzen dela ziurtatzeko.

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

Emaitza

Pasatzean
Hemen!
  • CSS propietate pertsonalizatuak: bezala ere ezaguna CSS aldagaiak, propietate pertsonalizatuak CSS3n sartu ziren. Zure propietate pertsonalizatuak CSS-n definitzeko eta erabiltzeko aukera ematen dizute, estilo-orrietan balioak gordetzeko eta berrerabiltzeko erabil daitezkeenak. CSS aldagaiak bi marrarekin hasten den izen batekin identifikatzen dira, adibidez
    --my-variable. Adibide honetan, –primary-color izeneko CSS aldagai bat definitzen dugu eta balio bat ematen diogu #007bff, hau da, diseinu askotan kolore nagusi gisa erabiltzen den kolore urdina. Aldagai hau ezartzeko erabili dugu background-color botoiaren elementu baten propietatea erabiliz var() funtzioa eta aldagaiaren izena pasatuz. Honek aldagaiaren balioa erabiliko du botoiaren atzeko planoko kolore gisa.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Hainbat atzeko planoa: CSS3-k elementu baten atzeko planoko hainbat irudi zehaztea ahalbidetzen du, bere kokapena eta pilaketa-ordena kontrolatzeko gaitasunarekin. Atzealdea bi irudiz osatuta dago, red.png blue.png, kargatzen direnak erabiliz background-image jabetza. Lehenengo irudia, red.png, elementuaren beheko eskuineko izkinan kokatzen da, bigarren irudia, berriz, blue.png, elementuaren goiko ezkerreko ertzean kokatzen da. The background-position propietatea irudi bakoitzaren kokapena kontrolatzeko erabiltzen da. The background-repeat propietatea irudiak nola errepikatzen diren kontrolatzeko erabiltzen da. Lehenengo irudia, red.png, ez errepikatzeko ezarrita dago (no-repeat), bigarren irudia, berriz, blue.png, errepikatzeko ezarrita dago (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;
    }

    Emaitza

    Douglas Karr

    Douglas Karr -ren CMO da OpenINSIGHTS eta ren sortzailea Martech Zone. Douglasek MarTech startup arrakastatsu batzuei lagundu die, Martech-en erosketetan eta inbertsioetan 5 milioi dolar baino gehiagoko diligentzian lagundu du eta enpresei laguntzen jarraitzen du salmenta eta marketin estrategiak ezartzen eta automatizatzen. Douglas nazioartean ezaguna den eraldaketa digitala eta MarTech aditua eta hizlaria da. Douglas Dummie's gidaren eta negozioen lidergoaren liburu baten egilea ere bada.

    Gaiarekin lotutako artikuluak

    Itzuli gora botoia
    Itxi

    Adblokea hauteman da

    Martech Zone eduki hau kosturik gabe eskaintzeko gai da, gure webgunea iragarkien diru-sarreren, kideen esteken eta babesen bidez dirua irabazten dugulako. Eskertuko genuke gure gunea ikusten duzun bitartean iragarkien blokeatzailea kentzea.