Content Marketing
Ny endri-javatra CSS3 mety tsy ho fantatrao: Flexbox, Grid Layouts, Custom Properties, Transitions, Animations, ary marolafy
Cascading Style Sheets (CSS) mitohy mivoatra ary ny dikan-teny farany dia mety manana endri-javatra sasany izay mety tsy ho fantatrao akory. Ireto ny sasany amin'ireo fanatsarana lehibe sy fomba fiasa nampidirina tamin'ny CSS3, miaraka amin'ireo ohatra kaody:
- Fametrahana Boaty Flexible (Flexbox): fomba fandrafetana izay ahafahanao mamorona filaharana moramora sy mamaly ho an'ny pejin-tranonkala. Miaraka amin'ny flexbox, azonao atao ny mampifanaraka mora foana sy mizara singa ao anaty fitoeran-javatra iray. n ity ohatra ity, ny
.container
fampiasana kilasydisplay: flex
mba hahafahan'ny flexbox layout mode. nyjustify-content
fananana dia napetraka amin'nycenter
mba hampifantoka marindrano ny singa zaza ao anatin'ny fitoeran-javatra. nyalign-items
fananana dia napetraka amin'nycenter
mitsangana mitsangana ny singa zaza. ny.item
class dia mametraka ny loko sy ny padding ho an'ny singa ankizy.
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;
}
Result
Element afovoany
- Fametrahana ny tsipika: fomba fandrafetana hafa ahafahanao mamorona filaharana mifototra amin'ny grid sarotra ho an'ny pejin-tranonkala. Miaraka amin'ny grid, azonao atao ny mamaritra andalana sy tsanganana, ary avy eo mametraka singa ao anatin'ny sela manokana amin'ny grid. Amin'ity ohatra ity, ny
.grid-container
fampiasana kilasydisplay: grid
mba hahafahan'ny maodely layout grid. nygrid-template-columns
fananana dia napetraka amin'nyrepeat(2, 1fr)
mba hamoronana tsanganana roa mitovy sakany. nygap
Ny fananana dia mametraka ny elanelana misy eo amin'ny cellule grid. ny.grid-item
Ny kilasy dia mametraka ny loko sy ny padding ho an'ny singa 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;
}
Result
Andininy faha-1
Andininy faha-2
Andininy faha-3
Andininy faha-4
- Tetezamita: CSS3 dia nampiditra fananana sy teknika vaovao maromaro hamoronana fifindrana amin'ny pejin-tranonkala. Ohatra, ny
transition
Ny fananana dia azo ampiasaina hamelomana ny fanovana amin'ny fananana CSS rehefa mandeha ny fotoana. Amin'ity ohatra ity, ny.box
class dia mametraka ny sakany, ny haavony ary ny loko fototra voalohany ho an'ny singa. nytransition
fananana dia napetraka amin'nybackground-color 0.5s ease
hamelombelona ny fiovana amin'ny fananana loko ambadika mandritra ny antsasa-tsegondra miaraka amin'ny fampandehanana fotoana mora miditra. ny.box:hover
Ny kilasy dia manova ny loko ambadiky ny singa rehefa eo amboniny ny fanondro ny totozy, ka mahatonga ny sarimiaina tetezamita.
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;
}
Result
miaraka amin
Eto!
Eto!
- Animations: CSS3 dia nampiditra fananana sy teknika vaovao maromaro amin'ny famoronana sary mihetsika amin'ny pejin-tranonkala. Amin'ity ohatra ity dia nampiana sary mihetsika mampiasa ny
animation
fananana. Nofaritanay a@keyframes
fitsipika ho an'ny animation, izay mamaritra fa ny boaty dia tokony hihodina avy amin'ny 0 degre ka hatramin'ny 90 degre mandritra ny 0.5 segondra. Rehefa atsipy eo ambonin'ilay boaty nyspin
Animation dia ampiharina hanodinana ny boaty. nyanimation-fill-mode
fananana dia napetraka amin'nyforwards
mba hahazoana antoka fa tazonina ny toetra farany amin'ny sarimiaina rehefa vita.
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;
}
Result
miaraka amin
Eto!
Eto!
- CSS Custom Properties: Fantatra ihany koa CSS variables, ny fananana manokana dia nampidirina tao amin'ny CSS3. Izy ireo dia mamela anao hamaritra sy hampiasa ny fanananao manokana ao amin'ny CSS, izay azo ampiasaina hitahiry sy hampiasaina indray ny soatoavina manerana ny stylesheets. Ny fari-piainan'ny CSS dia fantatra amin'ny anarana izay manomboka amin'ny tsipika roa, toy ny
--my-variable
. Amin'ity ohatra ity, dia mamaritra ny fari-piadidiana CSS antsoina hoe -primary-color ary manome azy sanda ny#007bff
, izay loko manga fampiasa matetika ho loko voalohany amin'ny endrika maro. Nampiasa an'io variable io izahay mba hametrahana nybackground-color
fananan'ny singa bokotra iray, amin'ny fampiasana nyvar()
miasa sy mandalo amin'ny anarana miovaova. Izany dia hampiasa ny sandan'ny fari-piainana ho loko ambadiky ny bokotra.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Fototra maro: Ny CSS3 dia ahafahanao mamaritra sary lafika maro ho an'ny singa iray, miaraka amin'ny fahafahana mifehy ny filaharany sy ny filaharany. Ny lafika dia ahitana sary roa,
red.png
aryblue.png
, izay entina mampiasa nybackground-image
fananana. Ny sary voalohany,red.png
, dia apetraka eo amin'ny zoro havanana ambany amin'ilay singa, raha ny sary faharoa kosa,blue.png
, dia mipetraka eo amin'ny zoro ambony havia amin'ny singa. nybackground-position
Ny fananana dia ampiasaina hifehezana ny toerana misy ny sary tsirairay. nybackground-repeat
Ny fananana dia ampiasaina hifehezana ny famerimberenan'ny sary. Ny sary voalohany,red.png
, dia natao tsy hamerina (no-repeat
), raha ny sary faharoa,blue.png
, dia natao hamerina (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;
}