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 kelasdisplay: flex
kanggo ngaktifake mode tata letak flexbox. Ingjustify-content
property disetel kanggocenter
kanggo horisontal tengah unsur anak ing wadhah. Ingalign-items
property disetel kanggocenter
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 kelasdisplay: grid
kanggo ngaktifake mode tata letak kothak. Inggrid-template-columns
property disetel kanggorepeat(2, 1fr)
kanggo nggawe rong kolom kanthi jembar sing padha. Inggap
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. Ingtransition
property disetel kanggobackground-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!
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, ingspin
animasi ditrapake kanggo muter kothak. Inganimation-fill-mode
property disetel kanggoforwards
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!
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 nyetelbackground-color
properti saka unsur tombol, kanthi nggunakakevar()
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
lanblue.png
, sing dimuat nggunakakebackground-image
properti. Gambar pisanan,red.png
, dipanggonke ing pojok tengen ngisor unsur, nalika gambar kapindho,blue.png
, dipanggonke ing pojok kiwa ndhuwur unsur. Ingbackground-position
property digunakake kanggo ngontrol posisi saben gambar. Ingbackground-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;
}