Marketing Përmbajtja
Karakteristikat e CSS3 për të cilat mund të mos jeni të vetëdijshëm: Flexbox, Paraqitjet e rrjetit, Vetitë e personalizuara, tranzicionet, animacionet dhe sfondet e shumëfishta
Fletët e stilit kaskadë (CSS) vazhdoni të evoluoni dhe versionet më të fundit mund të kenë disa veçori për të cilat mund të mos jeni as të vetëdijshëm. Këtu janë disa nga përmirësimet dhe metodologjitë kryesore të prezantuara me CSS3, së bashku me shembuj kodesh:
- Paraqitja fleksibël e kutisë (Flexbox): një modalitet paraqitjeje që ju lejon të krijoni paraqitje fleksibël dhe të përgjegjshme për faqet e internetit. Me flexbox, ju lehtë mund të rreshtoni dhe shpërndani elementë brenda një kontejneri. Në këtë shembull,
.container
përdorimet e klasësdisplay: flex
për të aktivizuar modalitetin e paraqitjes flexbox. Tëjustify-content
prona është caktuar nëcenter
për të përqendruar horizontalisht elementin fëmijë brenda kontejnerit. Tëalign-items
prona është caktuar nëcenter
për të përqendruar vertikalisht elementin fëmijë. Të.item
class vendos ngjyrën e sfondit dhe mbushjen për elementin fëmijë.
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;
}
Rezultat
Element i përqendruar
- Paraqitja e rrjetës: një tjetër mënyrë paraqitjeje që ju lejon të krijoni paraqitje komplekse të bazuara në rrjet për faqet e internetit. Me rrjetë, mund të specifikoni rreshta dhe kolona, dhe më pas të vendosni elementë brenda qelizave specifike të rrjetit. Në këtë shembull,
.grid-container
përdorimet e klasësdisplay: grid
për të aktivizuar modalitetin e paraqitjes së rrjetit. Tëgrid-template-columns
prona është caktuar nërepeat(2, 1fr)
për të krijuar dy kolona me gjerësi të barabartë. Tëgap
vetia përcakton hapësirën midis qelizave të rrjetit. Të.grid-item
class vendos ngjyrën e sfondit dhe mbushjen për artikujt e rrjetës.
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;
}
Rezultat
Item 1
Item 2
Item 3
Item 4
- Tranzicionet: CSS3 prezantoi një numër karakteristikash dhe teknikash të reja për krijimin e tranzicioneve në faqet e internetit. Për shembull,
transition
vetia mund të përdoret për të animuar ndryshimet në vetitë CSS me kalimin e kohës. Në këtë shembull,.box
class vendos gjerësinë, lartësinë dhe ngjyrën fillestare të sfondit për elementin. Tëtransition
prona është caktuar nëbackground-color 0.5s ease
për të animuar ndryshimet në veçorinë e ngjyrës së sfondit për gjysmë sekonde me një funksion kohor lehtësimi. Të.box:hover
klasa ndryshon ngjyrën e sfondit të elementit kur treguesi i miut është mbi të, duke shkaktuar animacionin e tranzicionit.
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;
}
Rezultat
rri pezull
Këtu!
Këtu!
- Temat: CSS3 prezantoi një numër karakteristikash dhe teknikash të reja për krijimin e animacioneve në faqet e internetit. Në këtë shembull, ne kemi shtuar një animacion duke përdorur
animation
prone. Ne kemi përcaktuar një@keyframes
rregulli për animacionin, i cili specifikon se kutia duhet të rrotullohet nga 0 gradë në 90 gradë për një kohëzgjatje prej 0.5 sekondash. Kur kutia qëndron pezull mbi,spin
animacioni aplikohet për të rrotulluar kutinë. Tëanimation-fill-mode
prona është caktuar nëforwards
për të siguruar që gjendja përfundimtare e animacionit të ruhet pasi të përfundojë.
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;
}
Rezultat
rri pezull
Këtu!
Këtu!
- Karakteristikat e personalizuara të CSS: Gjithashtu i njohur si Variablat CSS, vetitë e personalizuara u prezantuan në CSS3. Ato ju lejojnë të përcaktoni dhe përdorni vetitë tuaja të personalizuara në CSS, të cilat mund të përdoren për të ruajtur dhe ripërdorur vlerat nëpër fletët e stilit tuaj. Variablat CSS identifikohen me një emër që fillon me dy vija, si p.sh
--my-variable
. Në këtë shembull, ne përcaktojmë një variabël CSS të quajtur –primary-color dhe i japim një vlerë prej#007bff
, e cila është një ngjyrë blu që përdoret zakonisht si ngjyrë primare në shumë dizajne. Ne kemi përdorur këtë variabël për të vendosurbackground-color
vetia e një elementi butoni, duke përdorurvar()
funksioni dhe kalimi në emrin e ndryshores. Kjo do të përdorë vlerën e ndryshores si ngjyrën e sfondit për butonin.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Sfondi të shumëfishtë: CSS3 ju lejon të specifikoni imazhe të shumta të sfondit për një element, me aftësinë për të kontrolluar pozicionimin dhe renditjen e tij. Sfondi përbëhet nga dy imazhe,
red.png
blue.png
, të cilat ngarkohen duke përdorurbackground-image
prone. Imazhi i parë,red.png
, pozicionohet në këndin e poshtëm djathtas të elementit, ndërsa imazhi i dytë,blue.png
, pozicionohet në këndin e sipërm të majtë të elementit. Tëbackground-position
vetia përdoret për të kontrolluar pozicionimin e çdo imazhi. Tëbackground-repeat
vetia përdoret për të kontrolluar se si përsëriten imazhet. Imazhi i parë,red.png
, është vendosur të mos përsëritet (no-repeat
), ndërsa imazhi i dytë,blue.png
, është vendosur të përsëritet (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;
}