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 kelasdisplay: flex
pikeun ngaktipkeun mode perenah flexbox. Thejustify-content
harta disetel kacenter
pikeun horizontal puseur unsur anak dina wadahna. Thealign-items
harta disetel kacenter
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 kelasdisplay: grid
pikeun ngaktipkeun mode perenah grid. Thegrid-template-columns
harta disetel karepeat(2, 1fr)
pikeun nyieun dua kolom lebar sarua. Thegap
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. Thetransition
harta disetel kabackground-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!
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, étaspin
animasi diterapkeun pikeun muterkeun kotak. Theanimation-fill-mode
harta disetel kaforwards
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!
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élbackground-color
milik hiji unsur tombol, ku ngagunakeun étavar()
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
jeungblue.png
, nu dimuat maké étabackground-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. Thebackground-position
sipat dipaké pikeun ngadalikeun positioning unggal gambar. Thebackground-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;
}