Pemasaran Kandungan
Ciri CSS3 Yang Mungkin Anda Tidak Ketahui: Flexbox, Reka Letak Grid, Sifat Tersuai, Peralihan, Animasi dan Berbilang Latar Belakang
Cascading Style Sheets (CSS) terus berkembang dan versi terkini mungkin mempunyai beberapa ciri yang mungkin anda tidak sedari. Berikut ialah beberapa penambahbaikan dan metodologi utama yang diperkenalkan dengan CSS3, bersama dengan contoh kod:
- Susun Atur Kotak Fleksibel (Flexbox): mod susun atur yang membolehkan anda membuat reka letak yang fleksibel dan responsif untuk halaman web. Dengan flexbox, anda boleh menjajarkan dan mengedarkan elemen dengan mudah dalam bekas. n contoh ini, yang
.container
kegunaan kelasdisplay: flex
untuk mendayakan mod susun atur flexbox. Thejustify-content
harta ditetapkancenter
untuk mendatar memusatkan elemen kanak-kanak dalam bekas. Thealign-items
harta ditetapkancenter
untuk memusatkan elemen kanak-kanak secara menegak. The.item
kelas menetapkan warna latar belakang dan padding untuk elemen kanak-kanak.
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;
}
Hasilnya
Elemen Berpusat
- Susun atur grid: mod susun atur lain yang membolehkan anda membuat susun atur berasaskan grid kompleks untuk halaman web. Dengan grid, anda boleh menentukan baris dan lajur, dan kemudian meletakkan elemen dalam sel khusus grid. Dalam contoh ini,
.grid-container
kegunaan kelasdisplay: grid
untuk mendayakan mod susun atur grid. Thegrid-template-columns
harta ditetapkanrepeat(2, 1fr)
untuk mencipta dua lajur yang sama lebar. Thegap
property menetapkan jarak antara sel grid. The.grid-item
kelas menetapkan warna latar belakang dan padding untuk 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;
}
Hasilnya
Item 1
Item 2
Item 3
Item 4
- Peralihan: CSS3 memperkenalkan beberapa sifat dan teknik baharu untuk mencipta peralihan pada halaman web. Sebagai contoh, yang
transition
harta boleh digunakan untuk menghidupkan perubahan dalam sifat CSS dari semasa ke semasa. Dalam contoh ini,.box
kelas menetapkan lebar, ketinggian dan warna latar belakang awal untuk elemen. Thetransition
harta ditetapkanbackground-color 0.5s ease
untuk menghidupkan perubahan pada sifat warna latar belakang selama setengah saat dengan fungsi pemasaan mudah masuk. The.box:hover
kelas menukar warna latar belakang elemen apabila penunjuk tetikus berada di atasnya, mencetuskan animasi peralihan.
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;
}
Hasilnya
hover
Di sini!
Di sini!
- Animasi: CSS3 memperkenalkan beberapa sifat dan teknik baharu untuk mencipta animasi pada halaman web. Dalam contoh ini, kami telah menambah animasi menggunakan
animation
harta benda. Kami telah menentukan a@keyframes
peraturan untuk animasi, yang menyatakan bahawa kotak harus berputar dari 0 darjah kepada 90 darjah dalam tempoh 0.5 saat. Apabila kotak itu dilayangkan,spin
animasi digunakan untuk memutar kotak. Theanimation-fill-mode
harta ditetapkanforwards
untuk memastikan bahawa keadaan akhir animasi dikekalkan selepas ia selesai.
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;
}
Hasilnya
hover
Di sini!
Di sini!
- Sifat Tersuai CSS: Juga dikenali sebagai pembolehubah CSS, sifat tersuai telah diperkenalkan dalam CSS3. Ia membenarkan anda mentakrif dan menggunakan sifat tersuai anda sendiri dalam CSS, yang boleh digunakan untuk menyimpan dan menggunakan semula nilai di seluruh helaian gaya anda. Pembolehubah CSS dikenal pasti dengan nama yang bermula dengan dua sempang, seperti
--my-variable
. Dalam contoh ini, kami mentakrifkan pembolehubah CSS yang dipanggil –primary-color dan memberikannya nilai#007bff
, iaitu warna biru yang biasa digunakan sebagai warna utama dalam banyak reka bentuk. Kami telah menggunakan pembolehubah ini untuk menetapkanbackground-color
sifat elemen butang, dengan menggunakanvar()
fungsi dan menghantar nama pembolehubah. Ini akan menggunakan nilai pembolehubah sebagai warna latar belakang untuk butang.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Pelbagai Latar Belakang: CSS3 membolehkan anda menentukan berbilang imej latar belakang untuk elemen, dengan keupayaan untuk mengawal kedudukan dan susunan susunannya. Latar belakang terdiri daripada dua imej,
red.png
andblue.png
, yang dimuatkan menggunakanbackground-image
harta benda. Gambar pertama,red.png
, diletakkan di sudut kanan bawah elemen, manakala imej kedua,blue.png
, diletakkan di sudut kiri atas elemen. Thebackground-position
property digunakan untuk mengawal kedudukan setiap imej. Thebackground-repeat
harta digunakan untuk mengawal cara imej berulang. Gambar pertama,red.png
, ditetapkan untuk tidak berulang (no-repeat
), manakala imej kedua,blue.png
, ditetapkan untuk mengulangi (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;
}