Edukia Marketing
Agian ezagutzen ez dituzun CSS3 ezaugarriak: Flexbox, Sare-diseinuak, Propietate pertsonalizatuak, Trantsizioak, Animazioak eta hainbat atzeko plano
Kaskadako estilo-orriak (CSS) eboluzionatzen jarraitzen du eta azken bertsioek agian ezagutzen ez dituzun ezaugarri batzuk izan ditzakete. Hona hemen CSS3-rekin sartutako hobekuntza eta metodologia nagusietako batzuk, kode adibideekin batera:
- Kutxa malguaren diseinua (Flexbox): web orrietarako diseinu malguak eta sentikorrak sortzeko aukera ematen duen diseinu modua. Flexbox-ekin, erraz lerrokatu eta banatu ditzakezu elementuak edukiontzi batean. n adibide honetan,
.container
klase erabilerakdisplay: flex
flexbox diseinu modua gaitzeko. Thejustify-content
jabetza ezarrita dagocenter
elementu umea edukiontzi barruan horizontalki zentratzeko. Thealign-items
jabetza ezarrita dagocenter
elementu umea bertikalki zentratzeko. The.item
klaseak atzeko planoaren kolorea eta betegarria ezartzen ditu haurraren elementuarentzat.
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;
}
Emaitza
Zentratutako elementua
- Sarearen diseinua: sarean oinarritutako diseinu konplexuak sortzeko aukera ematen duen beste diseinu-modu bat web orrietarako. Saretarekin, errenkadak eta zutabeak zehaztu ditzakezu, eta, ondoren, elementuak sareko gelaxka zehatzetan jar ditzakezu. Adibide honetan,
.grid-container
klase erabilerakdisplay: grid
sareta diseinu modua gaitzeko. Thegrid-template-columns
jabetza ezarrita dagorepeat(2, 1fr)
zabalera berdineko bi zutabe sortzeko. Thegap
propietateak sareko gelaxken arteko tartea ezartzen du. The.grid-item
klaseak atzeko planoaren kolorea eta betegarria ezartzen ditu sareta-elementuen.
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;
}
Emaitza
Item 1
Item 2
Item 3
Item 4
- Trantsizioak: CSS3-k web orrietan trantsizioak sortzeko hainbat propietate eta teknika berri sartu zituen. Adibidez, the
transition
propietatea CSS propietateetan aldaketak animatzeko erabil daiteke denboran zehar. Adibide honetan,.box
class-ek elementuaren zabalera, altuera eta hasierako atzeko kolorea ezartzen ditu. Thetransition
jabetza ezarrita dagobackground-color 0.5s ease
atzeko planoko kolorearen propietatearen aldaketak segundo erdi baino gehiago animatzeko, erraz sartzeko denbora-funtzio batekin. The.box:hover
klaseak elementuaren atzeko planoaren kolorea aldatzen du saguaren erakuslea gainean dagoenean, trantsizio animazioa abiaraziz.
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;
}
Emaitza
Pasatzean
Hemen!
Hemen!
- animazioak: CSS3-k web orrietan animazioak sortzeko hainbat propietate eta teknika berri sartu zituen. Adibide honetan, animazio bat gehitu dugu hau erabiliz
animation
jabetza. A definitu dugu@keyframes
animaziorako araua, kutxa 0 gradutik 90 gradura biratu behar dela zehazten duena 0.5 segundoko iraupenean. Kutxa gainean jartzen denean,spin
animazioa aplikatzen da koadroa biratzeko. Theanimation-fill-mode
jabetza ezarrita dagoforwards
animazioaren azken egoera amaitu ondoren mantentzen dela ziurtatzeko.
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;
}
Emaitza
Pasatzean
Hemen!
Hemen!
- CSS propietate pertsonalizatuak: bezala ere ezaguna CSS aldagaiak, propietate pertsonalizatuak CSS3n sartu ziren. Zure propietate pertsonalizatuak CSS-n definitzeko eta erabiltzeko aukera ematen dizute, estilo-orrietan balioak gordetzeko eta berrerabiltzeko erabil daitezkeenak. CSS aldagaiak bi marrarekin hasten den izen batekin identifikatzen dira, adibidez
--my-variable
. Adibide honetan, –primary-color izeneko CSS aldagai bat definitzen dugu eta balio bat ematen diogu#007bff
, hau da, diseinu askotan kolore nagusi gisa erabiltzen den kolore urdina. Aldagai hau ezartzeko erabili dugubackground-color
botoiaren elementu baten propietatea erabilizvar()
funtzioa eta aldagaiaren izena pasatuz. Honek aldagaiaren balioa erabiliko du botoiaren atzeko planoko kolore gisa.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Hainbat atzeko planoa: CSS3-k elementu baten atzeko planoko hainbat irudi zehaztea ahalbidetzen du, bere kokapena eta pilaketa-ordena kontrolatzeko gaitasunarekin. Atzealdea bi irudiz osatuta dago,
red.png
blue.png
, kargatzen direnak erabilizbackground-image
jabetza. Lehenengo irudia,red.png
, elementuaren beheko eskuineko izkinan kokatzen da, bigarren irudia, berriz,blue.png
, elementuaren goiko ezkerreko ertzean kokatzen da. Thebackground-position
propietatea irudi bakoitzaren kokapena kontrolatzeko erabiltzen da. Thebackground-repeat
propietatea irudiak nola errepikatzen diren kontrolatzeko erabiltzen da. Lehenengo irudia,red.png
, ez errepikatzeko ezarrita dago (no-repeat
), bigarren irudia, berriz,blue.png
, errepikatzeko ezarrita dago (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;
}