See on küsimus, mida kuulen üsna sageli küsitud: Kas ühevärviliste värvide asemel on võimalik varje luua gradientidest? Puudub konkreetne CSS-i omadus, mis seda teeb (uskuge mind, ma olen vaadanud) ja kõik selle kohta leitud ajaveebipostitused on põhimõtteliselt palju CSS-i nippe gradiendi ligikaudseks määramiseks. Tegelikult käsitleme mõnda neist töö käigus.
Aga esmalt… teine artikkel gradientvarjude kohta? Kas tõesti?
Jah, see on järjekordne postitus sellel teemal, kuid see on erinev. Koos pingutame piire, et saada lahendus, mis kataks midagi, mida ma pole kusagil mujal näinud: läbipaistvus. Enamik nippe toimib, kui elemendil on läbipaistmatu taust, aga mis siis, kui meil on läbipaistev taust? Uurime seda juhtumit siin!
Enne alustamist lubage mul tutvustada minu gradiendi varjude generaator. Kõik, mida pead tegema, on konfiguratsiooni kohandamine ja koodi hankimine. Kuid järgige teksti, sest ma aitan teil mõista kogu loodud koodi loogikat.
Sisukord
Läbipaistmatu lahendus
Alustame lahendusega, mis töötab 80% enamikul juhtudest. Kõige tüüpilisem juhtum: kasutate taustaga elementi ja peate sellele lisama gradiendivarju. Mingeid läbipaistvusprobleeme pole vaja arvestada.
Lahendus on tugineda pseudoelemendile, kus gradient on määratletud. Asetate selle tegeliku elemendi taha ja rakendage sellele hägufiltrit.
.box { position: relative;
}
.box::before { content: ""; position: absolute; inset: -5px; /* control the spread */ transform: translate(10px, 8px); /* control the offsets */ z-index: -1; /* place the element behind */ background: /* your gradient here */; filter: blur(10px); /* control the blur */
}
See näib olevat palju koodi ja see on sellepärast, et see on nii. Siin on, kuidas oleksime saanud seda teha koos a box-shadow
selle asemel, kui kasutaksime gradiendi asemel ühtset värvi.
box-shadow: 10px 8px 10px 5px orange;
See peaks andma teile hea ülevaate sellest, mida esimeses väljavõttes olevad väärtused teevad. Meil on X- ja Y-nihked, hägususe raadius ja levimiskaugus. Pange tähele, et vajame negatiivset väärtust levikauguse jaoks, mis pärineb inset
vara.
Siin on demo, mis näitab gradiendi varju klassika kõrval box-shadow
:
Kui vaatate tähelepanelikult, märkate, et mõlemad varjud on veidi erinevad, eriti hägune osa. See pole üllatus, sest ma olen selles üsna kindel filter
atribuudi algoritm töötab erinevalt box-shadow
. See pole suur asi, kuna tulemus on lõpuks üsna sarnane.
See lahendus on hea, kuid sellel on siiski mõned puudused z-index: -1
deklaratsiooni. Jah seal on "konteksti virnastamine" seal toimub!
Kandideerisin a transform
põhielemendi juurde ja buum! Vari ei ole enam elemendi all. See pole viga, vaid virnastamiskonteksti loogiline tulemus. Ärge muretsege, ma ei hakka konteksti virnastamise kohta igavat seletama (Tegin seda juba Stack Overflow lõimes), kuid ma näitan teile siiski, kuidas sellest mööda minna.
Esimene lahendus, mida soovitan, on kasutada 3D-d transform
:
.box { position: relative; transform-style: preserve-3d;
}
.box::before { content: ""; position: absolute; inset: -5px; transform: translate3d(10px, 8px, -1px); /* (X, Y, Z) */ background: /* .. */; filter: blur(10px);
}
Kasutamise asemel z-index: -1
, kasutame negatiivset tõlget piki Z-telge. Me paneme kõik sisse translate3d()
. Ärge unustage seda kasutada transform-style: preserve-3d
põhielemendil; muidu 3D transform
ei jõustu.
Niipalju kui mina tean, ei ole sellel lahendusel kõrvalmõju, aga võib-olla näete seda. Kui see nii on, jagage seda kommentaaride jaotises ja proovime sellele lahendust leida!
Kui te mingil põhjusel ei saa 3D-d kasutada transform
, teine lahendus on tugineda kahele pseudoelemendile — ::before
ja ::after
. Üks loob gradiendi varju ja teine taasesitab peamise tausta (ja muud stiilid, mida võite vajada). Nii saame hõlpsalt juhtida mõlema pseudoelemendi virnastamise järjekorda.
.box { position: relative; z-index: 0; /* We force a stacking context */
}
/* Creates the shadow */
.box::before { content: ""; position: absolute; z-index: -2; inset: -5px; transform: translate(10px, 8px); background: /* .. */; filter: blur(10px);
}
/* Reproduces the main element styles */
.box::after { content: """; position: absolute; z-index: -1; inset: 0; /* Inherit all the decorations defined on the main element */ background: inherit; border: inherit; box-shadow: inherit;
}
Oluline on märkida, et me oleme sundides põhielement virnastamiskonteksti loomiseks deklareerimisega z-index: 0
või mis tahes muu vara, mis teeb sama, selle kallal. Samuti ärge unustage, et pseudoelemendid peavad viitena põhielemendi polsterduskasti. Seega, kui põhielemendil on ääris, peate pseudoelementide stiilide määratlemisel seda arvesse võtma. Te märkate, et ma kasutan inset: -2px
on ::after
põhielemendil määratletud piiri arvessevõtmiseks.
Nagu ma ütlesin, on see lahendus tõenäoliselt piisavalt hea enamikul juhtudel, kui soovite gradientvarju, kui te ei pea läbipaistvust toetama. Kuid me oleme siin väljakutseks ja piiride ületamiseks, nii et isegi kui te ei vaja seda, mis järgmiseks tuleb, jääge minuga. Tõenäoliselt õpid uusi CSS-i nippe, mida saad ka mujal kasutada.
Läbipaistev lahendus
Jätkame 3D-s sealt, kus pooleli jäime transform
ja eemaldage põhielemendist taust. Alustan varjuga, millel on nii nihked kui ka levimiskaugus võrdsed 0
.
Idee on leida viis, kuidas lõigata või peita kõik elemendi ala sees (rohelise äärise sees), jättes samal ajal väljapoole jääva. Me hakkame kasutama clip-path
selle eest. Kuid võite küsida, kuidas clip-path
saab teha lõike sees element.
Tõepoolest, seda pole võimalik teha, kuid me saame seda simuleerida konkreetse hulknurga mustriga:
clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax 100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,0 0)
Tada! Meil on gradientvari, mis toetab läbipaistvust. Kõik, mida me tegime, oli a clip-path
eelmisele koodile. Siin on hulknurkse osa illustreerimiseks joonis.
Sinine ala on nähtav osa pärast pealekandmist clip-path
. Kasutan kontseptsiooni illustreerimiseks ainult sinist värvi, kuid tegelikult näeme selle ala sees ainult varju. Nagu näete, on meil neli punkti, millel on suur väärtus (B
). Minu suur väärtus on 100vmax
, kuid see võib olla mis tahes suur väärtus, mida soovite. Idee on tagada, et meil oleks varju jaoks piisavalt ruumi. Meil on ka neli punkti, mis on pseudoelemendi nurgad.
Nooled illustreerivad hulknurka määratlevat rada. Alustame alates (-B, -B)
kuni jõuame (0,0)
. Kokku vajame 10 punkti. Mitte kaheksa punkti, sest kahte punkti korratakse teekonnal kaks korda ((-B,-B)
ja (0,0)
).
On ikka üks asi veel jääb meie teha ning see tuleb arvesse võtta levimiskaugust ja nihkeid. Ainus põhjus, miks ülaltoodud demo töötab, on see, et see on konkreetne juhtum, kus nihked ja levimiskaugus on võrdsed 0
.
Määratleme leviku ja vaatame, mis juhtub. Pidage meeles, et me kasutame inset
negatiivse väärtusega, et seda teha:
Pseudoelement on nüüd põhielemendist suurem, seega clip-path
kärbib rohkem, kui vajame. Pidage meeles, et osa tuleb alati lõigata sees põhielement (ala näite rohelise piiri sees). Peame reguleerima selle sees oleva nelja punkti asukohta clip-path
.
.box { --s: 10px; /* the spread */ position: relative;
}
.box::before { inset: calc(-1 * var(--s)); clip-path: polygon( -100vmax -100vmax, 100vmax -100vmax, 100vmax 100vmax, -100vmax 100vmax, -100vmax -100vmax, calc(0px + var(--s)) calc(0px + var(--s)), calc(0px + var(--s)) calc(100% - var(--s)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s)) calc(0px + var(--s)), calc(0px + var(--s)) calc(0px + var(--s)) );
}
Oleme defineerinud CSS-muutuja, --s
, levimiskauguse jaoks ja värskendas hulknurga punkte. Ma ei puudutanud punkte, kus kasutan suurt väärtust. Värskendan ainult neid punkte, mis määratlevad pseudoelemendi nurgad. Ma suurendan kõiki nullväärtusi võrra --s
ja vähendada 100%
väärtused poolt --s
.
Sama loogika on ka nihketega. Pseudoelemendi tõlkimisel on vari joondusest väljas ja me peame hulknurga uuesti korrigeerima ja punkte vastupidises suunas liigutama.
.box { --s: 10px; /* the spread */ --x: 10px; /* X offset */ --y: 8px; /* Y offset */ position: relative;
}
.box::before { inset: calc(-1 * var(--s)); transform: translate3d(var(--x), var(--y), -1px); clip-path: polygon( -100vmax -100vmax, 100vmax -100vmax, 100vmax 100vmax, -100vmax 100vmax, -100vmax -100vmax, calc(0px + var(--s) - var(--x)) calc(0px + var(--s) - var(--y)), calc(0px + var(--s) - var(--x)) calc(100% - var(--s) - var(--y)), calc(100% - var(--s) - var(--x)) calc(100% - var(--s) - var(--y)), calc(100% - var(--s) - var(--x)) calc(0px + var(--s) - var(--y)), calc(0px + var(--s) - var(--x)) calc(0px + var(--s) - var(--y)) );
}
Nihkete jaoks on veel kaks muutujat: --x
ja --y
. Me kasutame neid sees transform
ja värskendame ka clip-path
väärtused. Suurte väärtustega hulknurkpunkte me ikka ei puuduta, aga kõik teised nihutame — vähendame --x
X-koordinaatidest ja --y
Y-koordinaatidest.
Nüüd peame vaid värskendama mõningaid muutujaid, et hallata gradiendi varju. Ja kui me sellega tegeleme, muutkem ka hägususe raadius muutujaks:
Kas meil on ikka 3D-d vaja
transform
trikk?
Kõik oleneb piirist. Ärge unustage, et pseudoelemendi viide on polsterduskast, nii et kui rakendate põhielemendile äärise, tekib kattumine. Sa kas jätad 3D alles transform
trikk või värskenda inset
piiri arvestamiseks.
Siin on eelmine demo koos värskendatud versiooniga inset
väärtus 3D asemel transform
:
Ma ütleksin, et see on sobivam viis, kuna levimiskaugus on täpsem, kuna see algab ääriskastist, mitte polsterduskastist. Kuid peate kohandama inset
väärtus vastavalt põhielemendi piirile. Mõnikord on elemendi piir teadmata ja peate kasutama eelmist lahendust.
Varasema läbipaistmatu lahenduse korral võib teil tekkida virnastamiskonteksti probleem. Ja läbipaistva lahendusega on võimalik, et seisate silmitsi hoopis piiriprobleemiga. Nüüd on teil võimalusi ja viise nende probleemide lahendamiseks. 3D-teisendustrikk on minu lemmiklahendus, sest see lahendab kõik probleemid (Interneti-generaator kaalun seda ka)
Piiri raadiuse lisamine
Kui proovite lisada border-radius
elemendile, kui kasutada seda läbipaistmatut lahendust, millest alustasime, on see üsna triviaalne ülesanne. Kõik, mida pead tegema, on pärida põhielemendilt sama väärtus ja ongi valmis.
Isegi kui teil pole piiriraadiust, on see hea mõte määratleda border-radius: inherit
. See arvestab igasuguse potentsiaaliga border-radius
võib-olla soovite lisada hiljem või kuskilt mujalt pärit piiriraadiuse.
Läbipaistva lahenduse puhul on lugu hoopis teine. Kahjuks tähendab see muu lahenduse leidmist, sest clip-path
ei suuda kõverustega toime tulla. See tähendab, et me ei saa põhielemendi sees olevat ala lõigata.
Tutvustame mask
vara segule.
See osa oli väga tüütu ja ma nägin vaeva, et leida üldist lahendust, mis ei tugineks maagilised numbrid. Sain väga keerulise lahenduse, mis kasutab ainult ühte pseudoelementi, kuid kood oli spagetitükk, mis hõlmab vaid üksikuid konkreetseid juhtumeid. Ma arvan, et seda teed ei tasu uurida.
Otsustasin lihtsama koodi huvides lisada lisaelemendi. Siin on märgistus:
<div class="box"> <sh></sh>
</div>
Ma kasutan kohandatud elementi, <sh>
, et vältida võimalikku konflikti välise CSS-iga. Oleksin võinud kasutada a <div>
, kuid kuna see on tavaline element, saab seda hõlpsasti sihtida mõne muu CSS-i reegliga, mis pärineb mujalt ja võib meie koodi rikkuda.
Esimene samm on positsioneerimine <sh>
element ja looge sihilikult ülevool:
.box { --r: 50px; position: relative; border-radius: var(--r);
}
.box sh { position: absolute; inset: -150px; border: 150px solid #0000; border-radius: calc(150px + var(--r));
}
Kood võib tunduda pisut kummaline, kuid selle taga oleva loogikani jõuame edasi. Järgmisena loome pseudoelemendi abil gradiendi varju <sh>
.
.box { --r: 50px; position: relative; border-radius: var(--r); transform-style: preserve-3d;
}
.box sh { position: absolute; inset: -150px; border: 150px solid #0000; border-radius: calc(150px + var(--r)); transform: translateZ(-1px)
}
.box sh::before { content: ""; position: absolute; inset: -5px; border-radius: var(--r); background: /* Your gradient */; filter: blur(10px); transform: translate(10px,8px);
}
Nagu näete, kasutab pseudoelement sama koodi nagu kõik eelnevad näited. Ainus erinevus on 3D transform
määratletud <sh>
element pseudoelemendi asemel. Praegu on meil gradientvari ilma läbipaistvusfunktsioonita:
Pange tähele, et ala <sh>
element on määratletud musta kontuuriga. Miks ma seda teen? Sest nii saan ma rakendada a mask
sellel, et peita haljasala sees olev osa ja hoida ülevoolavat osa seal, kus peame varju nägema.
Ma tean, et see on natuke keeruline, kuid erinevalt sellest clip-path
, mask
vara ei arvesta ala väljaspool element asjade näitamiseks ja peitmiseks. Seetõttu oli mul kohustus tutvustada lisaelementi — simuleerida “välist” ala.
Samuti pange tähele, et ma kasutan kombinatsiooni border
ja inset
selle piirkonna määratlemiseks. See võimaldab mul jätta selle lisaelemendi polsterduskasti põhielemendiga samaks, nii et pseudoelement ei vaja täiendavaid arvutusi.
Veel üks kasulik asi, mida lisaelemendi kasutamisel saame, on see, et element on fikseeritud ja ainult pseudoelement liigub (kasutades translate
). See võimaldab mul hõlpsasti määratleda maski, mis on viimane selle triki samm.
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
See on tehtud! Meil on oma gradiendi vari ja see toetab border-radius
! Tõenäoliselt ootasite kompleksi mask
väärtus koos hulga gradientidega, aga ei! Vajame ainult kahte lihtsat gradienti ja a mask-composite
maagia lõpuleviimiseks.
Isoleerime <sh>
element, et mõista, mis seal toimub:
.box sh { position: absolute; inset: -150px; border: 150px solid red; background: lightblue; border-radius: calc(150px + var(--r));
}
Siin on see, mida me saame:
Pange tähele, kuidas sisemine raadius ühtib põhielemendi raadiusega border-radius
. Olen määratlenud suure piiri (150px
) ja a border-radius
võrdne suure piiriga pluss põhielemendi raadius. Väljastpoolt on mul raadius võrdne 150px + R
. Seestpoolt on mul 150px + R - 150px = R
.
Peame peitma sisemise (sinise) osa ja veenduma, et äärisosa (punane) on endiselt nähtav. Selleks olen määratlenud kaks maskikihti – ühe, mis katab ainult sisukasti ala ja teise, mis katab piirdekasti ala (vaikeväärtus). Siis välistasin piiri paljastamiseks ühe teisest.
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
Kasutasin selleks sama tehnikat luua ääris, mis toetab gradiente ja border-radius
. Ana Tudoril on ka hea artikkel maskeerimiskomposiidi kohta mida kutsun teid lugema.
Kas sellel meetodil on puudusi?
Jah, see pole kindlasti täiuslik. Esimene probleem, millega võite silmitsi seista, on seotud põhielemendi äärise kasutamisega. Kui te sellega ei arvesta, võib see tekitada raadiuses väikese kõrvalekalde. Meie näites on see probleem, kuid võib-olla ei märka te seda peaaegu üldse.
Parandamine on suhteliselt lihtne: lisage äärise laius <sh>
elemendi omad inset
.
.box { --r: 50px; border-radius: var(--r); border: 2px solid;
}
.box sh { position: absolute; inset: -152px; /* 150px + 2px */ border: 150px solid #0000; border-radius: calc(150px + var(--r));
}
Teine puudus on suur väärtus, mida me kasutame piiri jaoks (150px
näites). See väärtus peaks olema piisavalt suur, et sisaldada varju, kuid mitte liiga suur, et vältida ülevoolu ja kerimisriba probleeme. Õnneks võrgugeneraator arvutab kõiki parameetreid arvesse võttes optimaalse väärtuse.
Viimane puudus, millest ma teadlik olen, on see, kui töötate kompleksiga border-radius
. Näiteks kui soovite, et igale nurgale rakendataks erinevat raadiust, peate määrama iga külje jaoks muutuja. Ma arvan, et see pole tegelikult puudus, kuid see võib muuta teie koodi hooldamise pisut raskemaks.
.box { --r-top: 10px; --r-right: 40px; --r-bottom: 30px; --r-left: 20px; border-radius: var(--r-top) var(--r-right) var(--r-bottom) var(--r-left);
}
.box sh { border-radius: calc(150px + var(--r-top)) calc(150px + var(--r-right)) calc(150px + var(--r-bottom)) calc(150px + var(--r-left));
}
.box sh:before { border-radius: var(--r-top) var(--r-right) var(--r-bottom) var(--r-left);
}
Interneti-generaator lihtsuse huvides arvestab ainult ühtlast raadiust, kuid nüüd teate, kuidas koodi muuta, kui soovite kaaluda keerulist raadiuse konfiguratsiooni.
Pakke kuni
Oleme jõudnud lõppu! Gradientvarjude taga peituv maagia pole enam mõistatus. Püüdsin käsitleda kõiki võimalusi ja võimalikke probleeme, millega võite kokku puutuda. Kui mul jäi midagi kahe silma vahele või avastate mõne probleemi, andke sellest kommentaarides teada ja ma kontrollin seda.
Jällegi on suur osa sellest tõenäoliselt liialdatud, arvestades, et de facto lahendus katab enamiku teie kasutusjuhtudest. Sellegipoolest on hea teada “miks” ja “kuidas” triki taga ning kuidas selle piirangutest üle saada. Lisaks saime CSS-i lõikamise ja maskeerimisega mängides head trenni teha.
Ja loomulikult on teil võrgugeneraator võite igal ajal jõuda, kui soovite tüli vältida.
- SEO-põhise sisu ja PR-levi. Võimenduge juba täna.
- Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. Juurdepääs siia.
- Allikas: https://css-tricks.com/different-ways-to-get-css-gradient-shadows/
- 1
- 10
- 11
- 3d
- 7
- 9
- 98
- a
- Võimalik
- MEIST
- sellest
- üle
- absoluutne
- Vastavalt
- konto
- Kontod
- täpne
- tegelikult
- Täiendavad lisad
- pärast
- algoritm
- Materjal: BPA ja flataatide vaba plastik
- võimaldab
- juba
- alati
- Ana
- ja
- Teine
- kuskil
- rakendatud
- kehtima
- Rakendades
- PIIRKOND
- ümber
- artikkel
- vältima
- tagapõhi
- Põhimõtteliselt
- sest
- enne
- taga
- Uskuma
- alla
- Suur
- suurem
- Natuke
- Must
- Blogi
- sinine
- udu
- piir
- Bore
- Kast
- Murdma
- Bug
- arvutama
- ei saa
- juhul
- juhtudel
- väljakutse
- kontrollima
- klassika
- lõiketee
- lähedalt
- kood
- värv
- kombinatsioon
- tulevad
- kommentaar
- ühine
- täitma
- keeruline
- mõiste
- konfiguratsioon
- konflikt
- Arvestama
- arvestades
- arvab
- sisu
- kontekst
- kontrollida
- Nurk
- nurgad
- võiks
- kursus
- cover
- kaaned
- looma
- loob
- CSS
- CSSi trikid
- tava
- lõigatud
- kärped
- tegelema
- tegelema
- otsustatud
- vähenema
- vaikimisi
- määratletud
- Määratleb
- määratlemisel
- kindlasti
- Demo
- sõltub
- DID
- erinevus
- erinev
- suund
- avastama
- kaugus
- Ei tee
- teeme
- Ära
- puudused
- iga
- Ajalugu
- kergesti
- mõju
- kumbki
- mujal
- piisavalt
- tagama
- eriti
- Eeter (ETH)
- Isegi
- kõik
- näide
- näited
- välja jäetud
- Teostama
- oodatav
- selgitus
- uurima
- Avastades
- väline
- lisatasu
- nägu
- facto
- õiglaselt
- Lemmik
- tunnusjoon
- vähe
- Joonis
- filtreerida
- leidma
- leidmine
- esimene
- Määrama
- fikseeritud
- järgima
- Sundida
- tasuta
- Alates
- Üldine
- loodud
- saama
- Andma
- Go
- läheb
- hea
- kalded
- Green
- juhtub
- aitama
- siin
- varjama
- Kuidas
- Kuidas
- HTML
- HTTPS
- Ma teen
- idee
- oluline
- in
- Suurendama
- selle asemel
- kehtestama
- kutsuma
- probleem
- küsimustes
- IT
- hoidma
- pidamine
- Teadma
- viimane
- kihid
- Õppida
- Tõenäoliselt
- piirangud
- piirid
- vähe
- Pikk
- enam
- Vaata
- Vaatasin
- välimus
- Partii
- maagiline
- põhiline
- säilitada
- Enamus
- tegema
- mask
- vahendid
- meetod
- võib
- muutma
- hetk
- rohkem
- kõige
- liikuma
- liikuv
- Mozilla
- Mõistatus
- Vajadus
- negatiivne
- Sellegipoolest
- Uus
- järgmine
- tasakaalustama
- ONE
- Internetis
- vastupidine
- optimaalselt
- Valikud
- oranž
- et
- Muu
- teised
- muidu
- kontuur
- väljaspool
- Ületada
- parameetrid
- osa
- eriline
- tee
- Muster
- täiuslik
- ehk
- valima
- Koht
- Platon
- Platoni andmete intelligentsus
- PlatoData
- mängimine
- palun
- pluss
- võrra
- hulknurk
- positsioon
- võimalused
- võimalik
- post
- potentsiaal
- ilus
- eelmine
- tõenäoliselt
- kinnisvara
- Lükkama
- panema
- küsimus
- jõudma
- jõudis
- Lugenud
- Reaalsus
- põhjus
- soovitama
- Red
- vähendama
- seotud
- suhteliselt
- lootma
- meeles pidama
- kõrvaldama
- korduv
- aru
- kaasa
- avalduma
- Marsruut
- Eeskiri
- Ütlesin
- sake
- sama
- Osa
- vari
- Jaga
- peaks
- näitama
- sarnane
- lihtne
- lihtsus
- alates
- väike
- So
- tahke
- lahendus
- mõned
- midagi
- kuskil
- Ruum
- konkreetse
- laiali
- Kestab
- virnastamine
- algus
- alustatud
- algab
- jääma
- Samm
- Veel
- Lugu
- sobiv
- toetama
- Toetab
- üllatus
- Võtma
- suunatud
- Ülesanne
- .
- Piirkond
- asi
- asjad
- Mõtlema
- et
- kokku
- liiga
- teema
- Summa
- puudutama
- Muutma
- tõlkima
- Tõlge
- läbipaistvus
- läbipaistev
- trikke
- tõsi
- tüüpiline
- mõistma
- Värskendused
- ajakohastatud
- us
- kasutama
- väärtus
- Väärtused
- nähtav
- kuidas
- M
- Mis on
- mis
- kuigi
- will
- ilma
- Töö
- töö
- töötab
- väärt
- X
- Sinu
- z-indeks
- sephyrnet
- null