Content Marketing
Mga Feature sa CSS3 Mahimong Wala Nimo Mahibaloan: Flexbox, Grid Layouts, Custom Properties, Transitions, Animations, ug Multiple Backgrounds
Cascading Style Sheet (CSS) nagpadayon sa pag-uswag ug ang pinakabag-o nga mga bersyon mahimong adunay pipila ka mga bahin nga tingali wala nimo nahibal-an. Ania ang pipila sa mga dagkong kalamboan ug pamaagi nga gipaila sa CSS3, uban sa mga pananglitan sa code:
- Flexible nga Layout sa Kahon (Flexbox): usa ka layout mode nga nagtugot kanimo sa paghimo og flexible ug responsive nga mga layout alang sa mga web page. Uban sa flexbox, dali nimo ma-align ug maapod-apod ang mga elemento sa sulod sa usa ka sudlanan. n niini nga pananglitan, ang
.container
gamit sa klasedisplay: flex
aron mahimo ang flexbox layout mode. Angjustify-content
kabtangan gitakda sacenter
sa horizontally center sa bata nga elemento sulod sa sudlanan. Angalign-items
kabtangan gitakda sacenter
sa vertically center sa bata nga elemento. Ang.item
Ang klase nagtakda sa kolor sa background ug padding alang sa elemento sa 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 nga Elemento
- Layout sa grid: laing layout mode nga nagtugot kanimo sa paghimo og komplikadong grid-based nga mga layout alang sa mga web page. Uban sa grid, mahimo nimong ipiho ang mga laray ug kolum, ug dayon ibutang ang mga elemento sulod sa piho nga mga selyula sa grid. Niini nga pananglitan, ang
.grid-container
gamit sa klasedisplay: grid
aron mahimo ang grid layout mode. Anggrid-template-columns
kabtangan gitakda sarepeat(2, 1fr)
sa paghimo sa duha ka mga kolum sa managsama nga gilapdon. Anggap
Ang kabtangan nagtakda sa gilay-on tali sa mga selula sa grid. Ang.grid-item
Ang klase nagtakda sa kolor sa background ug padding alang sa mga butang sa 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;
}
resulta
Item 1
Item 2
Item 3
Item 4
- Mga transisyon: Gipaila sa CSS3 ang daghang bag-ong mga kabtangan ug mga teknik sa paghimo og mga transisyon sa mga panid sa web. Pananglitan, ang
transition
ang propyedad mahimong gamiton aron ma-animate ang mga kausaban sa CSS properties sa paglabay sa panahon. Niini nga pananglitan, ang.box
Ang klase nagtakda sa gilapdon, gitas-on, ug inisyal nga kolor sa background alang sa elemento. Angtransition
kabtangan gitakda sabackground-color 0.5s ease
aron i-animate ang mga pagbag-o sa kolor sa background nga kabtangan sa tunga sa segundo nga adunay usa ka dali nga pag-in-out nga function sa oras. Ang.box:hover
Gibag-o sa klase ang kolor sa background sa elemento kung naa na ang pointer sa mouse, nga nagpalihok sa animation sa pagbalhin.
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
Lutaw
Dinhi!
Dinhi!
- animation: Gipaila sa CSS3 ang daghang bag-ong mga kabtangan ug mga teknik sa paghimo og mga animation sa mga panid sa web. Niini nga pananglitan, nagdugang kami og animation gamit ang
animation
kabtangan. Atong gihubit a@keyframes
lagda alang sa animation, nga nagtino nga ang kahon kinahanglan magtuyok gikan sa 0 degrees ngadto sa 90 degrees sa gidugayon nga 0.5 segundos. Sa diha nga ang kahon gipalupad sa ibabaw, angspin
Ang animation gigamit aron i-rotate ang kahon. Anganimation-fill-mode
kabtangan gitakda saforwards
aron maseguro nga ang kataposang kahimtang sa animation mapabilin human kini mahuman.
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
Lutaw
Dinhi!
Dinhi!
- CSS Custom Properties: Gitawag usab nga CSS variables, gipaila-ila ang custom nga mga kabtangan sa CSS3. Gitugotan ka nila sa paghubit ug paggamit sa imong kaugalingon nga naandan nga mga kabtangan sa CSS, nga magamit sa pagtipig ug paggamit pag-usab sa mga kantidad sa imong mga stylesheet. Ang mga variable sa CSS giila sa usa ka ngalan nga nagsugod sa duha ka dash, sama sa
--my-variable
. Niini nga pananglitan, among gihubit ang usa ka variable nga CSS nga gitawag og -primary-color ug hatagan kini og bili sa#007bff
, nga usa ka asul nga kolor nga sagad gigamit ingon usa ka panguna nga kolor sa daghang mga disenyo. Gigamit namon kini nga variable aron itakda angbackground-color
kabtangan sa usa ka elemento sa buton, pinaagi sa paggamit savar()
function ug pagpasa sa variable nga ngalan. Gamiton niini ang bili sa variable isip kolor sa background alang sa buton.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Daghang Background: Gitugotan ka sa CSS3 sa pagpiho sa daghang mga imahe sa background alang sa usa ka elemento, nga adunay katakus nga makontrol ang pagkahan-ay sa pagpahimutang ug pag-stack niini. Ang background gilangkuban sa duha ka mga imahe,
red.png
ugblue.png
, nga gikarga gamit angbackground-image
kabtangan. Ang una nga imahe,red.png
, nahimutang sa tuo nga ubos nga suok sa elemento, samtang ang ikaduhang hulagway,blue.png
, nahimutang sa wala sa ibabaw nga suok sa elemento. Angbackground-position
Ang kabtangan gigamit aron makontrol ang posisyon sa matag imahe. Angbackground-repeat
Ang kabtangan gigamit aron makontrol kung giunsa pagbalik ang mga imahe. Ang una nga imahe,red.png
, gitakda nga dili na masubli (no-repeat
), samtang ang ikaduhang hulagway,blue.png
, gitakdang balikon (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;
}