Marketing Content
Taybetmendiyên CSS3-ê ku hûn dikarin ji wan hay nebin: Flexbox, Rêzikên Grid, Taybetmendiyên Xweser, Veguheztin, Anîmasyon, û Gelek Paşnav
NameCSS) pêşkeftinê bidomînin û dibe ku guhertoyên herî dawî hin taybetmendiyên ku hûn jî jê hay jê nebin hebin. Li vir hin çêtirkirin û metodolojiyên sereke yên ku bi CSS3 re hatine destnîşan kirin, digel mînakên kodê hene:
- Plansaziya qutiya nerm (Flexbox): moda sêwiranê ku dihêle hûn ji bo rûpelên malperê sêwiranên maqûl û bersivdar biafirînin. Bi flexbox re, hûn dikarin bi hêsanî hêmanan di hundurê konteynerê de bihev bikin û belav bikin. di vê nimûneyê de,
.container
bikaranîna classdisplay: flex
ji bo çalakkirina moda layout flexbox. Ewjustify-content
milk hatiye danîncenter
da ku hêmana zarokê di hundurê konteynerê de bi rengek horîzontal navend bike. Ewalign-items
milk hatiye danîncenter
ji bo vertîkal navenda hêmana zarok. Ew.item
çîn ji bo hêmana zarokê rengê paşxanê û pêlavê destnîşan dike.
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;
}
Netîce
Hêmana Navendî
- Plansaziya torê: moda sêwirana din a ku dihêle hûn ji bo rûpelên malperê sêwiranên tevna-bingeha tevlihev biafirînin. Bi torê, hûn dikarin rêz û stûnan diyar bikin, û dûv re hêmanan di nav şaneyên taybetî yên torê de bi cîh bikin. Di vê nimûneyê de, ya
.grid-container
bikaranîna classdisplay: grid
ji bo çalakkirina moda sêwirana torê. Ewgrid-template-columns
milk hatiye danînrepeat(2, 1fr)
ji bo afirandina du stûnên bi firehî wekhev. Ewgap
taybetmendî cîhê di navbera şaneyên torê de destnîşan dike. Ew.grid-item
çîn ji bo hêmanên torê rengê paşxanê û pêlavê destnîşan dike.
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;
}
Netîce
Babetê 1
Babetê 2
Babetê 3
Babetê 4
- Veguhertin: CSS3 hejmarek taybetmendî û teknîkên nû ji bo afirandina veguheztina li ser rûpelên malperê destnîşan kir. Mînakî, ya
transition
taybetmendî dikare were bikar anîn da ku bi demê re guheztinên taybetmendiyên CSS-ê zindî bike. Di vê nimûneyê de, ya.box
class ji bo hêmanê firehî, bilindahî û rengê paşxaneya destpêkê destnîşan dike. Ewtransition
milk hatiye danînbackground-color 0.5s ease
ji bo ku bi fonksiyonek demsaziyê ya hêsan-derketinê di nîvê saniyeyê de guheztinên taybetmendiya rengê paşîn zindî bike. Ew.box:hover
çîn dema ku nîşana mişkê li ser be, rengê paşxaneya hêmanê diguhezîne, anîmasyona veguhêz vedike.
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;
}
Netîce
hover
Vir!
Vir!
- Animasiyalar: CSS3 ji bo çêkirina anîmasyonên li ser rûpelên malperê hejmarek taybetmendî û teknîkên nû destnîşan kir. Di vê nimûneyê de, me anîmasyonek bi karanîna ve zêde kiriye
animation
mal. Me diyar kir a@keyframes
qaîdeya ji bo anîmasyonê, ku diyar dike ku qutik divê ji 0 dereceyan heya 90 pileyî di dirêjahiya 0.5 saniyan de bizivire. Dema ku sindoq li ser tê hilanîn, yaspin
anîmasyon ji bo zivirîna qutikê tê sepandin. Ewanimation-fill-mode
milk hatiye danînforwards
da ku piştrast bikin ku rewşa dawî ya anîmasyonê piştî ku qediya bimîne.
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;
}
Netîce
hover
Vir!
Vir!
- Taybetmendiyên Xweser ên CSS: Her weha tê zanîn Guherbarên CSS, taybetmendiyên xwerû di CSS3 de hatin destnîşan kirin. Ew dihêlin ku hûn di CSS-ê de taybetmendiyên xwerû yên xwerû diyar bikin û bikar bînin, ku dikarin werin bikar anîn da ku li seranserê şêwazên xwe nirxan hilînin û ji nû ve bikar bînin. Guherbarên CSS bi navek ku bi du daçekan dest pê dike têne nas kirin, wek mînak
--my-variable
. Di vê nimûneyê de, em guhêrbarek CSS-ê ya bi navê –primary-color diyar dikin û nirxek didin wê#007bff
, ku rengek şîn e ku bi gelemperî di gelek sêwiran de wekî rengek bingehîn tê bikar anîn. Me ev guhêrbar bikar aniye ji bo danînabackground-color
taybetmendiya hêmanek bişkojkê, bi karanîna yavar()
fonksiyon û di navê guhêrbar de derbas dibe. Ev ê nirxa guhêrbar wekî rengê paşxanê ji bo bişkojkê bikar bîne.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Gelek paşxane: CSS3 destûrê dide te ku hûn ji bo hêmanek gelek wêneyên paşîn diyar bikin, bi şiyana kontrolkirina cîh û rêzika wê. Paşnav ji du wêneyan pêk tê,
red.png
ûblue.png
, yên ku bi karanîna têne barkirinbackground-image
mal. Wêneyê yekem,red.png
, li quncikê jêrîn ê rastê yê hêmanê ye, dema ku wêneya duyemîn,blue.png
, li quncika jorîn a çepê ya hêmanê ye. Ewbackground-position
taybetmendî ji bo kontrolkirina pozîsyona her wêneyê tê bikar anîn. Ewbackground-repeat
taybetmendî tê bikar anîn da ku kontrol bike ka wêne çawa dubare dibin. Wêneyê yekem,red.png
, tê destnîşan kirin ku dubare nebe (no-repeat
), dema ku wêneya duyemîn,blue.png
, tête dubare kirin (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;
}