Seinän värin simulaatio

Asettaa läpikuultaman värin ladatun huonekuvan päälle, joten voit esikatsella, miltä maali saattaa näyttää seinillä. Valitset minkä tahansa kuvan laitteestasi, valitset värin järjestelmän värivalitsimella, ja säädät peiton läpikuultavuuden 0:sta 1:een 0.1 vaiheissa. Peitto renderöidään täysin sijoitettuna kerroksena, joka peittää koko kuvan pointer-events-disabled.

1. Napsauta tiedostonsyötettä ylhäällä ja valitse kuvatiedosto (mikä tahansa image/*-tyyppi) laitteestasi — kuva ladataan paikallisen Object URL:n kautta, joten latausta ei tapahdu. 2. Käytä värinsyötettä valitaksesi maalivärin; oletus on #E8E8E8. 3. Vedä Opacity-säädintä 0:n ja 1:n välillä (askel 0.1) hallitaksesi, kuinka voimakkaasti sävy näkyy kuvan päällä. 4. Esikatselukuva peiton kanssa päivittyy heti, kun muutat väriä tai läpikuultavuutta.

Kuva renderöidään suhteellisesti sijoitetun sisällön sisään, ja sävy on yksi täysin sijoitettu div inset-0:lla, joka istuu koko kuvan päällä. Sen background-color on valittu heksadesimaaliväri ja sen opacity on säätimen arvo, joten vaikutus on tasainen suorakulmio, joka peittää koko kehyksen — se ei tunnista seiniä, peitä vain seinäalueita tai käytä perspektiiviä. Matala läpikuultavuus (n. 0.2-0.4) näyttää usein realistisemmalta maali-esikatseluille; täysi läpikuultavuus vain tulvii kuvan valitulla värillä.