Turinio Rinkodara

CSS3 funkcijos, kurių galbūt nežinote: „Flexbox“, tinklelio išdėstymai, tinkintos ypatybės, perėjimai, animacijos ir keli fonai

Kaskadiniai stiliaus lapai (CSS) toliau tobulėja, o naujausiose versijose gali būti kai kurių funkcijų, apie kurias galbūt net nežinote. Štai keletas pagrindinių patobulinimų ir metodų, įdiegtų naudojant CSS3, kartu su kodų pavyzdžiais:

  • Lankstus dėžutės išdėstymas („Flexbox“): maketavimo režimas, leidžiantis kurti lanksčius ir reaguojančius tinklalapių maketus. Naudodami „flexbox“ galite lengvai sulygiuoti ir paskirstyti elementus konteineryje. šiame pavyzdyje .container klasės naudojimas display: flex kad įjungtumėte „flexbox“ išdėstymo režimą. The justify-content nuosavybė nustatyta center horizontaliai centruoti antrinį elementą konteineryje. The align-items nuosavybė nustatyta center kad vertikaliai centruotų antrinį elementą. The .item klasė nustato antrinio elemento fono spalvą ir užpildymą.

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

Pasekmė

Centruotas elementas
  • Tinklelio išdėstymas: kitas išdėstymo režimas, leidžiantis kurti sudėtingus tinklelio tinklalapių maketus. Naudodami tinklelį galite nurodyti eilutes ir stulpelius, o tada įdėti elementus į tam tikrus tinklelio langelius. Šiame pavyzdyje .grid-container klasės naudojimas display: grid kad įjungtumėte tinklelio išdėstymo režimą. The grid-template-columns nuosavybė nustatyta repeat(2, 1fr) sukurti du vienodo pločio stulpelius. The gap ypatybė nustato tarpus tarp tinklelio langelių. The .grid-item klasė nustato tinklelio elementų fono spalvą ir užpildymą.

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

Pasekmė

Prekių 1
Prekių 2
Prekių 3
Prekių 4
  • Perėjimai: CSS3 pristatė daugybę naujų ypatybių ir metodų, skirtų tinklalapių perėjimams kurti. Pavyzdžiui, transition ypatybę galima naudoti norint suaktyvinti CSS savybių pokyčius laikui bėgant. Šiame pavyzdyje .box klasė nustato elemento plotį, aukštį ir pradinę fono spalvą. The transition nuosavybė nustatyta background-color 0.5s ease suaktyvinti fono spalvos ypatybių pokyčius per pusę sekundės naudojant supaprastinto įėjimo laiko nustatymo funkciją. The .box:hover klasė keičia elemento fono spalvą, kai pelės žymeklis yra virš jo, suaktyvindama perėjimo animaciją.

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

Pasekmė

Užveskite pelę
Čia!
  • Animacijos: CSS3 pristatė daugybę naujų ypatybių ir metodų kuriant animacijas tinklalapiuose. Šiame pavyzdyje pridėjome animaciją naudodami animation nuosavybė. Mes apibrėžėme a @keyframes animacijos taisyklė, nurodanti, kad langelis turi pasisukti nuo 0 laipsnių iki 90 laipsnių per 0.5 sekundės. Užvedus žymeklį ant dėžutės, spin animacija taikoma dėžei pasukti. The animation-fill-mode nuosavybė nustatyta forwards užtikrinti, kad pasibaigus animacijai būtų išsaugota galutinė būsena.

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

Pasekmė

Užveskite pelę
Čia!
  • CSS tinkintos ypatybės: Taip pat žinomas kaip CSS kintamieji, tinkintos ypatybės buvo pristatytos CSS3. Jie leidžia apibrėžti ir naudoti savo pasirinktines ypatybes CSS, kurias galima naudoti vertėms saugoti ir pakartotinai naudoti stiliaus lapuose. CSS kintamieji identifikuojami pavadinimu, kuris prasideda dviem brūkšneliais, pvz
    --my-variable. Šiame pavyzdyje apibrėžiame CSS kintamąjį, vadinamą –primary-color, ir suteikiame jam reikšmę #007bff, kuri yra mėlyna spalva, dažniausiai naudojama kaip pagrindinė daugelio dizainų spalva. Naudojome šį kintamąjį norėdami nustatyti background-color mygtuko elemento savybė, naudojant var() funkcija ir kintamojo pavadinimo perdavimas. Kintamojo reikšmė bus naudojama kaip mygtuko fono spalva.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Keli fonai: CSS3 leidžia nurodyti kelis elemento fono vaizdus, ​​​​su galimybe valdyti jo padėties ir sudėjimo tvarką. Fonas sudarytas iš dviejų vaizdų, red.png ir blue.png, kurie įkeliami naudojant background-image nuosavybė. Pirmas vaizdas, red.png, yra dešiniajame apatiniame elemento kampe, o antrasis vaizdas, blue.png, yra kairiajame viršutiniame elemento kampe. The background-position ypatybė naudojama kiekvieno vaizdo padėties valdymui. The background-repeat ypatybė naudojama norint valdyti, kaip vaizdai kartojasi. Pirmas vaizdas, red.png, nustatyta taip, kad nesikartotų (no-repeat), o antrasis vaizdas, blue.png, nustatytas kartoti (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;
    }

    Pasekmė

    Douglas Karr

    Douglas Karr yra BRO OpenINSIGHTS ir įkūrėjas Martech Zone. Douglas padėjo daugybei sėkmingų MarTech pradedančiųjų įmonių, padėjo atlikti daugiau nei 5 mlrd. Douglas yra tarptautiniu mastu pripažintas skaitmeninės transformacijos ir MarTech ekspertas bei pranešėjas. Douglasas taip pat yra paskelbtas Dummie vadovo ir verslo lyderystės knygos autorius.

    Susiję straipsniai

    Atgal į viršų mygtukas
    arti

    Aptiktas skelbimų blokas

    Martech Zone gali pateikti jums šį turinį nemokamai, nes gauname pajamų iš savo svetainės per pajamas iš skelbimų, filialų nuorodas ir rėmimą. Būtume dėkingi, jei peržiūrėdami mūsų svetainę pašalintumėte skelbimų blokavimo priemonę.