Content Marketing
CSS3 eiginleikar sem þú gætir ekki verið meðvitaðir um: Flexbox, Grid Layouts, Custom Properties, Transitions, Animation og Margfeldi bakgrunnur
Cascading stílblöð (CSS) halda áfram að þróast og nýjustu útgáfurnar kunna að hafa nokkra eiginleika sem þú gætir ekki einu sinni verið meðvitaður um. Hér eru nokkrar af helstu endurbótum og aðferðum sem kynntar eru með CSS3, ásamt kóðadæmum:
- Sveigjanlegt kassaskipulag (Flexbox): útlitsstilling sem gerir þér kleift að búa til sveigjanlegt og móttækilegt skipulag fyrir vefsíður. Með flexbox geturðu auðveldlega stillt og dreift hlutum innan íláts. n þessu dæmi, the
.container
bekk notardisplay: flex
til að virkja flexbox skipulagsham. Thejustify-content
eign er stillt ácenter
til að miðja undirhlutann lárétt innan ílátsins. Thealign-items
eign er stillt ácenter
til að miðja undireininguna lóðrétt. The.item
bekkur setur bakgrunnslit og bólstrun fyrir barnaþáttinn.
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;
}
Niðurstaða
Miðað frumefni
- Skipulag hnitanets: annar útlitshamur sem gerir þér kleift að búa til flókin rist-undirstaða skipulag fyrir vefsíður. Með hnitaneti geturðu tilgreint línur og dálka og síðan sett þætti innan tiltekinna reita hnitanetsins. Í þessu dæmi er
.grid-container
bekk notardisplay: grid
til að virkja útlitsstillingu fyrir rist. Thegrid-template-columns
eign er stillt árepeat(2, 1fr)
til að búa til tvo dálka jafn breiða. Thegap
eiginleiki setur bilið á milli ristfruma. The.grid-item
bekkur setur bakgrunnslit og fyllingu fyrir rist atriðin.
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;
}
Niðurstaða
Liður 1
Liður 2
Liður 3
Liður 4
- Umskipti: CSS3 kynnti fjölda nýrra eiginleika og tækni til að búa til umbreytingar á vefsíðum. Til dæmis, the
transition
eign er hægt að nota til að lífga breytingar á CSS eignum með tímanum. Í þessu dæmi er.box
bekk setur breidd, hæð og upphafsbakgrunnslit fyrir frumefni. Thetransition
eign er stillt ábackground-color 0.5s ease
til að lífga breytingar á bakgrunnslitareiginleikum á hálfri sekúndu með tímastillingu sem auðvelt er að taka inn. The.box:hover
class breytir bakgrunnslit frumefnisins þegar músarbendillinn er yfir honum og kveikir á umbreytingarhreyfingunni.
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;
}
Niðurstaða
Sveima
Hérna!
Hérna!
- Teiknimyndir: CSS3 kynnti fjölda nýrra eiginleika og tækni til að búa til hreyfimyndir á vefsíðum. Í þessu dæmi höfum við bætt við hreyfimynd með því að nota
animation
eign. Við höfum skilgreint a@keyframes
regla fyrir hreyfimyndina, sem tilgreinir að kassinn ætti að snúa úr 0 gráðum í 90 gráður á 0.5 sekúndum tíma. Þegar kassi er sveima yfir, thespin
hreyfimynd er notuð til að snúa kassanum. Theanimation-fill-mode
eign er stillt áforwards
til að tryggja að endanlegt ástand hreyfimyndarinnar haldist eftir að því lýkur.
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;
}
Niðurstaða
Sveima
Hérna!
Hérna!
- CSS sérsniðnar eiginleikar: Einnig þekkt sem CSS breytur, sérsniðnir eiginleikar voru kynntir í CSS3. Þeir gera þér kleift að skilgreina og nota þína eigin sérsniðnu eiginleika í CSS, sem hægt er að nota til að geyma og endurnýta gildi í gegnum stílblöðin þín. CSS breytur eru auðkenndar með nafni sem byrjar á tveimur strikum, svo sem
--my-variable
. Í þessu dæmi skilgreinum við CSS breytu sem kallast –primary-color og gefum henni gildið#007bff
, sem er blár litur sem almennt er notaður sem aðallitur í mörgum hönnunum. Við höfum notað þessa breytu til að stillabackground-color
eiginleiki hnappaeiningar, með því að notavar()
fall og að senda inn breytuheitið. Þetta mun nota gildi breytunnar sem bakgrunnslit fyrir hnappinn.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Margfaldur bakgrunnur: CSS3 gerir þér kleift að tilgreina margar bakgrunnsmyndir fyrir frumefni, með getu til að stjórna staðsetningu hans og stöflun. Bakgrunnurinn er samsettur úr tveimur myndum,
red.png
ogblue.png
, sem eru hlaðnir með því að notabackground-image
eign. Fyrsta myndin,red.png
, er staðsett neðst í hægra horni frumefnisins, en önnur myndin,blue.png
, er staðsett efst í vinstra horni frumefnisins. Thebackground-position
eign er notuð til að stjórna staðsetningu hverrar myndar. Thebackground-repeat
eiginleiki er notaður til að stjórna því hvernig myndirnar endurtaka sig. Fyrsta myndin,red.png
, er stillt á að endurtaka ekki (no-repeat
), en önnur myndin,blue.png
, er stillt á að endurtaka (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;
}