Kontenut Marketing

Karatteristiċi tas-CSS3 li tista' ma tkunx konxju bihom: Flexbox, Grid Layouts, Proprjetajiet tad-dwana, Transizzjonijiet, Animazzjonijiet, u Sfondi Multipli

Folji tal-Istil Cascading (CSS) tkompli tevolvi u l-aħħar verżjonijiet jista 'jkollhom xi karatteristiċi li tista' lanqas tkun taf bihom. Hawn huma xi wħud mit-titjib u l-metodoloġiji ewlenin introdotti b'CSS3, flimkien ma 'eżempji ta' kodiċi:

  • Tqassim tal-Kaxxa Flessibbli (Flexbox): mod ta 'tqassim li jippermettilek toħloq taqsim flessibbli u li jirrispondu għall-paġni tal-web. Bil-flexbox, tista 'faċilment tallinja u tqassam elementi f'kontenitur. n dan l-eżempju, il .container użi tal-klassi display: flex biex tippermetti l-modalità tat-tqassim tal-flexbox. Il- justify-content proprjetà hija stabbilita għal center biex iċċentra orizzontalment l-element tifel fil-kontenitur. Il- align-items proprjetà hija stabbilita għal center biex iċċentra vertikalment l-element tat-tifel. Il- .item klassi tistabbilixxi l-kulur fl-isfond u l-ikkuttunar għall-element tifel.

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

Riżultat

Element Iċċentrat
  • It-tqassim tal-grilja: mod ieħor ta 'tqassim li jippermettilek toħloq taqsim kumpless ibbażat fuq grid għall-paġni tal-web. Bil-grilja, tista 'tispeċifika ringieli u kolonni, u mbagħad tpoġġi elementi f'ċelloli speċifiċi tal-grilja. F'dan l-eżempju, il- .grid-container użi tal-klassi display: grid biex tippermetti l-mod ta 'tqassim tal-grilja. Il- grid-template-columns proprjetà hija stabbilita għal repeat(2, 1fr) biex toħloq żewġ kolonni ta 'wisa' ugwali. Il- gap proprjetà tistabbilixxi l-ispazjar bejn iċ-ċelloli tal-grilja. Il- .grid-item klassi tistabbilixxi l-kulur fl-isfond u l-ikkuttunar għall-oġġetti tal-grilja.

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

Riżultat

Punt 1
Punt 2
Punt 3
Punt 4
  • Transizzjonijiet: CSS3 introduċa għadd ta 'proprjetajiet u tekniki ġodda għall-ħolqien ta' tranżizzjonijiet fuq paġni tal-web. Per eżempju, il- transition proprjetà tista 'tintuża biex janimaw bidliet fil-proprjetajiet CSS maż-żmien. F'dan l-eżempju, il- .box klassi tistabbilixxi l-wisa ', l-għoli, u l-kulur tal-isfond inizjali għall-element. Il- transition proprjetà hija stabbilita għal background-color 0.5s ease biex janimaw bidliet fil-proprjetà tal-kulur tal-isfond fuq nofs sekonda b'funzjoni ta 'ħin ta' faċilità ta 'dħul. Il- .box:hover klassi tibdel il-kulur fl-isfond tal-element meta l-pointer tal-maws ikun fuqu, u b'hekk tiskatta l-animazzjoni tat-tranżizzjoni.

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

Riżultat

Imbattla
Hawn!
  • animazzjonijiet: CSS3 introduċa għadd ta' proprjetajiet u tekniki ġodda għall-ħolqien ta' animazzjonijiet fuq paġni tal-web. F'dan l-eżempju, żidna animazzjoni bl-użu tal- animation proprjetà. Imxejna definiti a @keyframes regola għall-animazzjoni, li tispeċifika li l-kaxxa għandha ddur minn 0 gradi għal 90 grad fuq tul ta '0.5 sekondi. Meta l-kaxxa tittajjar fuq, il- spin animazzjoni hija applikata biex iddawwar il-kaxxa. Il- animation-fill-mode proprjetà hija stabbilita għal forwards biex jiġi żgurat li l-istat finali tal-animazzjoni jinżamm wara li tispiċċa.

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

Riżultat

Imbattla
Hawn!
  • Proprjetajiet Custom CSS: Magħruf ukoll bħala Varjabbli CSS, proprjetajiet tad-dwana ġew introdotti f'CSS3. Huma jippermettulek tiddefinixxi u tuża l-proprjetajiet tad-dwana tiegħek stess f'CSS, li jistgħu jintużaw biex taħżen u tuża mill-ġdid il-valuri tul l-istilsheets tiegħek. Il-varjabbli CSS huma identifikati b'isem li jibda b'żewġ sing, bħal
    --my-variable. F'dan l-eżempju, aħna niddefinixxu varjabbli CSS imsejħa –primary-color u nagħtuha valur ta' #007bff, li huwa kulur blu komunement użat bħala kulur primarju f'ħafna disinji. Aħna użajna din il-varjabbli biex tissettja l- background-color proprjetà ta’ element buttuna, billi tuża l- var() funzjoni u tgħaddi l-isem varjabbli. Dan se juża l-valur tal-varjabbli bħala l-kulur fl-isfond għall-buttuna.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Sfondi Multipli: CSS3 jippermettilek li tispeċifika immaġini multipli fl-isfond għal element, bil-kapaċità li tikkontrolla l-pożizzjonament u l-ordni tal-istivar tiegħu. L-isfond huwa magħmul minn żewġ stampi, red.png u, blue.png, li huma mgħobbija bl-użu background-image proprjetà. L-ewwel immaġni, red.png, huwa pożizzjonat fir-rokna t'isfel tal-lemin tal-element, filwaqt li t-tieni immaġini, blue.png, huwa pożizzjonat fir-rokna ta 'fuq tax-xellug tal-element. Il- background-position proprjetà tintuża biex tikkontrolla l-pożizzjonament ta 'kull immaġini. Il- background-repeat proprjetà tintuża biex tikkontrolla kif l-immaġini jirrepetu. L-ewwel immaġni, red.png, hija ssettjata biex ma tirrepetix (no-repeat), filwaqt li t-tieni immaġini, blue.png, hija ssettjata biex tirrepeti (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;
    }

    Riżultat

    Douglas Karr

    Douglas Karr huwa CMO ta OpenINSIGHTS u l-fundatur tal- Martech Zone. Douglas għen għexieren ta’ startups ta’ MarTech ta’ suċċess, għen fid-diliġenza dovuta ta’ aktar minn $5 biljun f’akkwisti u investimenti ta’ Martech, u jkompli jgħin lill-kumpaniji fl-implimentazzjoni u l-awtomatizzazzjoni tal-istrateġiji tal-bejgħ u l-kummerċjalizzazzjoni tagħhom. Douglas huwa trasformazzjoni diġitali rikonoxxuta internazzjonalment u espert u kelliem tal-MarTech. Douglas huwa wkoll awtur ippubblikat ta 'gwida ta' Dummie u ktieb ta 'tmexxija tan-negozju.

    Artikli relatati

    Lura għall-buttuna ta 'fuq
    Agħlaq

    Adblock Individwat

    Martech Zone huwa kapaċi jagħtik dan il-kontenut mingħajr ebda spiża għaliex aħna monetize is-sit tagħna permezz ta 'dħul minn reklam, links affiljati, u sponsorships. Napprezzaw jekk tneħħi l-imblokkatur tar-reklami tiegħek hekk kif tara s-sit tagħna.