Sokszor hallom ezt a kérdést: Lehetséges-e egyszínű színek helyett színátmenetekből árnyékokat létrehozni? Nincs olyan konkrét CSS-tulajdonság, amely ezt megtenné (hidd el, megnéztem), és minden blogbejegyzés, amit erről találsz, alapvetően egy csomó CSS-trükk a gradiens közelítésére. Valójában ezek közül néhányat kitérünk.
De először… másik a gradiens árnyékokról szóló cikk? Igazán?
Igen, ez egy újabb bejegyzés a témában, de ez más. Együtt feszegetjük a határokat, hogy olyan megoldást kapjunk, ami olyasvalamit takar, amit sehol máshol nem láttam: átláthatóság. A legtöbb trükk működik, ha az elem háttere nem átlátszó, de mi van akkor, ha átlátszó a hátterünk? Itt megvizsgáljuk ezt az esetet!
Mielőtt elkezdenénk, hadd mutassam be színátmenetes árnyékgenerátorom. Mindössze annyit kell tennie, hogy módosítsa a konfigurációt, és megkapja a kódot. De kövesse, mert segítek megérteni a generált kód mögött meghúzódó logikát.
Tartalomjegyzék
Nem átlátszó megoldás
Kezdjük azzal a megoldással, amely a legtöbb eset 80%-ában működik. A legjellemzőbb eset: háttérrel rendelkező elemet használunk, amelyhez színátmenetes árnyékot kell hozzáadni. Az átláthatósági kérdéseket nem kell figyelembe venni.
A megoldás egy pszeudoelemre támaszkodni, ahol a gradiens definiálva van. Az aktuális elem mögé helyezed és alkalmazzon rá egy elmosódás szűrőt.
.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 */
}
Nagyon sok kódnak tűnik, és ez azért van, mert az. Íme, hogyan tudtuk volna megtenni a box-shadow
ehelyett, ha színátmenet helyett egyszínű színt használnánk.
box-shadow: 10px 8px 10px 5px orange;
Ez jó képet ad arról, hogy mit csinálnak az első részletben szereplő értékek. Van X és Y eltolás, az elmosódási sugár és a szórási távolság. Vegye figyelembe, hogy negatív értékre van szükségünk a szórási távolsághoz, amely a inset
ingatlan.
Íme egy demó, amely a gradiens árnyékot mutatja egy klasszikus mellett box-shadow
:
Ha alaposan megnézi, észre fogja venni, hogy a két árnyék egy kicsit különbözik, különösen az elmosódott rész. Nem meglepő, mert egészen biztos vagyok benne filter
tulajdonság algoritmusa másként működik, mint a számára box-shadow
. Ez nem nagy baj, mivel az eredmény végül is nagyon hasonló.
Ez a megoldás jó, de még mindig van néhány hátránya a z-index: -1
nyilatkozat. Igen van „kontextus halmozása” ott történik!
Jelentkeztem a transform
a fő elemre, és bumm! Az árnyék már nincs az elem alatt. Ez nem hiba, hanem a halmozási kontextus logikus eredménye. Ne aggódjon, nem kezdek unalmas magyarázatba a kontextus halmozásáról (Ezt már megtettem egy Stack Overflow szálban), de továbbra is megmutatom, hogyan lehet megkerülni.
Az első megoldás, amit javaslok, a 3D használata 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);
}
Használat helyett z-index: -1
, negatív fordítást fogunk használni a Z tengely mentén. Mindent beletesszük translate3d()
. Ne felejtsd el használni transform-style: preserve-3d
a fő elemen; egyébként a 3D transform
nem lép érvénybe.
Amennyire én tudom, ennek a megoldásnak nincs mellékhatása… de talán lát egyet. Ha ez a helyzet, oszd meg a megjegyzés rovatban, és próbáljunk megoldást találni rá!
Ha valamilyen okból nem tudja használni a 3D-t transform
, a másik megoldás az, hogy két pszeudoelemre hagyatkozunk – ::before
és a ::after
. Az egyik a színátmenet árnyékát hozza létre, a másik pedig a fő hátteret (és más stílusokat, amelyekre szüksége lehet). Így könnyen szabályozhatjuk mindkét pszeudoelem halmozási sorrendjét.
.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;
}
Fontos megjegyezni, hogy mi vagyunk kényszerítve a fő elem halmozási kontextus létrehozásához deklarálással z-index: 0
vagy bármely más ingatlan, amely ugyanezt teszi, Rajta. Azt sem szabad elfelejteni, hogy a pszeudoelemek a fő elem padding boxát tekintik referenciaként. Tehát, ha a fő elemnek van szegélye, ezt figyelembe kell venni a pszeudoelem stílusok meghatározásakor. Észre fogja venni, hogy használom inset: -2px
on ::after
hogy figyelembe vegye a fő elemen meghatározott határt.
Mint mondtam, ez a megoldás valószínűleg elég jó az esetek többségében, amikor gradiens árnyékot szeretne, mindaddig, amíg nem kell támogatnia az átlátszóságot. De azért vagyunk itt, hogy a kihívást és a határokat feszegessük, szóval még ha nincs is szükséged arra, ami ezután következik, maradj velem. Valószínűleg olyan új CSS-trükköket fog tanulni, amelyeket máshol is használhat.
Átlátszó megoldás
Folytassuk ott, ahol abbahagytuk a 3D-ben transform
és távolítsa el a hátteret a fő elemről. Egy olyan árnyékkal kezdem, amelynek mind az eltolása, mind a szórási távolsága egyenlő 0
.
Az ötlet az, hogy megtaláljuk a módját, hogy mindent levágjunk vagy elrejtsünk az elem területén belül (a zöld szegélyen belül), miközben megtartjuk azt, ami kívül van. Használni fogjuk clip-path
azért. De elgondolkodhatsz, hogyan clip-path
vágni tud belső egy elem.
Valójában erre nincs mód, de szimulálhatjuk egy adott sokszögmintával:
clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax 100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,0 0)
Tada! Van egy színátmenetes árnyékunk, amely támogatja az átlátszóságot. Csak annyit tettünk, hogy hozzáadtunk a clip-path
az előző kódhoz. Itt van egy ábra a sokszögrész szemléltetésére.
A kék terület az alkalmazás után látható rész clip-path
. Csak a kék színt használom a koncepció illusztrálására, de a valóságban csak az árnyékot fogjuk látni ezen a területen. Amint látja, négy pontunk van nagy értékkel (B
). Az én nagy értékem 100vmax
, de bármilyen nagy érték lehet. Az ötlet az, hogy biztosítsunk elegendő helyet az árnyéknak. Négy pontunk is van, amelyek a pszeudoelem sarkai.
A nyilak a sokszöget meghatározó útvonalat mutatják. -től indulunk (-B, -B)
amíg elérjük (0,0)
. Összesen 10 pontra van szükségünk. Nem nyolc pont, mert két pont kétszer ismétlődik az útvonalon ((-B,-B)
és a (0,0)
).
Még mindig van még egy dolog ránk maradt, és ez az, hogy figyelembe vegyük a szórási távolságot és az eltolásokat. A fenti bemutató egyetlen oka annak, hogy működik, mert ez egy speciális eset, amikor az eltolások és a szórási távolság megegyezik 0
.
Határozzuk meg a terjedést, és nézzük meg, mi történik. Ne feledje, hogy használjuk inset
negatív értékkel ehhez:
A pszeudoelem most nagyobb, mint a főelem, így a clip-path
többet vág a kelleténél. Ne feledje, mindig le kell vágni az alkatrészt belső a fő elem (a példa zöld szegélyén belüli terület). Módosítanunk kell a benne lévő négy pont helyzetét 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)) );
}
Meghatároztunk egy CSS-változót, --s
, a szórási távolságra és frissítette a sokszögpontokat. Nem érintettem azokat a pontokat, ahol a nagy értéket használom. Csak azokat a pontokat frissítem, amelyek a pszeudoelem sarkait határozzák meg. Az összes nulla értéket megnövelem --s
és csökkentse a 100%
értékek által --s
.
Ugyanez a logika az eltolásokkal. Amikor lefordítjuk a pszeudoelemet, az árnyék nincs igazításban, és újra ki kell igazítanunk a sokszöget, és a pontokat az ellenkező irányba kell mozgatni.
.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)) );
}
Az eltolásokhoz további két változó tartozik: --x
és a --y
. Belül használjuk őket transform
és frissítjük is a clip-path
értékeket. A sokszögpontokat továbbra sem érintjük nagy értékekkel, de az összes többit eltolja – csökkentjük --x
az X koordinátákból, és --y
az Y koordinátáktól.
Most már csak néhány változót kell frissítenünk a gradiens árnyékának szabályozásához. És ha már itt tartunk, tegyük változóvá az elmosódási sugarat is:
Kell még a 3D?
transform
trükk?
Minden a határtól függ. Ne felejtse el, hogy a pszeudoelem hivatkozása a padding box, tehát ha szegélyt alkalmaz a fő elemre, akkor átfedés lesz. Vagy megtartod a 3D-t transform
trükk vagy frissítse a inset
értéket kell figyelembe venni a határon.
Íme az előző demó frissített változattal inset
értéket a 3D helyett transform
:
Azt mondanám, hogy ez a megfelelőbb út, mert a szórási távolság pontosabb lesz, mivel a szegélydobozból indul ki a padding-box helyett. De módosítania kell a inset
érték a fő elem szegélye szerint. Néha az elem határa ismeretlen, és az előző megoldást kell használni.
A korábbi nem átlátszó megoldással lehetséges, hogy halmozási kontextusproblémával kell szembenéznie. Az átlátható megoldással pedig előfordulhat, hogy határproblémával kell szembenéznie. Most lehetőségei és módjai vannak ezeknek a problémáknak a megkerülésére. A 3D transzformációs trükk a kedvenc megoldásom, mert minden problémát megold (Az online generátor azt is megfontoljuk)
Határsugár hozzáadása
Ha megpróbálja hozzáadni border-radius
elemhez az általunk elkezdett átláthatatlan megoldás használatakor elég triviális feladat. Mindössze annyit kell tennie, hogy örökölje ugyanazt az értéket a fő elemtől, és kész.
Még ha nincs is határ sugara, akkor is jó ötlet meghatározni border-radius: inherit
. Ez számol minden potenciállal border-radius
érdemes később hozzáadni, vagy valahonnan máshonnan származó szegély sugarat.
Ez egy másik történet, ha az átlátható megoldással foglalkozunk. Sajnos ez azt jelenti, hogy más megoldást kell keresni, mert clip-path
nem tud megbirkózni a görbületekkel. Ez azt jelenti, hogy nem tudjuk levágni a fő elem belsejében lévő területet.
Bemutatjuk a mask
tulajdon a keverékhez.
Ez a rész nagyon fárasztó volt, és küzdöttem, hogy olyan általános megoldást találjak, amelyre nem támaszkodik mágikus számok. Végül egy nagyon összetett megoldáshoz jutottam, amely csak egy pszeudoelemet használ, de a kód egy spagetti csomó volt, amely csak néhány konkrét esetet fed le. Nem hiszem, hogy érdemes ezt az utat felfedezni.
Úgy döntöttem, hogy beszúrok egy extra elemet az egyszerűbb kód kedvéért. Íme a jelölés:
<div class="box"> <sh></sh>
</div>
Egyéni elemet használok, <sh>
, hogy elkerülje a külső CSS-szel való esetleges ütközést. Használhattam volna a <div>
, de mivel ez egy gyakori elem, könnyen megcélozható egy másik, máshonnan érkező CSS-szabály, amely megtörheti a kódunkat.
Az első lépés az, hogy elhelyezzük a <sh>
elemet, és szándékosan hozzon létre túlcsordulást:
.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));
}
A kód kissé furcsán nézhet ki, de menet közben rá fogunk térni a mögötte meghúzódó logikára. Ezután létrehozzuk a színátmenet árnyékát egy pszeudoelem segítségével <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);
}
Mint látható, a pszeudoelem ugyanazt a kódot használja, mint az összes előző példa. Az egyetlen különbség a 3D transform
-on meghatározott <sh>
elem helyett pszeudoelem. Jelenleg van egy színátmenetes árnyékunk az átlátszóság funkció nélkül:
Vegye figyelembe, hogy a terület a <sh>
elem fekete körvonallal van meghatározva. Miért csinálom ezt? Mert így képes vagyok alkalmazni a mask
rajta, hogy elrejtse a zöldterületen belüli részt, és a túlcsorduló részt ott tartsa, ahol látnunk kell az árnyékot.
Tudom, hogy ez egy kicsit bonyolult, de nem úgy clip-path
, a mask
az ingatlan nem veszi figyelembe a területet kívül egy elem a dolgok megjelenítésére és elrejtésére. Ezért kénytelen voltam bevezetni az extra elemet – a „külső” terület szimulálását.
Azt is vegye figyelembe, hogy a kombinációját használom border
és a inset
hogy meghatározzuk azt a területet. Ez lehetővé teszi, hogy az extra elem padding-boxát a fő elemmel azonosan tartsam, így a pszeudoelemnek nem lesz szüksége további számításokra.
Egy másik hasznos dolog, amit egy extra elem használatával kapunk, hogy az elem rögzített, és csak a pszeudoelem mozog (a translate
). Ez lehetővé teszi számomra, hogy könnyen meghatározzam a maszkot, amely a utolsó ennek a trükknek a lépése.
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
Kész! Megvan a gradiens árnyékunk, és ez támogatja border-radius
! Valószínűleg komplexumra számított mask
érték a rengeteg színátmenettel, de nem! Csak két egyszerű színátmenetre van szükségünk és a mask-composite
hogy teljes legyen a varázslat.
Elszigeteljük a <sh>
elem, hogy megértsük, mi történik ott:
.box sh { position: absolute; inset: -150px; border: 150px solid red; background: lightblue; border-radius: calc(150px + var(--r));
}
Íme, amit kapunk:
Figyelje meg, hogy a belső sugár hogyan illeszkedik a fő elemhez border-radius
. Meghatároztam egy nagy határt (150px
), Valamint egy border-radius
egyenlő a nagy határral plusz a fő elem sugara. Kívülről a sugaram egyenlő 150px + R
. Belülről megvan 150px + R - 150px = R
.
El kell rejtenünk a belső (kék) részt, és meg kell győződnünk arról, hogy a szegély (piros) rész továbbra is látható. Ehhez két maszkréteget definiáltam – az egyiket, amely csak a tartalomdoboz területét fedi le, a másikat pedig a keretterületet (az alapértelmezett érték). Aztán kizártam egyiket a másikból, hogy felfedjem a határt.
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
Ugyanezt a technikát használtam hozzon létre egy szegélyt, amely támogatja a színátmeneteket és border-radius
. Ana Tudornak is van egy jó cikke a maszkoló kompozitról hogy olvasásra hívlak.
Vannak-e hátrányai ennek a módszernek?
Igen, ez biztosan nem tökéletes. Az első probléma, amellyel szembesülhet, a fő elem szegélyének használatához kapcsolódik. Ez kis eltérést okozhat a sugarak között, ha nem veszi figyelembe. Példánkban ez a probléma szerepel, de talán aligha veszi észre.
A javítás viszonylag egyszerű: Adja hozzá a szegély szélességét a <sh>
elemek 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));
}
Egy másik hátránya az a nagy érték, amelyet a szegélyhez használunk (150px
a példában). Ennek az értéknek elég nagynak kell lennie ahhoz, hogy tartalmazza az árnyékot, de ne legyen túl nagy, hogy elkerülje a túlcsordulást és a görgetősávval kapcsolatos problémákat. Szerencsére, az online generátor kiszámítja az optimális értéket az összes paraméter figyelembevételével.
Az utolsó hátrány, amivel tisztában vagyok, az az, amikor komplexussal dolgozik border-radius
. Például, ha más-más sugarat szeretne alkalmazni az egyes sarkokra, akkor minden oldalhoz meg kell határoznia egy változót. Feltételezem, hogy ez nem igazán hátrány, de egy kicsit nehezebbé teheti a kód karbantartását.
.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);
}
Az online generátor az egyszerűség kedvéért csak egy egységes sugarat vesz figyelembe, de most már tudja, hogyan kell módosítani a kódot, ha összetett sugárkonfigurációt szeretne figyelembe venni.
Csomagolta
A végére értünk! A színátmenetes árnyékok mögött rejlő varázslat többé már nem rejtély. Megpróbáltam lefedni az összes lehetőséget és minden lehetséges problémát, amellyel szembesülhet. Ha kihagytam valamit, vagy bármilyen problémát észlel, kérjük, jelezze a megjegyzés rovatban, és megnézem.
Ennek nagy része valószínűleg túlzás, tekintve, hogy a de facto megoldás lefedi a legtöbb használati esetet. Mindazonáltal jó tudni, hogy a „miért” és a „hogyan” húzódik meg a trükk mögött, és hogyan léphetjük túl a korlátait. Ráadásul jó gyakorlatokat is kaptunk a CSS-kivágással és maszkolással.
És természetesen megvan az online generátor bármikor elérheti, ha el akarja kerülni a szóváltást.
- SEO által támogatott tartalom és PR terjesztés. Erősödjön még ma.
- Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. Hozzáférés itt.
- Forrás: https://css-tricks.com/different-ways-to-get-css-gradient-shadows/
- 1
- 10
- 11
- 3d
- 7
- 9
- 98
- a
- Képes
- Rólunk
- erről
- felett
- Abszolút
- Szerint
- Fiók
- Fiókok
- pontos
- tulajdonképpen
- További
- Után
- algoritmus
- Minden termék
- lehetővé teszi, hogy
- már
- mindig
- Ana
- és a
- Másik
- bárhol
- alkalmazott
- alkalmaz
- Alkalmazása
- TERÜLET
- körül
- cikkben
- háttér
- Alapvetően
- mert
- előtt
- mögött
- Hisz
- lent
- Nagy
- nagyobb
- Bit
- Fekete
- Blog
- Kék
- elhomályosít
- határ
- Unalmas
- Doboz
- szünet
- Bogár
- számít
- számítások
- nem tud
- eset
- esetek
- kihívás
- ellenőrizze
- klasszikus
- clip-path
- szorosan
- kód
- szín
- kombináció
- érkező
- megjegyzés
- Közös
- teljes
- bonyolult
- koncepció
- Configuration
- konfliktus
- Fontolja
- figyelembe véve
- úgy véli,
- tartalom
- kontextus
- ellenőrzés
- Sarok
- sarkok
- tudott
- Tanfolyam
- terjed
- Covers
- teremt
- teremt
- CSS
- CSS trükkök
- szokás
- vágás
- vágások
- üzlet
- foglalkozó
- határozott
- csökkenés
- alapértelmezett
- meghatározott
- Annak meghatározása,
- meghatározó
- minden bizonnyal
- függ
- DID
- különbség
- különböző
- irány
- felfedez
- távolság
- Nem
- Ennek
- ne
- hátrányai
- minden
- Korábban
- könnyen
- hatás
- bármelyik
- máshol
- elég
- biztosítására
- különösen
- Még
- minden
- példa
- példák
- kizárt
- Gyakorol
- várható
- magyarázat
- feltárása
- Feltárása
- külső
- külön-
- Arc
- meglehetősen
- Kedvenc
- Funkció
- kevés
- Ábra
- szűrő
- Találjon
- megtalálása
- vezetéknév
- Rögzít
- rögzített
- következik
- Kényszer
- Ingyenes
- ból ből
- általános
- generált
- kap
- Ad
- Go
- megy
- jó
- színátmenetek
- Zöld
- megtörténik
- segít
- itt
- elrejt
- Hogyan
- How To
- HTML
- HTTPS
- BETEG
- ötlet
- fontos
- in
- Növelje
- helyette
- bevezet
- meghívni
- kérdés
- kérdések
- IT
- Tart
- tartás
- Ismer
- keresztnév
- tojók
- TANUL
- Valószínű
- korlátozások
- határértékek
- kis
- logikus
- Hosszú
- hosszabb
- néz
- nézett
- MEGJELENÉS
- Sok
- mágia
- Fő
- fenntartása
- Többség
- csinál
- maszk
- eszközök
- módszer
- esetleg
- módosítása
- pillanat
- több
- a legtöbb
- mozog
- mozgó
- Mozilla
- Rejtély
- Szükség
- negatív
- Mindazonáltal
- Új
- következő
- eltolt
- ONE
- online
- szemben
- optimálisan
- Opciók
- narancs
- érdekében
- Más
- Egyéb
- másképp
- vázlat
- kívül
- Overcome
- paraméterek
- rész
- különös
- ösvény
- Mintás
- tökéletes
- talán
- vedd
- Hely
- Plató
- Platón adatintelligencia
- PlatoData
- játék
- kérem
- plusz
- pont
- Poligon
- pozíció
- lehetőségek
- lehetséges
- állás
- potenciális
- szép
- előző
- valószínűleg
- ingatlan
- Nyomja
- tesz
- kérdés
- el
- elérte
- Olvass
- Valóság
- ok
- ajánl
- Piros
- csökkenteni
- összefüggő
- viszonylag
- eszébe jut
- eltávolítása
- megismételt
- jelentést
- eredményez
- mutatják
- Útvonal
- Szabály
- Mondott
- kedvéért
- azonos
- Rész
- árnyék
- Megosztás
- kellene
- előadás
- oldal
- hasonló
- Egyszerű
- egyszerűség
- óta
- kicsi
- So
- szilárd
- megoldások
- néhány
- valami
- valahol
- Hely
- különleges
- terjedése
- verem
- felhalmozás
- kezdet
- kezdődött
- kezdődik
- tartózkodás
- Lépés
- Még mindig
- Történet
- megfelelő
- támogatás
- Támogatja
- meglepetés
- Vesz
- célzott
- Feladat
- A
- A terület
- dolog
- dolgok
- nak nek
- együtt
- is
- téma
- Végösszeg
- érintse
- Átalakítás
- fordít
- Fordítás
- Átláthatóság
- átlátszó
- igaz
- tipikus
- megért
- Frissítések
- frissítve
- us
- használ
- érték
- Értékek
- látható
- módon
- Mit
- Mi
- ami
- míg
- lesz
- nélkül
- Munka
- dolgozó
- művek
- érdemes
- X
- te
- A te
- z-index
- zephyrnet
- nulla