Softonic

Generator kart CSS

Krok 1 / 2

Tytuł karty

To jest podgląd Twojej karty.

Dalej

Karta to kontener, który stoi za kafelkami produktów, podglądami wpisów, profilami użytkowników i widgetami panelu. Ten generator stylizuje właśnie ten kontener: wybierz kolor tła i obramowania, promień narożników, wypełnienie i miękki cień, a następnie zobacz efekt na stronie. Podgląd pokazuje przykładową treść; zastąp ją własnym tytułem, tekstem i akcjami. Wynik to gotowa do użycia klasa CSS.

Jak wystylizować kontener karty

  1. 1

    Wybierz kolory

    Ustaw kolor tła i kolor obramowania karty.

  2. 2

    Określ kształt

    Dobierz promień narożników i wypełnienie pasujące do Twojego układu.

  3. 3

    Dodaj cień

    Dostosuj rozmycie i nieprzezroczystość miękkiego cienia pod kartą.

  4. 4

    Podgląd i kopiowanie

    Sprawdź podgląd na żywo i skopiuj wygenerowany CSS .card do swojego arkusza stylów.

Co zawiera wygenerowany CSS

Narzędzie tworzy jedną klasę o nazwie .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 to wybrany kolor tła
  • border ma zawsze 1 px linię ciągłą w wybranym kolorze
  • border-radius i padding to wybrane wartości w px
  • box-shadow używa stałego przesunięcia 4 px w dół oraz wybranych wartości rozmycia i nieprzezroczystości

Podgląd to przykładowa treść

Podgląd pokazuje nagłówek i akapit, abyś mógł ocenić proporcje. Narzędzie nie generuje HTML-a: zastosuj klasę do własnego kontenera i umieść w nim tytuł, tekst, obraz lub przyciski akcji. Jeśli karta ma leżeć na kolorowym tle strony, sprawdź kontrast obramowania tam, nie tylko na podglądzie.

Rozsądne limity

Wartości poniżej zera są zaokrąglane do zera, a nieprzezroczystość cienia pozostaje w zakresie od 0 do 1. Bardzo duże wartości wypełnienia lub rozmycia mogą dać nieoczekiwane efekty, więc trzymaj kontrolki w zakresach, których użyłbyś w prawdziwym układzie.

Łączenie z własnym kodem

Minimalny przykład dla Twojej strony:

<div class="card">
  <h3>Nazwa produktu</h3>
  <p>Krótki opis</p>
</div>

Styl kontenera nie ogranicza zawartości: odpowiada tylko za tło, obramowanie, odstępy i cień.

Najczęściej zadawane pytania

Nie. Generuje tylko klasę CSS .card. Kod HTML zbuduj sam, na przykład div lub article wokół tytułu, tekstu i akcji.

Wygenerowane obramowanie ma zawsze 1 px. Jeśli potrzebujesz innej grubości lub stylu, edytuj linię border w CSS-ie.

Stałe przesunięcie pionowe 4 px sprawia, że cień jest subtelny i czytelny. Ty kontrolujesz jego miękkość (rozmycie) i intensywność (nieprzezroczystość).

Nie. Tekst podglądu służy tylko do wyświetlania. Skopiowany CSS nie zawiera treści, tylko style kontenera.

Powiązane narzędzia

Tabela ASCII

Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.

Referencja znaków HTML

Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.

Skróty klawiaturowe

Wyszukuj udokumentowane skróty domyślne VS Code, Chrome i Bash z GNU Readline w macOS, Windows i Linux.

Generator losowych liter

Generuj losowe litery A-Z. Wybierz liczbę, wielkie litery, małe litery lub zapis mieszany i użyj wyniku w grach, zadaniach lub lekcjach.

Konwerter ASCII na binarny

Konwertuj dowolny ciąg ASCII na reprezentację binarną. Każdy znak staje się ośmioma bitami, rozdzielonymi spacjami, gotowymi do wklejenia w ślad protokołu albo zadanie domowe.

Próbnik kolorów HEX

Wybierz lub wpisz kolor HEX i sprawdź RGB, HSL, przybliżone CMYK, luminancję względną oraz kontrast z bielą i czernią.