content Marketing
Atụmatụ CSS3 ị nwere ike ị gaghị ama: Flexbox, Grid Layouts, Properties Custom, Transition, Animations, and Multiple Backgrounds
Mpempe akwụkwọ ụdị cascading (CSS) na-aga n'ihu na-agbanwe na nsụgharị ọhụrụ nwere ike ịnwe ụfọdụ atụmatụ nke ị na-amaghị. Nke a bụ ụfọdụ n'ime nkwalite na usoro ewepụtara na CSS3, yana ọmụmaatụ koodu:
- Nhazi igbe na-agbanwe agbanwe (Flexbox): usoro nhazi nke na-enye gị ohere ịmepụta nhazi mgbanwe na nzaghachi maka ibe weebụ. Site na flexbox, ị nwere ike ịhazi ma kesaa ihe n'ime akpa. n ihe atụ a, na
.container
klas ejidisplay: flex
iji mee ka ọnọdụ okirikiri nhọrọ ukwuu flexbox nwee ike. Nkejustify-content
ihe onwunwe atọrọ kacenter
iji kwụ ọtọ n'etiti ihe nwa ahụ n'ime akpa. Nkealign-items
ihe onwunwe atọrọ kacenter
iji kwụ ọtọ n'etiti ihe nwata ahụ. Nke.item
klaasị na-edobe agba ndabere na padding maka mmewere nwa.
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;
}
N'ihi
Ihe etiti etiti
- Nhazi grid: Ụdị nhazi ọzọ nke na-enye gị ohere ịmepụta nhazi grid mgbagwoju anya maka ibe weebụ. Site na grid, ị nwere ike ịkọwa ahịrị na kọlụm, wee tinye ihe n'ime sel ụfọdụ nke okporo. N'ihe atụ a, ndị
.grid-container
klas ejidisplay: grid
iji mee ka ọnọdụ nhazi grid nwee ike. Nkegrid-template-columns
ihe onwunwe atọrọ karepeat(2, 1fr)
iji mepụta ogidi abụọ nke obosara nhata. Nkegap
ihe onwunwe na-edobe oghere n'etiti sel grid. Nke.grid-item
klaasị na-edobe agba ndabere na padding maka ihe 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;
}
N'ihi
Nkebi 1
Nkebi 2
Nkebi 3
Nkebi 4
- Mgbanwe: CSS3 webatara ọtụtụ ihe ọhụrụ na usoro maka imepụta mgbanwe na ibe weebụ. Dịka ọmụmaatụ, ndị
transition
enwere ike iji akụrụngwa mee mgbanwe na akụrụngwa CSS ka oge na-aga. N'ihe atụ a, ndị.box
klaasị na-edobe obosara, ịdị elu, na agba ndabere mmalite maka mmewere. Nketransition
ihe onwunwe atọrọ kabackground-color 0.5s ease
iji mee mgbanwe na ihe onwunwe n'okirikiri ihe karịrị ọkara nkeji na-enwe ọrụ oge dị mfe na-apụ apụ. Nke.box:hover
klas na-agbanwe agba agba nke mmewere mgbe ihe nrịbama òké nọ n'elu ya, na-akpalite animation mgbanwe.
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;
}
N'ihi
Hover
Ebe a!
Ebe a!
- eserese: CSS3 webatara ọtụtụ ihe ọhụrụ na usoro maka imepụta animation na ibe weebụ. N'ọmụmaatụ a, anyị atụkwasịla ihe ngosi site na iji
animation
ihe onwunwe. Anyị akọwapụtala a@keyframes
iwu maka animation, nke na-akọwapụta na igbe ahụ kwesịrị ịtụgharị site na ogo 0 ruo ogo 90 n'ime oge nke 0.5 sekọnd. Mgbe igbe a na-atụgharị n'elu, ndịspin
A na-etinye animation iji tụgharịa igbe ahụ. Nkeanimation-fill-mode
ihe onwunwe atọrọ kaforwards
iji hụ na a na-edobe ọnọdụ ikpeazụ nke ihe nkiri ahụ mgbe ọ gwụchara.
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;
}
N'ihi
Hover
Ebe a!
Ebe a!
- Njirimara CSS: A makwaara dị ka Ụdị mgbanwe CSS, ewebata akụrụngwa omenala na CSS3. Ha na-enye gị ohere ịkọwapụta na iji akụrụngwa omenala nke gị na CSS, nke enwere ike iji chekwaa ma jiri ụkpụrụ mee ihe n'ime akwụkwọ ụdị gị niile. A na-amata mgbanwe CSS site na aha na-amalite na dashes abụọ, dịka
--my-variable
. N'ihe atụ a, anyị na-akọwapụta mgbanwe CSS nke a na-akpọ -primary-color ma nye ya uru nke#007bff
, nke bụ agba anụnụ anụnụ a na-ejikarị dị ka agba bụ isi n'ọtụtụ atụmatụ. Anyị ejirila mgbanwe a tọọ ihebackground-color
ihe onwunwe nke bọtịnụ, site na ijivar()
arụ ọrụ ma na-agafe na aha agbanwe agbanwe. Nke a ga-eji uru nke mgbanwe dị ka agba ndabere maka bọtịnụ.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Ọtụtụ ndabere: CSS3 na-enye gị ohere ịkọwapụta ọtụtụ onyonyo n'okirikiri maka ihe mmewere, na-enwe ike ijikwa nhazi ya na usoro nhazi ya. Ihe oyiyi abụọ nwere ndabere.
red.png
nablue.png
, nke a na-ebunye site na ijibackground-image
ihe onwunwe. Foto nke mbụ,red.png
, ka edobere n'akụkụ aka nri ala nke mmewere, ebe onyonyo nke abụọ,blue.png
, ka edobere n'akụkụ elu aka ekpe nke mmewere. Nkebackground-position
a na-eji ihe onwunwe na-achịkwa nhazi nke ihe oyiyi ọ bụla. Nkebackground-repeat
a na-eji ihe onwunwe na-achịkwa ka ihe oyiyi na-emegharị. Foto nke mbụ,red.png
, atọrọ ka ọ ghara ikwugharị (no-repeat
), mgbe foto nke abụọ,blue.png
, atọrọ ka ikwugharị (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;
}