eusi Marketing

Fitur CSS3 Anu Anjeun Henteu Sadar: Flexbox, Layout Grid, Pasipatan Adat, Transisi, Animasi, sareng Sababaraha Latar

Lembar Gaya Cascading (CSS) terus mekar sarta versi panganyarna mungkin gaduh sababaraha fitur nu malah teu sadar anjeun. Ieu sababaraha perbaikan utama sareng metodologi anu diwanohkeun sareng CSS3, sareng conto kode:

  • Tata Letak Kotak Fleksibel (Flexbox): mode perenah nu ngidinan Anjeun pikeun nyieun layouts fléksibel tur responsif pikeun kaca web. Kalawan flexbox, anjeun bisa kalayan gampang align sarta ngadistribusikaeun elemen dina hiji wadah. n conto ieu, nu .container kagunaan kelas display: flex pikeun ngaktipkeun mode perenah flexbox. The justify-content harta disetel ka center pikeun horizontal puseur unsur anak dina wadahna. The align-items harta disetel ka center pikeun vertikal puseur unsur anak. The .item kelas susunan warna tukang sarta padding pikeun elemen 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;
}

hasil

Unsur Puseur
  • Susunan grid: mode perenah sejen nu ngidinan Anjeun pikeun nyieun layouts basis grid kompléks pikeun kaca web. Kalawan grid, Anjeun bisa nangtukeun baris jeung kolom, lajeng nempatkeun elemen dina sél husus tina grid nu. Dina conto ieu, nu .grid-container kagunaan kelas display: grid pikeun ngaktipkeun mode perenah grid. The grid-template-columns harta disetel ka repeat(2, 1fr) pikeun nyieun dua kolom lebar sarua. The gap harta nangtukeun jarak antara sél grid. The .grid-item kelas nangtukeun warna latar jeung padding pikeun item grid.

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

hasil

Barang 1
Barang 2
Barang 3
Barang 4
  • Transisi: CSS3 ngenalkeun sajumlah sipat sareng téknik énggal pikeun nyiptakeun transisi dina halaman wéb. Contona, dina transition sipat bisa dipaké pikeun ngahirupkeun parobahan dina sipat CSS kana waktu. Dina conto ieu, nu .box kelas nangtukeun lebar, jangkungna, jeung warna latar awal pikeun unsur. The transition harta disetel ka background-color 0.5s ease pikeun ngahirupkeun parobahan sipat warna latar leuwih satengah detik jeung hiji gampang-in-kaluar fungsi timing. The .box:hover kelas robah warna kasang tukang unsur nalika pointer mouse leuwih eta, 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;
}

hasil

hover
Ieuh!
  • Animasi: CSS3 ngenalkeun sajumlah sipat sareng téknik énggal pikeun nyiptakeun animasi dina halaman wéb. Dina conto ieu, kami parantos nambihan animasi nganggo animation harta. Kami geus ditetepkeun a @keyframes aturan pikeun animasi, nu nangtukeun yén kotak kudu muterkeun ti 0 darajat ka 90 darajat salila 0.5 detik. Nalika kotak ieu hovered leuwih, éta spin animasi diterapkeun pikeun muterkeun kotak. The animation-fill-mode harta disetel ka forwards pikeun mastikeun yén kaayaan ahir animasi dipikagaduh sanggeus rengse.

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

hasil

hover
Ieuh!
  • Pasipatan Custom CSS: Ogé katelah variabel CSS, sipat custom diwanohkeun dina CSS3. Aranjeunna ngidinan Anjeun pikeun nangtukeun tur ngagunakeun sipat custom sorangan dina CSS, nu bisa dipaké pikeun nyimpen jeung make deui nilai sakuliah stylesheets Anjeun. Variabel CSS dicirikeun ku ngaran nu dimimitian ku dua dashes, kayaning
    --my-variable. Dina conto ieu, urang nangtukeun variabel CSS disebut -primary-warna tur masihan eta nilai tina #007bff, nu mangrupakeun warna biru ilahar dipaké salaku warna primér dina loba desain. Kami parantos nganggo variabel ieu pikeun nyetél background-color milik hiji unsur tombol, ku ngagunakeun éta var() fungsi jeung ngalirkeun dina ngaran variabel. Ieu bakal nganggo nilai variabel salaku warna latar pikeun tombol.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Sababaraha Latar: CSS3 ngidinan Anjeun pikeun nangtukeun sababaraha gambar latar pikeun hiji unsur, kalawan kamampuhan pikeun ngadalikeun posisi na stacking urutan. Latar diwangun ku dua gambar, red.png jeung blue.png, nu dimuat maké éta background-image harta. Gambar kahiji, red.png, diposisikan di pojok katuhu handap unsur, sedengkeun gambar kadua, blue.png, diposisikan di belah kénca juru luhur unsur. The background-position sipat dipaké pikeun ngadalikeun positioning unggal gambar. The background-repeat sipat dipaké pikeun ngadalikeun kumaha gambar ulang. Gambar kahiji, red.png, disetel pikeun henteu ngulang (no-repeat), sedengkeun gambar kadua, blue.png, disetel ka ulang (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;
    }

    hasil

    Douglas Karr

    Douglas Karr nyaeta CMO tina OpenINSIGHTS jeung pangadeg nu Martech Zone. Douglas geus mantuan puluhan startups MarTech suksés, geus mantuan dina karajinan alatan leuwih $ 5 bil dina akuisisi jeung Investasi Martech, sarta terus mantuan pausahaan dina ngalaksanakeun jeung ngajadikeun otomatis jualan na strategi marketing maranéhanana. Douglas mangrupikeun transformasi digital anu diakui sacara internasional sareng ahli MarTech sareng spiker. Douglas ogé panulis anu diterbitkeun tina pituduh Dummie sareng buku kapamimpinan bisnis.

    Artikel nu patali

    Deui tombol luhur
    deukeut

    Adblock Dideteksi

    Martech Zone tiasa masihan anjeun eusi ieu tanpa biaya sabab kami ngamonetisasi situs kami ngalangkungan pendapatan iklan, tautan afiliasi, sareng sponsor. Kami bakal ngahargaan upami anjeun ngahapus pameungpeuk iklan anjeun nalika anjeun ningali situs kami.