Pastel CSS-sjablonen

Pastel CSS-templates met stijlen die u nauwkeurig kunt afstemmen

Een pastel CSS-template bewaart zijn zachte uitstraling in variabelen, herbruikbare klassen en een handvol selectors voor interactieve toestanden. Wijzig de waarde achter "munt" en elke kaart, badge en knop die deze gebruikt, wordt direct bijgewerkt. Hover- en actieve toestanden zijn meestal vooraf gedefinieerd, zodat u waarden afstemt en niet helemaal opnieuw regels hoeft te schrijven.

Variabelen achter elke tint

De meeste pastel-stylesheets rusten op een compacte set aangepaste eigenschappen zoals deze:

• een lichte basis voor achtergronden en kaarten;
• een secundaire tint voor afwisselende panelen en kleine badges;
• een donkere tekstwaarde die op beide leesbaar blijft;
• een sterker accent dat gereserveerd is voor links en knoppen.

Klassen bouwen voort op die waarden. Bewerk de kaartklasse één keer en elke kaart neemt de nieuwe rand en schaduw over; de knopklasse werkt op precies dezelfde manier. Omdat pastelkleuren qua helderheid dicht bij elkaar liggen, zorgt de donkere tekstwaarde voor het grootste deel van de leesbaarheid. Lichtgeel vraagt extra aandacht, omdat witte tekst op een botergele achtergrond basale contrastcontroles niet doorstaat.

Hover-, focus- en uitgeschakelde toestanden

Toestanden leveren de meeste problemen op in pastelontwerpen. Een hover die een knop verandert van munt in iets dieper munt valt nauwelijks op, en een lavendelkleurige focusring op een lila kaart verdwijnt bijna. Zorgvuldig opgezette templates signaleren een verandering met meer dan alleen kleur, bijvoorbeeld door een contourlijn, een duidelijkere rand of een zwaardere tekst toe te voegen. Uitgeschakelde knoppen hebben de tegenovergestelde behandeling nodig: een vlakkere vulling en gedempte tekst die nog steeds herkenbaar is als knop. Formuliervelden zijn het klassieke zwakke punt, want een licht invoerveld op een licht paneel heeft geen zichtbare rand totdat de rand, achtergrond of contour donkerder wordt.

Breakpoint-overschrijvingen met aangepaste code

Op smalle schermen verandert de pastelstijl via media queries. Royale padding wordt kleiner zodat een licht paneel een telefoon niet overspoelt, de tussenruimte tussen kaarten wordt strakker en lettergroottes en regelhoogtes nemen af. Als een geschreven koptekst krap oogt op een telefoon, kan een breakpoint-overschrijving deze vervangen door een eenvoudiger lettertype. Met de Nicepage Responsive Modes kunt u elke overschrijving apparaat voor apparaat controleren.

Nicepage accepteert ook Custom CSS Code voor de hele site, een enkele pagina of een enkel element. Een sitewijde regel is geschikt voor globale aanpassingen zoals een donkerdere tekstwaarde, en een elementregel verwerkt uitzonderingen, zoals een koraalrode promotiebadge die moet opvallen tegen het omringende pastel. Pastel CSS-templates verschillen vooral in de mate waarin hun stijlen centraal worden beheerd. Wanneer het palet en de tussenruimte in gedeelde variabelen zijn vastgelegd en toestanden een paar duidelijke klassen volgen, kunt u het hele ontwerp restylen zonder de inhoud te hoeven herstructureren.