Background designer

Det här är ett verktyg för att skapa färger och toningar som kan användas som bakgrunder. När man trycker på Background designer-ikonen öppnas ett nytt fönster där applikationen visas. Den förvalda toningen har två gråa färger och tonar linjärt uppifrån och ned mellan dessa nyanser. De färger och toningar man använder i Background designer representeras av en kod som genereras av de val man gör, och överst så visas den: linear-gradient(0deg, rgba(208,208,208,1) 0%, rgba(64,64,64,1) 100%).

Background designer default

När man drar i reglagen, lägger till och tar bort färger så ändras både toningen som visas och koden dynamiskt allteftersom de val man gör. När man är klar kan koden kopieras och klistras i en stilmall (CSS) för att användas. Backround designer är även integrerad i WebMans mallar utan att man behöver tänka på någon kod.

Hur funkar det?

Överst visas koden som genereras. Därunder ser man den faktiska toningen som motsvaras av koden. Både kod och färg ändras dynamiskt.

Typ av toning

Det finns två typer av toningar som kan användas:

  • Linear
    Linjär toning rakt över sidan i den vinkel som anges vid Angle. Shape och size har här ingen betydelse.
  • Radial
    Elliptisk eller cirkulär toning enligt Shape och Size. Angle har här ingen betydelse.

När man valt typen Radial kan man klicka och dra på färgytan för att flytta toningens plats och storlek. Bredd och höjd är här godtycklig, men platsen för toningens centrum är angiven i procent i koden som genereras, så toningen fungerar i andra sammanhang på vilken yta som helst.

Färger som används

Man kan lägga till, ändra och ta bort färger. Varje rad under dragreglaget Angle är en färg som har 3 värden:

  • Nyans
    En färgväljare där man väljer färg.
  • Alpha
    Grad av genomskinlighet.
  • Stop
    Hur stor relativ del av bredden som är färgen i toningen, beroende av de andra färgerna som används.

Lägg till en ny färg genom att trycka på Add color och ta bort en färg med det röda krysset.

Exempel:

Toning exempel 1

Repetera

Med Repeat återupprepas toningen flera gånger beroende av färgernas stop-värden.

Background designer repeat 1
Background designer repeat 2