Content Marketing

Fitur CSS3 Sampeyan Mungkin Ora Ngerti: Flexbox, Tata Letak Grid, Properti Kustom, Transisi, Animasi, lan Akeh Latar Belakang

Lembar Gaya Cascading (CSS) terus berkembang lan versi paling anyar bisa uga duwe sawetara fitur sing sampeyan ora ngerti. Ing ngisor iki sawetara dandan lan metodologi utama sing dikenalake karo CSS3, bebarengan karo conto kode:

  • Tata Letak Kotak Fleksibel (Kotak Fleksibel): mode tata letak sing ngidini sampeyan nggawe tata letak sing fleksibel lan responsif kanggo kaca web. Kanthi flexbox, sampeyan bisa kanthi gampang nyelarasake lan nyebarake unsur ing wadhah. n conto iki, ing .container nggunakake kelas display: flex kanggo ngaktifake mode tata letak flexbox. Ing justify-content property disetel kanggo center kanggo horisontal tengah unsur anak ing wadhah. Ing align-items property disetel kanggo center kanggo vertikal tengah unsur anak. Ing .item kelas nyetel werna latar mburi lan padding kanggo unsur anak.

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

Result

Elemen Tengah
  • Tata letak kothak: mode tata letak liyane sing ngidini sampeyan nggawe tata letak basis kothak Komplek kanggo kaca web. Kanthi kothak, sampeyan bisa nemtokake larik lan kolom, banjur nyelehake unsur ing sel tartamtu saka kothak. Ing conto iki, ing .grid-container nggunakake kelas display: grid kanggo ngaktifake mode tata letak kothak. Ing grid-template-columns property disetel kanggo repeat(2, 1fr) kanggo nggawe rong kolom kanthi jembar sing padha. Ing gap property nyetel jarak antarane sel kothak. Ing .grid-item kelas nyetel werna latar mburi lan padding kanggo item kothak.

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

Result

item 1
item 2
item 3
item 4
  • Transisi: CSS3 ngenalake sawetara properti lan teknik anyar kanggo nggawe transisi ing kaca web. Contone, ing transition property bisa digunakake kanggo animate owah-owahan ing sifat CSS liwat wektu. Ing conto iki, ing .box kelas nyetel jembaré, dhuwur, lan werna latar mburi dhisikan kanggo unsur. Ing transition property disetel kanggo background-color 0.5s ease kanggo nguripake owah-owahan menyang properti werna latar mburi liwat setengah detik karo ease-in-out fungsi wektu. Ing .box:hover kelas ngganti werna latar mburi unsur nalika pointer mouse iku liwat, micu animasi transisi.

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

Result

Kisaran
Ing kene!
  • animasi: CSS3 ngenalake sawetara properti lan teknik anyar kanggo nggawe animasi ing kaca web. Ing conto iki, kita wis nambah animasi nggunakake animation properti. Kita wis nemtokake a @keyframes aturan kanggo animasi, kang nemtokake sing kothak kudu muter saka 0 derajat kanggo 90 derajat liwat 0.5 detik. Nalika kothak wis hovered liwat, ing spin animasi ditrapake kanggo muter kothak. Ing animation-fill-mode property disetel kanggo forwards kanggo mesthekake yen kahanan pungkasan saka animasi disimpen sawise rampung.

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

Result

Kisaran
Ing kene!
  • Properti Kustom CSS: Uga kasebut variabel CSS, sifat khusus dienal ing CSS3. Iki ngidini sampeyan nemtokake lan nggunakake properti khusus sampeyan ing CSS, sing bisa digunakake kanggo nyimpen lan nggunakake maneh nilai ing lembar gaya sampeyan. Variabel CSS diidentifikasi kanthi jeneng sing diwiwiti kanthi rong garis, kayata
    --my-variable. Ing conto iki, kita nemtokake variabel CSS sing diarani -primary-color lan menehi nilai saka #007bff, yaiku werna biru sing umum digunakake minangka werna utama ing pirang-pirang desain. Kita wis nggunakake variabel iki kanggo nyetel background-color properti saka unsur tombol, kanthi nggunakake var() fungsi lan pass ing jeneng variabel. Iki bakal nggunakake nilai variabel minangka werna latar mburi tombol.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Akeh latar mburi: CSS3 ngidini sampeyan nemtokake sawetara gambar latar mburi kanggo unsur, kanthi kemampuan kanggo ngontrol posisi lan urutan tumpukan. Latar mburi dumadi saka rong gambar, red.png lan blue.png, sing dimuat nggunakake background-image properti. Gambar pisanan, red.png, dipanggonke ing pojok tengen ngisor unsur, nalika gambar kapindho, blue.png, dipanggonke ing pojok kiwa ndhuwur unsur. Ing background-position property digunakake kanggo ngontrol posisi saben gambar. Ing background-repeat property digunakake kanggo ngontrol carane gambar mbaleni. Gambar pisanan, red.png, disetel supaya ora mbaleni (no-repeat), nalika gambar kapindho, blue.png, disetel kanggo mbaleni (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;
    }

    Result

    Douglas Karr

    Douglas Karr punika CMO saka OpenINSIGHTS lan pangadeg ing Martech Zone. Douglas wis mbantu Welasan wiwitan MarTech sukses, wis mbantu ing amarga rajin liwat $ 5 bil ing pitukon lan investasi Martech, lan terus kanggo ngewangi perusahaan ing ngleksanakake lan ngotomatisasi dodolan lan strategi marketing. Douglas minangka transformasi digital sing diakoni sacara internasional lan pakar lan speaker MarTech. Douglas uga dadi penulis buku pandhuan Dummie lan buku kepemimpinan bisnis.

    Artikel web

    Bali menyang ndhuwur tombol
    Cedhak

    Adblock Dideteksi

    Martech Zone bisa nyedhiyakake konten iki tanpa biaya amarga kita monetisasi situs liwat revenue iklan, pranala afiliasi, lan sponsor. Kita bakal ngormati yen sampeyan bakal mbusak blocker iklan nalika ndeleng situs kita.