Mall elliptiska transparenta

Designprotokoll för transparenta ellipsbollar som ligger på AINNova.se

Översikt

Transparenta elipsbollar används för att visa tjänster eller erbjudanden på ett visuellt tilltalande sätt på AINNOVAs webbplats. De är runda, har en frostad glaseffekt, och alternerar mellan två färger för att skapa variation. Bollarna är responsiva, tillgängliga, och har subtila animationer för att fånga uppmärksamhet.

Färger

Här är de färger som används för elipsbollarna:

• Primär: #007BBF (mörkblå) – används för bollar i udda positioner (1, 3) och för fokusindikatorer (outline).

• Sekundär: #9FE754 (ljusgrön) – används för bollar i jämna positioner (2, 4).

• Text i mörkblå bollar: Vit (#FFFFFF).

• Text i ljusgröna bollar: Mörkgrå (#222222).

• Hover: Mörkare grön (#3A8C2D) med vit text (#FFFFFF).

• Fokusindikator: Mörkblå (#005F9F).

Utseende

• Elipsbollarna är runda (border-radius: 50%) och har en frostad glaseffekt.

• De alternerar mellan två färger: #007BBF (mörkblå) och #9FE754 (ljusgrön).

• Bollarna är 120x120px på desktop och 80x80px på mobil.

• De har en subtil pulserande animation för att dra till sig uppmärksamhet.

• De har en liten skugga för att ge djup (box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)).

Text och typografi

• Text i bollarna:

  • Typsnitt: Lato (eller Arial som reserv).

  • Storlek: 18px på desktop, 12px på mobil.

  • Färg: Mörkgrå (#222222) i ljusgröna bollar, vit (#FFFFFF) i mörkblå bollar, ändras till vit (#FFFFFF) vid hover.

  • Stil: Fetstil.

Interaktivitet

• Elipsbollarna är klickbara och fungerar som länkar som öppnas i en ny flik.

• De har en pulserande animation (skalning från 1 till 1.1 och tillbaka) för att fånga uppmärksamhet.

• Vid hover ändras bakgrunden till mörkare grön (#3A8C2D) och texten blir vit (#FFFFFF), med en liten skalningseffekt (transform: scale(1.05)).

• Vid fokus får de en blå ram (#005F9F) för tillgänglighet.

• På mobil staplas bollarna två och två för bättre läsbarhet.

Hur du kan se koden (för nyfikna)

Om du vill titta på koden bakom de transparenta elipsbollarna för att se hur de är byggda, kan du följa dessa steg. Det är ett enkelt sätt att lära sig mer om hur webbsidor fungerar!

1. Högerklicka på elipsbollarna:

   • Om du vill se koden för hela sektionen med elipsbollar, högerklicka någonstans i området där bollarna visas (t.ex. mellan två bollar).

   • Om du bara vill se koden för en enskild elipsboll, högerklicka direkt på den bollen du är intresserad av.

2. Välj "Inspektera":

   • När du högerklickar dyker en meny upp. Välj "Inspektera" (på vissa webbläsare kan det heta "Inspektera element").

   • Detta öppnar webbläsarens utvecklarverktyg, där du kan se både HTML-koden (strukturen) och CSS-koden (stilen) för elipsbollarna.

   • Obs: Om du väljer "Visa sidkälla" – det alternativet visar den råa HTML-koden för hela sidan och även om det då är svårare att använda den för att hitta specifika delar som elipsbollarna så kan den ändå vara bra att visa upp en hel sida för ett LLM. "Inspektera" bruka föredras eftersom det zoomar in på just den del du klickade på!

3. Hitta elipsbollarnas kod:

   • I utvecklarverktygen ser du en massa kod.

   • Om du högerklickade på hela sektionen, leta efter en <div>tagg med klassen .cta-circles – det är containern som håller alla elipsbollar.

   • Om du högerklickade på en enskild boll, leta efter en <a>tagg med klassen .cta-circle – det är koden för just den bollen.

4. Kolla på stilar och animationer (valfritt):

   • I utvecklarverktygen kan du också se CSS-stilarna till höger (eller längst ner, beroende på webbläsare). Titta efter saker som background-color, border-radius (som gör bollarna runda), eller animation (som styr pulseringseffekten).

Tips: Om du ser en massa kod och det känns rörigt, prova att klicka på små pilar bredvid taggarna i utvecklarverktygen för att "fälla ut" eller "fälla ihop" olika delar. Det gör det lättare att hitta det du letar efter!