Conținut de marketing

Caracteristici CSS3 de care este posibil să nu fii conștient: Flexbox, Aspecte de grilă, Proprietăți personalizate, Tranziții, Animații și fundaluri multiple

Foi de stil în cascadă (CSS) continuă să evolueze, iar cele mai recente versiuni pot avea unele caracteristici de care este posibil să nu fii conștient. Iată câteva dintre îmbunătățirile și metodologiile majore introduse cu CSS3, împreună cu exemple de cod:

  • Aspect cutie flexibilă (Flexbox): un mod de aspect care vă permite să creați machete flexibile și receptive pentru paginile web. Cu flexbox, puteți alinia și distribui cu ușurință elementele într-un container. n acest exemplu, .container utilizări de clasă display: flex pentru a activa modul de aspect flexbox. The justify-content proprietatea este setată la center pentru a centra orizontal elementul copil în interiorul containerului. The align-items proprietatea este setată la center pentru a centra vertical elementul copil. The .item clasa stabilește culoarea de fundal și umplutura pentru elementul copil.

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

Rezultat

Element centrat
  • Aspectul grilei: un alt mod de aspect care vă permite să creați machete complexe bazate pe grilă pentru pagini web. Cu grilă, puteți specifica rânduri și coloane și apoi plasați elemente în anumite celule ale grilei. În acest exemplu, .grid-container utilizări de clasă display: grid pentru a activa modul de aspect al grilei. The grid-template-columns proprietatea este setată la repeat(2, 1fr) pentru a crea două coloane de lățime egală. The gap proprietatea stabilește distanța dintre celulele grilei. The .grid-item clasa stabilește culoarea de fundal și umplutura pentru elementele grilei.

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

Rezultat

Postul 1
Postul 2
Postul 3
Postul 4
  • Tranziții: CSS3 a introdus o serie de proprietăți și tehnici noi pentru crearea de tranziții pe paginile web. De exemplu, cel transition proprietatea poate fi folosită pentru a anima modificările proprietăților CSS în timp. În acest exemplu, .box class setează lățimea, înălțimea și culoarea inițială de fundal pentru element. The transition proprietatea este setată la background-color 0.5s ease pentru a anima modificările aduse proprietății de culoare de fundal în decurs de o jumătate de secundă cu o funcție de temporizare de ea-in-out. The .box:hover clasa schimbă culoarea de fundal a elementului când cursorul mouse-ului este peste el, declanșând animația de tranziție.

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

Rezultat

Planare
Aici!
  • animaţii: CSS3 a introdus o serie de proprietăți și tehnici noi pentru crearea de animații pe paginile web. În acest exemplu, am adăugat o animație folosind animation proprietate. Am definit o @keyframes regula pentru animație, care specifică că caseta trebuie să se rotească de la 0 grade la 90 de grade pe o durată de 0.5 secunde. Când cutia este plasată deasupra, spin animația este aplicată pentru a roti caseta. The animation-fill-mode proprietatea este setată la forwards pentru a se asigura că starea finală a animației este păstrată după ce se termină.

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

Rezultat

Planare
Aici!
  • Proprietăți personalizate CSS: De asemenea cunoscut ca si variabile CSS, proprietățile personalizate au fost introduse în CSS3. Acestea vă permit să definiți și să utilizați propriile proprietăți personalizate în CSS, care pot fi folosite pentru a stoca și reutiliza valori în foile de stil. Variabilele CSS sunt identificate printr-un nume care începe cu două liniuțe, cum ar fi
    --my-variable. În acest exemplu, definim o variabilă CSS numită –primary-color și îi dăm o valoare de #007bff, care este o culoare albastră folosită în mod obișnuit ca culoare primară în multe modele. Am folosit această variabilă pentru a seta background-color proprietatea unui element buton, prin folosirea var() funcția și transmiterea numelui variabilei. Aceasta va folosi valoarea variabilei ca culoare de fundal pentru buton.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Fundaluri multiple: CSS3 vă permite să specificați mai multe imagini de fundal pentru un element, cu capacitatea de a controla poziționarea și ordinea de stivuire a acestuia. Fundalul este compus din două imagini, red.png și blue.png, care sunt încărcate folosind background-image proprietate. Prima imagine, red.png, este poziționat în colțul din dreapta jos al elementului, în timp ce a doua imagine, blue.png, este poziționat în colțul din stânga sus al elementului. The background-position proprietatea este utilizată pentru a controla poziționarea fiecărei imagini. The background-repeat proprietatea este utilizată pentru a controla modul în care se repetă imaginile. Prima imagine, red.png, este setat să nu se repete (no-repeat), în timp ce a doua imagine, blue.png, este setat să se repete (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;
    }

    Rezultat

    Douglas Karr

    Douglas Karr este CMO al OpenINSIGHTS și fondatorul Martech Zone. Douglas a ajutat zeci de startup-uri de succes MarTech, a ajutat la due diligence de peste 5 miliarde de dolari în achiziții și investiții Martech și continuă să asiste companiile în implementarea și automatizarea strategiilor lor de vânzări și marketing. Douglas este un expert în transformare digitală recunoscut la nivel internațional și expert și vorbitor MarTech. Douglas este, de asemenea, un autor publicat al unui ghid pentru Dummie și al unei cărți de conducere în afaceri.

    Articole pe aceeaşi temă

    Înapoi la butonul de sus
    Închide

    Blocarea reclamelor a fost detectată

    Martech Zone este în măsură să vă furnizeze acest conținut fără costuri, deoarece monetizăm site-ul nostru prin venituri din reclame, linkuri afiliate și sponsorizări. Am aprecia dacă ați elimina dispozitivul de blocare a reclamelor pe măsură ce vizualizați site-ul nostru.