Tło PromptEye to czerń, biel albo światło: gradient z ziarnem, który przechodzi przez kobalt. Gradienty i siatkę kropek rysuje skrypt js/pe-light.js, nigdy CSS. Kafelki poniżej są rysowane na żywo tym samym skryptem.
Gradienty
Każdy gradient ma ziarno N1 (data-nz="fade"), które znika na obu końcach. Czerń i biel gradientu to dokładnie #000000 i #FFFFFF, więc sekcje łączą się bez szwu. Łuk (data-cu) i prosty są równorzędne. Jedno światło na kadr.
data-m="lin" data-cu=".16" data-v0=".2" data-v1=".95" data-gm=".75" data-g=".1" data-nz="fade" data-m="lin" data-cu=".16" data-v0=".38" data-v1="1.12" data-gm=".75" data-g=".1" data-nz="fade" data-m="lin" data-t0="1" data-t1="0" data-v0=".1" data-v1=".88" data-gm=".75" data-g=".1" data-nz="fade" data-m="lin" data-v0=".12" data-v1=".9" data-gm=".75" data-g=".1" data-nz="fade" data-m="lin" data-t1=".62" data-v0=".05" data-v1="1" data-gm=".8" data-g=".1" data-nz="fade" data-m="lin" data-pal="day" data-t1=".55" data-v0=".3" data-v1="1.02" data-gm=".9" data-g=".08" data-nz="fade" Jak dobrać i ustawić gradient
| Co budujesz | Tło |
|---|---|
| Hero, okładka, nagłówek strony lub rozdziału bez motywu | G5 rozciągnięty |
| Sekcja z motywem (data-pe-hero, data-pe-cta) | żadne: motyw rysuje własne światło |
| Przejście z ciemnej sekcji w jasną | G1 |
| Sekcja kończy się kolorem, a następna zaczyna się od koloru | G3 na czerni, G4 na bieli |
| Slajd treści, post z cytatem lub liczbą, OG wpisu | jednolite tło + siatka kropek |
- Przejście jest długie i płynne. Światło zajmuje co najmniej połowę wysokości kadru. Wąski pas czerń → kobalt pod tekstem wygląda jak naklejka, nie jak światło.
- Miejsce na tekst robisz kadrem. Gdy tekst nie mieści się na czerni, powiększ kadr i przesuń
data-v0w dół. Nie skracaj przejścia. - Tekst stoi na czerni albo ciemnym granacie. Pod tekstem i przyciskami jasność gradientu najwyżej ok. 0,36. Przy G5 rozciągniętym:
data-v0 ≈ (y − 0,37) / 0,67, y to dół tekstu jako ułamek wysokości. - Ten sam gradient w jasnym i ciemnym motywie strony. Gradient należy do treści, nie do motywu kolorystycznego witryny.
Nagłówki rozdziałów tego brand booka stoją właśnie na G5 rozciągniętym. Motyw z obiektem ma własne światło: rozdział Motyw.
Siatka kropek
Klocek na materiały bez motywu: slajdy treści, posty z cytatem lub liczbą, OG wpisów, awers wizytówki. Tylko na jednolitym tle (czerń albo biel), nigdy na gradiencie ani pod motywem. Kropka siatki jest kwadratem.
data-m="flat" data-t="0" data-nz="fade" data-dp="20" data-dh="d" data-dk="cover" data-da=".15" data-dsz="1.5" data-m="flat" data-t="0" data-pal="day" data-nz="fade" data-dp="20" data-dh="l" data-dk="cover" data-da=".09" data-dsz="1.5" data-m="flat" data-t="0" data-nz="fade" data-dp="20" data-dh="d" data-dk="tone" data-dsz="1.5" data-dpto rozstaw w px,data-dszbok kropki. We wzorcu 20 i 1,5; w innych formatach rozstaw 20 × s (do 2 px), kropka 1,5 × s (do 0,5 px, najmniej 1,5). Slajd 26 / 2, post 22 / 1,5, OG 16 / 1,5.- Jeden typ kropek na kadr. Nigdy pod leadem, przyciskami, tabelami i wykresami: maska
data-dm="x0,y0,x1,y1"(ułamki kadru) wycina obszar. - Siatka nie ma punktu motywu, więc kropka po tytule-haśle jest dozwolona.
<div class="t2f dk" style="position:relative;width:1920px;height:1080px">
<canvas class="lt" data-m="flat" data-t="0" data-nz="fade" data-dp="26" data-dh="d" data-dk="cover" data-da=".15" data-dsz="2" data-dm=".03,.18,.5,.6"></canvas>
…treść z position:absolute…
</div>Odrzucone
Nie stosuj: kobaltowe kropki na bieli, kropki malejące, rozpad, raster budujący gradient (G1b, G1c), pełny kobalt (G6), hero z krawędzi na całym kadrze (H1–H3), szum N0 i N3, gradient CSS bez ziarna. Hero z tla.html (siatka na gradiencie, tekst na środku) jest sprzed motywu.