3BearLabs3Bear Tools
Bilder

HTML-Tabellen- und CSS-Box-Shadow-Generator

Lege die Größe einer HTML-Tabelle fest und erhalte das Markup, oder gestalte einen CSS-Boxschatten und kopiere die CSS-Zeile.

Läuft im Browser – Dateien verlassen dieses Gerät nicht.

HTML/CSS Markup-Helfer

Generieren Sie schnell Code für Box-Schatten und HTML-Tabellen.

box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.1);

So funktioniert es

  1. Öffne den Tab Tabelle, um eine Tabelle zu bauen, oder den Tab Box Shadow für einen Schatten.
  2. Lege bei einer Tabelle Zeilen- und Spaltenzahl, Tabellenbreite und Rahmenstärke fest. Bewege bei einem Schatten die Regler für Versatz, Weichzeichnung und Ausbreitung.
  3. Prüfe die Vorschau und nutze dann das Kopieren-Symbol über dem Codeblock.

Der Tab Tabelle erstellt eine HTML-Tabelle mit einer Kopfzeile und der von dir festgelegten Anzahl an Körperzeilen und Spalten. Kopfzellen werden mit Text wie Header 1 gefüllt, Körperzellen mit Text wie Cell 1-1, den du durch eigenen Inhalt ersetzt. Das Breitenfeld akzeptiert jeden CSS-Breitenwert, mit 100% als Standard, und das Rahmenfeld legt die Rahmenstärke in Pixeln fest. Der kopierte Code beginnt mit einem Style-Block für eine Klasse namens gen-table, der zusammengeführte Rahmen, Zellenabstand, eine schattierte Kopfzeile, gestreifte gerade Zeilen und eine Hover-Farbe festlegt, gefolgt vom Tabellen-Markup.

Der Tab Box Shadow gibt eine einzelne box-shadow-Deklaration aus. Du steuerst den horizontalen und den vertikalen Versatz (-50 bis 50 px), den Weichzeichnungsradius (0 bis 100 px), die Ausbreitung (-50 bis 50 px), die Schattenfarbe als CSS-Farbwert und eine Inset-Option für einen inneren Schatten. Die Standardfarbe ist ein helles transparentes Schwarz. Das Vorschaufeld aktualisiert sich, während du die Regler bewegst.

Beide Tabs zeigen den Code in einem Block mit Kopieren-Schaltfläche. Zeilen- und Spaltenzahl müssen mindestens 1 betragen, der Rahmenwert mindestens 0.

Der Code wird in deinem Browser erzeugt, und nichts wird hochgeladen.

Häufige Fragen

Kommt die Tabelle mit Styling?

Ja. Die Ausgabe enthält einen Style-Block für die Klasse gen-table mit Rahmen, Abstand, schattierter Kopfzeile, gestreiften Zeilen und einer Hover-Farbe. Du kannst ihn bearbeiten oder entfernen.

Kann ich Zellen verbinden oder Beschriftungen hinzufügen?

Nein. Der Generator erzeugt ein schlichtes Raster mit einer Kopfzeile. Bearbeite das kopierte Markup, wenn du mehr brauchst.

Was bewirkt der Ausbreitungswert bei einem Schatten?

Er vergrößert oder verkleinert den Schatten vor dem Weichzeichnen. Positive Werte machen ihn größer, negative kleiner.

Kann ich einen inneren Schatten erzeugen?

Ja. Setze die Option Inset, und die Ausgabe endet mit dem Schlüsselwort inset.

Wird meine Eingabe irgendwohin gesendet?

Nein. Der Code wird in deinem Browser erzeugt.

Verwandte Tools