Kontenut Marketing
Karatteristiċi tas-CSS3 li tista' ma tkunx konxju bihom: Flexbox, Grid Layouts, Proprjetajiet tad-dwana, Transizzjonijiet, Animazzjonijiet, u Sfondi Multipli
Folji tal-Istil Cascading (CSS) tkompli tevolvi u l-aħħar verżjonijiet jista 'jkollhom xi karatteristiċi li tista' lanqas tkun taf bihom. Hawn huma xi wħud mit-titjib u l-metodoloġiji ewlenin introdotti b'CSS3, flimkien ma 'eżempji ta' kodiċi:
- Tqassim tal-Kaxxa Flessibbli (Flexbox): mod ta 'tqassim li jippermettilek toħloq taqsim flessibbli u li jirrispondu għall-paġni tal-web. Bil-flexbox, tista 'faċilment tallinja u tqassam elementi f'kontenitur. n dan l-eżempju, il
.container
użi tal-klassidisplay: flex
biex tippermetti l-modalità tat-tqassim tal-flexbox. Il-justify-content
proprjetà hija stabbilita għalcenter
biex iċċentra orizzontalment l-element tifel fil-kontenitur. Il-align-items
proprjetà hija stabbilita għalcenter
biex iċċentra vertikalment l-element tat-tifel. Il-.item
klassi tistabbilixxi l-kulur fl-isfond u l-ikkuttunar għall-element tifel.
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;
}
Riżultat
Element Iċċentrat
- It-tqassim tal-grilja: mod ieħor ta 'tqassim li jippermettilek toħloq taqsim kumpless ibbażat fuq grid għall-paġni tal-web. Bil-grilja, tista 'tispeċifika ringieli u kolonni, u mbagħad tpoġġi elementi f'ċelloli speċifiċi tal-grilja. F'dan l-eżempju, il-
.grid-container
użi tal-klassidisplay: grid
biex tippermetti l-mod ta 'tqassim tal-grilja. Il-grid-template-columns
proprjetà hija stabbilita għalrepeat(2, 1fr)
biex toħloq żewġ kolonni ta 'wisa' ugwali. Il-gap
proprjetà tistabbilixxi l-ispazjar bejn iċ-ċelloli tal-grilja. Il-.grid-item
klassi tistabbilixxi l-kulur fl-isfond u l-ikkuttunar għall-oġġetti tal-grilja.
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;
}
Riżultat
Punt 1
Punt 2
Punt 3
Punt 4
- Transizzjonijiet: CSS3 introduċa għadd ta 'proprjetajiet u tekniki ġodda għall-ħolqien ta' tranżizzjonijiet fuq paġni tal-web. Per eżempju, il-
transition
proprjetà tista 'tintuża biex janimaw bidliet fil-proprjetajiet CSS maż-żmien. F'dan l-eżempju, il-.box
klassi tistabbilixxi l-wisa ', l-għoli, u l-kulur tal-isfond inizjali għall-element. Il-transition
proprjetà hija stabbilita għalbackground-color 0.5s ease
biex janimaw bidliet fil-proprjetà tal-kulur tal-isfond fuq nofs sekonda b'funzjoni ta 'ħin ta' faċilità ta 'dħul. Il-.box:hover
klassi tibdel il-kulur fl-isfond tal-element meta l-pointer tal-maws ikun fuqu, u b'hekk tiskatta l-animazzjoni tat-tranżizzjoni.
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;
}
Riżultat
Imbattla
Hawn!
Hawn!
- animazzjonijiet: CSS3 introduċa għadd ta' proprjetajiet u tekniki ġodda għall-ħolqien ta' animazzjonijiet fuq paġni tal-web. F'dan l-eżempju, żidna animazzjoni bl-użu tal-
animation
proprjetà. Imxejna definiti a@keyframes
regola għall-animazzjoni, li tispeċifika li l-kaxxa għandha ddur minn 0 gradi għal 90 grad fuq tul ta '0.5 sekondi. Meta l-kaxxa tittajjar fuq, il-spin
animazzjoni hija applikata biex iddawwar il-kaxxa. Il-animation-fill-mode
proprjetà hija stabbilita għalforwards
biex jiġi żgurat li l-istat finali tal-animazzjoni jinżamm wara li tispiċċa.
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;
}
Riżultat
Imbattla
Hawn!
Hawn!
- Proprjetajiet Custom CSS: Magħruf ukoll bħala Varjabbli CSS, proprjetajiet tad-dwana ġew introdotti f'CSS3. Huma jippermettulek tiddefinixxi u tuża l-proprjetajiet tad-dwana tiegħek stess f'CSS, li jistgħu jintużaw biex taħżen u tuża mill-ġdid il-valuri tul l-istilsheets tiegħek. Il-varjabbli CSS huma identifikati b'isem li jibda b'żewġ sing, bħal
--my-variable
. F'dan l-eżempju, aħna niddefinixxu varjabbli CSS imsejħa –primary-color u nagħtuha valur ta'#007bff
, li huwa kulur blu komunement użat bħala kulur primarju f'ħafna disinji. Aħna użajna din il-varjabbli biex tissettja l-background-color
proprjetà ta’ element buttuna, billi tuża l-var()
funzjoni u tgħaddi l-isem varjabbli. Dan se juża l-valur tal-varjabbli bħala l-kulur fl-isfond għall-buttuna.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Sfondi Multipli: CSS3 jippermettilek li tispeċifika immaġini multipli fl-isfond għal element, bil-kapaċità li tikkontrolla l-pożizzjonament u l-ordni tal-istivar tiegħu. L-isfond huwa magħmul minn żewġ stampi,
red.png
u,blue.png
, li huma mgħobbija bl-użubackground-image
proprjetà. L-ewwel immaġni,red.png
, huwa pożizzjonat fir-rokna t'isfel tal-lemin tal-element, filwaqt li t-tieni immaġini,blue.png
, huwa pożizzjonat fir-rokna ta 'fuq tax-xellug tal-element. Il-background-position
proprjetà tintuża biex tikkontrolla l-pożizzjonament ta 'kull immaġini. Il-background-repeat
proprjetà tintuża biex tikkontrolla kif l-immaġini jirrepetu. L-ewwel immaġni,red.png
, hija ssettjata biex ma tirrepetix (no-repeat
), filwaqt li t-tieni immaġini,blue.png
, hija ssettjata biex tirrepeti (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;
}