Softonic

CSS-kortgenerator

Steg 1 / 2

Card Rubrik

Det här är en förhandsvisning av ditt kort.

Nästa

Ett kort är containern bakom produktkort, bloggförhandsvisningar, profiler och widgetar på instrumentpanelen. Den här generatorn formger den containern: välj bakgrunds- och kantlinjefärg, hörnradie, inre utfyllnad och en mjuk skugga och se resultatet direkt på sidan. Förhandsvisningen visar exempeltext; ersätt den med din egen rubrik, text och dina åtgärder. Resultatet är en färdig CSS-klass.

Så formger du en kortcontainer

  1. 1

    Välj färger

    Välj bakgrundsfärg och kantlinjefärg för kortet.

  2. 2

    Bestäm formen

    Välj hörnradie och inre utfyllnad som passar din layout.

  3. 3

    Lägg till skuggan

    Justera oskärpa och opacitet för den mjuka skuggan under kortet.

  4. 4

    Förhandsvisa och kopiera

    Granska liveförhandsvisningen och kopiera den genererade .card-CSS:en till din stilmall.

Vad den genererade CSS:en innehåller

Verktyget skapar en enda klass som heter .card:

.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
  • background är färgen du valde
  • border är alltid 1 px solid i den färg du valde
  • border-radius och padding är dina valda värden i px
  • box-shadow använder en fast förskjutning på 4 px nedåt med dina värden för oskärpa och opacitet

Förhandsvisningen är exempeltext

Förhandsvisningen visar en rubrik och ett stycke så att du kan bedöma proportionerna. Verktyget producerar ingen HTML: applicera klassen på din egen container och lägg till din rubrik, text, bild eller åtgärdsknappar inuti. Om kortet ska ligga på en färgad sidbakgrund, kontrollera kantlinjens kontrast där, inte bara i förhandsvisningen.

Förnuftiga gränser

Negativa värden sätts till noll och skuggans opacitet håller sig mellan 0 och 1. Mycket stora värden för utfyllnad eller oskärpa kan ge oväntade resultat, så håll reglagen inom de intervall du skulle använda i en riktig layout.

Kombinera med egen markup

Ett minimalt exempel för din sida:

<div class="card">
  <h3>Produktnamn</h3>
  <p>Kort beskrivning</p>
</div>

Containerstilen begränsar inte innehållet: den hanterar bara bakgrund, kantlinje, avstånd och skugga.

Vanliga frågor

Nej. Den ger bara CSS-klassen .card. Bygg markupen själv, till exempel en div eller ett article som omsluter rubrik, text och åtgärder.

Den genererade kantlinjen är alltid 1 px solid. Redigera border-raden i CSS:en om du behöver en annan tjocklek eller stil.

En fast vertikal förskjutning på 4 px håller skuggan diskret och läsbar. Du styr dess mjukhet (oskärpa) och styrka (opacitet).

Nej. Förhandsvisningstexten är bara för visning. Den kopierade CSS:en innehåller ingen text, bara containerstilarna.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

CSS-pilgnerator

Skapa lokalt en CSS-pil med riktning, färg, storlek och ramens tjocklek och kopiera sedan regeln.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Generator för platshållarbilder

Skapa en bild på 1–4000 px med egna färger och text, ladda ned PNG eller kopiera webbadress och HTML.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

Markdown-förhandsvisare

Skriv Markdown och se den renderade HTML:en uppdateras live. GitHub-flavored syntax med tabeller, uppgiftslistor, inramad kod och autolänkar.

Verktyget finns på andra språk