Maketing Kontni
Karakteristik CSS3 ou pa ka okouran de: Flexbox, Layouts kadriyaj, Pwopriyete Custom, Tranzisyon, Animasyon, ak orijin miltip
Fèy estil kaskad (CSS) kontinye evolye ak dènye vèsyon yo ka gen kèk karakteristik ke ou ka pa menm okouran de. Men kèk nan pi gwo amelyorasyon ak metodoloji yo prezante ak CSS3, ansanm ak egzanp kòd:
- Layout bwat fleksib (Flexbox): yon mòd layout ki pèmèt ou kreye layout fleksib ak reponn pou paj entènèt. Avèk flexbox, ou ka fasilman aliman ak distribye eleman nan yon veso. n egzanp sa a, la
.container
itilizasyon klas yodisplay: flex
pou pèmèt mòd layout flexbox. Lajustify-content
pwopriyete yo mete soucenter
pou santre orizontal eleman timoun nan nan veso a. Laalign-items
pwopriyete yo mete soucenter
pou santre vètikal eleman pitit la. La.item
klas la fikse koulè background ak padding pou eleman timoun nan.
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;
}
Rezilta
Eleman Santre
- Layout griyaj: yon lòt mòd layout ki pèmèt ou kreye kouman konplèks ki baze sou kadriyaj pou paj entènèt. Avèk kadriyaj, ou ka presize ranje ak kolòn, ak Lè sa a, mete eleman nan selil espesifik nan kadriyaj la. Nan egzanp sa a, la
.grid-container
itilizasyon klas yodisplay: grid
pou pèmèt mòd layout kadriyaj. Lagrid-template-columns
pwopriyete yo mete sourepeat(2, 1fr)
pou kreye de kolòn ki egal lajè. Lagap
pwopriyete mete espas ki genyen ant selil kadriyaj yo. La.grid-item
klas la fikse koulè background ak padding pou atik yo kadriyaj.
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;
}
Rezilta
Atik 1
Atik 2
Atik 3
Atik 4
- Tranzisyon: CSS3 prezante yon kantite nouvo pwopriyete ak teknik pou kreye tranzisyon sou paj entènèt. Pou egzanp, la
transition
pwopriyete ka itilize pou anime chanjman nan pwopriyete CSS sou tan. Nan egzanp sa a, la.box
klas la fikse lajè, wotè, ak koulè background inisyal pou eleman an. Latransition
pwopriyete yo mete soubackground-color 0.5s ease
pou anime chanjman nan pwopriyete koulè background nan plis pase mwatye yon segonn ak yon fonksyon distribisyon fasil-in-out. La.box:hover
klas chanje koulè background nan eleman nan lè pointeur sourit la sou li, deklanche animasyon tranzisyon an.
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;
}
Rezilta
Hover
Isit la!
Isit la!
- Animations: CSS3 prezante yon kantite nouvo pwopriyete ak teknik pou kreye animasyon sou paj entènèt. Nan egzanp sa a, nou te ajoute yon animasyon lè l sèvi avèk la
animation
pwopriyete. Nou te defini yon@keyframes
règ pou animasyon an, ki presize ke bwat la ta dwe vire soti nan 0 degre a 90 degre sou yon dire 0.5 segonn. Lè bwat la plane sou, laspin
animasyon aplike pou vire bwat la. Laanimation-fill-mode
pwopriyete yo mete souforwards
asire ke eta final la nan animasyon an kenbe apre li fini.
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;
}
Rezilta
Hover
Isit la!
Isit la!
- Pwopriyete Custom CSS: Konnen tou kòm CSS varyab, pwopriyete koutim yo te prezante nan CSS3. Yo pèmèt ou defini epi sèvi ak pwòp pwopriyete koutim ou nan CSS, ki ka itilize pou estoke ak reitilize valè nan tout fèy style ou yo. Varyab CSS yo idantifye pa yon non ki kòmanse ak de tirè, tankou
--my-variable
. Nan egzanp sa a, nou defini yon varyab CSS ki rele –primary-color epi ba li yon valè#007bff
, ki se yon koulè ble souvan itilize kòm yon koulè prensipal nan desen anpil. Nou te itilize varyab sa a pou mete abackground-color
pwopriyete yon eleman bouton, lè l sèvi avèk lavar()
fonksyon epi pase non varyab la. Sa a pral sèvi ak valè varyab la kòm koulè background pou bouton an.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Plizyè orijin: CSS3 pèmèt ou presize plizyè imaj background pou yon eleman, ak kapasite nan kontwole pozisyon li yo ak lòd anpile. Se background nan ki konpoze de de imaj,
red.png
akblue.png
, ki chaje lè l sèvi avèk labackground-image
pwopriyete. Premye imaj la,red.png
, pozisyone nan kwen dwat anba eleman an, pandan y ap dezyèm imaj la,blue.png
, se pozisyone nan kwen gòch anwo nan eleman an. Labackground-position
pwopriyete yo itilize pou kontwole pozisyon chak imaj. Labackground-repeat
pwopriyete yo itilize pou kontwole kijan imaj yo repete. Premye imaj la,red.png
, mete pou pa repete (no-repeat
), pandan y ap dezyèm imaj la,blue.png
, mete pou repete (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;
}