Ontwerpbriefings en visuele communicatie

Gratis generator voor CSS-verloop.

Geldig CSS-verloop met bewerkbare parameters.

Maak een CSS-verloop voor uw kleuren en doel met terugvalkleur en weergavechecks.

Chrome-extensie en account vereist.
25 gratis automatiseringstaken per maand, gedeeld door alle tools. Limieten van de browseraanbieder gelden.

WAT JE KLAAR MOET HEBBEN

Kleuren, richting en visuele eisen.

JE STARTPUNT

Een taak die je kunt aanpassen.

Kopieer hem hier. Plak hem in WebAct wanneer je klaar bent.

Deze pagina bereidt je prompt voor. De taak draait in WebAct.

01

Maak de taak passend voor jou.

Bekijk de prompt hierboven. Voeg je doel en belangrijke eisen toe.

02

Neem hem mee naar WebAct.

Open WebAct, plak de taak en lever je bronmateriaal aan. Begin in Chat voor een concept of uitleg; gebruik Task als je een goedgekeurde browseractie of een bestand wilt.

03

Controleer het bruikbare deel.

Gebruik het resultaat als bewerkbaar concept of analyse. Controleer het aan de hand van de aangeleverde feiten en je doelgroep voordat je erop vertrouwt of het deelt.

PRAKTISCHE GIDS

Een CSS-verloop maken en op echt gebruik testen.

Noem richting, stops en oppervlak. Toets contrast op alle plekken met tekst en geef een effen terugvalkleur als nodig.

Stem de werkwijze af op je taak.

Definieer oppervlak, richting, kleurstops en terugval en maak de CSS-declaratie. Test het volledige verloop achter tekst en responsieve uitsnedes. Beoordeel tekstcontrast apart van de schoonheid van de achtergrond.

Wat je aanlevert
Kleuren, richting en visuele eisen.
Wat je krijgt
Geldig CSS-verloop met bewerkbare parameters.

Bekijk de invoer en het resultaat.

Illustratieve invoer en uitvoer · een leervoorbeeld, geen live uitvoering van WebAct

Voorbeeld invoerveld

Create a left-to-right background from #fff7ed to #fed7aa, with a solid fallback.

Uitgewerkt voorbeeld

background-color: #fff7ed;
background-image: linear-gradient(90deg, #fff7ed 0%, #fed7aa 100%);
Check any foreground text against the full gradient, not just one endpoint.
Dit voorbeeld downloaden

Laad deze invoer in de prompt en kopieer deze naar WebAct om de taak te proberen. Je resultaat kan afwijken van het voorbeeld.

Keuzes en probleemoplossing.

Volstaat contrastcontrole op één eindpunt voor tekst?

Nee. Tekst kan op een minder contrasterende plek liggen. Test echte posities en toestanden.

Waarom wijkt de verlooprichting af van de bedoeling?

Hoekconventies en elementvorm beïnvloeden het resultaat. Render op het beoogde oppervlak en bekijk het.

Probeer het met je eigen bron.

Vervang het voorbeeld door je eigen materiaal in de taakprompt. Behoud de eisen die je nodig hebt en kopieer de taak naar WebAct.

De taak aanpassen en kopiëren ↑
VOORDAT JE BEGINT

WebAct gebruiken.

De prompt en het voorbeeld staan hier. Voer je taak uit in de WebAct-extensie voor Chrome.

Is deze tool gratis?

Je kunt de prompt hier gratis kopiëren en bewerken. Installeer voor gebruik met WebAct de Chrome-extensie, maak en verifieer je account en verbind een beschikbare ChatGPT-sessie in de browser. Het Free-abonnement bevat 25 door de gebruiker gestarte automatiseringstaken per kalendermaand, gedeeld door alle tools. Gewone browser-Chat staat hier los van; limieten van de aanbieder gelden.

Lees over gedeelde context in onze privacybeleid en over kiezen tussen Chat of Task.

VAN PROMPT NAAR JE EIGEN WERK

Neem de taak mee naar je pagina.

Installeer WebAct, voeg je bronmateriaal toe en maak het resultaat passend.

WebAct installeren