Nilalaman Marketing
Mga Tampok ng CSS3 na Maaaring Hindi Mo Alam: Flexbox, Grid Layout, Mga Custom na Property, Transition, Animation, at Maramihang Background
Cascading Style Sheet (CSS) patuloy na nagbabago at ang mga pinakabagong bersyon ay maaaring may ilang mga tampok na maaaring hindi mo alam. Narito ang ilan sa mga pangunahing pagpapahusay at pamamaraan na ipinakilala sa CSS3, kasama ang mga halimbawa ng code:
- Flexible Box Layout (Flexbox): isang layout mode na nagbibigay-daan sa iyong lumikha ng nababaluktot at tumutugon na mga layout para sa mga web page. Sa flexbox, maaari mong madaling ihanay at ipamahagi ang mga elemento sa loob ng isang lalagyan. n ang halimbawang ito, ang
.container
gamit ng klasedisplay: flex
upang paganahin ang flexbox layout mode. Angjustify-content
ari-arian ay nakatakda sacenter
upang pahalang na igitna ang elemento ng bata sa loob ng lalagyan. Angalign-items
ari-arian ay nakatakda sacenter
upang patayo na igitna ang elemento ng bata. Ang.item
itinatakda ng klase ang kulay ng background at padding para sa elemento ng bata.
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;
}
Resulta
Nakasentro na Elemento
- Layout ng grid: isa pang layout mode na nagbibigay-daan sa iyong lumikha ng mga kumplikadong grid-based na layout para sa mga web page. Sa grid, maaari mong tukuyin ang mga row at column, at pagkatapos ay ilagay ang mga elemento sa loob ng mga partikular na cell ng grid. Sa halimbawang ito, ang
.grid-container
gamit ng klasedisplay: grid
para paganahin ang grid layout mode. Anggrid-template-columns
ari-arian ay nakatakda sarepeat(2, 1fr)
upang lumikha ng dalawang column na magkapantay ang lapad. Anggap
itinatakda ng property ang espasyo sa pagitan ng mga grid cell. Ang.grid-item
itinatakda ng klase ang kulay ng background at padding para sa mga grid item.
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;
}
Resulta
Item 1
Item 2
Item 3
Item 4
- Mga Paglipat: Ipinakilala ng CSS3 ang ilang mga bagong katangian at pamamaraan para sa paglikha ng mga transition sa mga web page. Halimbawa, ang
transition
maaaring gamitin ang property para i-animate ang mga pagbabago sa CSS properties sa paglipas ng panahon. Sa halimbawang ito, ang.box
itinatakda ng klase ang lapad, taas, at paunang kulay ng background para sa elemento. Angtransition
ari-arian ay nakatakda sabackground-color 0.5s ease
upang i-animate ang mga pagbabago sa property ng kulay ng background sa loob ng kalahating segundo na may function ng ease-in-out na timing. Ang.box:hover
binabago ng klase ang kulay ng background ng elemento kapag nasa ibabaw nito ang pointer ng mouse, na nagti-trigger ng animation ng paglipat.
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;
}
Resulta
umali-aligid
Narito!
Narito!
- animation: Ipinakilala ng CSS3 ang ilang mga bagong katangian at pamamaraan para sa paglikha ng mga animation sa mga web page. Sa halimbawang ito, nagdagdag kami ng animation gamit ang
animation
ari-arian. Tinukoy namin ang isang@keyframes
panuntunan para sa animation, na tumutukoy na dapat umikot ang kahon mula 0 degrees hanggang 90 degrees sa tagal na 0.5 segundo. Kapag naka-hover ang kahon, angspin
inilapat ang animation upang paikutin ang kahon. Anganimation-fill-mode
ari-arian ay nakatakda saforwards
upang matiyak na ang huling estado ng animation ay mananatili pagkatapos nito.
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;
}
Resulta
umali-aligid
Narito!
Narito!
- Mga Custom na Property ng CSS: Kilala rin bilang Mga variable ng CSS, ipinakilala ang mga custom na katangian sa CSS3. Nagbibigay-daan sa iyo ang mga ito na tukuyin at gamitin ang sarili mong mga custom na property sa CSS, na magagamit para mag-imbak at gumamit muli ng mga value sa kabuuan ng iyong mga stylesheet. Ang mga variable ng CSS ay nakikilala sa pamamagitan ng isang pangalan na nagsisimula sa dalawang gitling, gaya ng
--my-variable
. Sa halimbawang ito, tinukoy namin ang isang variable ng CSS na tinatawag na –primary-color at binibigyan ito ng halaga ng#007bff
, na isang asul na kulay na karaniwang ginagamit bilang pangunahing kulay sa maraming disenyo. Ginamit namin ang variable na ito upang itakda angbackground-color
pag-aari ng isang elemento ng button, sa pamamagitan ng paggamit ngvar()
function at pagpasa sa variable na pangalan. Gagamitin nito ang halaga ng variable bilang kulay ng background para sa button.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Maramihang Background: Binibigyang-daan ka ng CSS3 na tumukoy ng maraming larawan sa background para sa isang elemento, na may kakayahang kontrolin ang pagkakasunud-sunod ng pagpoposisyon at pag-stack nito. Ang background ay binubuo ng dalawang larawan,
red.png
atblue.png
, na nilo-load gamit angbackground-image
ari-arian. Ang unang larawan,red.png
, ay nakaposisyon sa kanang ibabang sulok ng elemento, habang ang pangalawang larawan,blue.png
, ay nakaposisyon sa kaliwang tuktok na sulok ng elemento. Angbackground-position
Ang ari-arian ay ginagamit upang kontrolin ang pagpoposisyon ng bawat larawan. Angbackground-repeat
Ang property ay ginagamit upang kontrolin kung paano umuulit ang mga larawan. Ang unang larawan,red.png
, ay nakatakdang hindi ulitin (no-repeat
), habang ang pangalawang larawan,blue.png
, ay nakatakdang ulitin (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;
}