DARMOWE NARZĘDZIE

Generator CSS Ribbon

Twórz wstążki, narożniki i oznaczenia CSS (ribbon) dla kart i produktów. Wybierz pozycję, kolor i tekst. Kopiuj gotowy CSS. Online, bezpłatnie. Profesjonalne narzędzie online, które działa w Twojej przeglądarce. Szybko, bezpiecznie i bez instalowania zbędnego oprogramowania.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Position

Font weight

Tekst

13 znaków

Tekstu kolorów

7 znaków

Container bg

Szerokość

Wysokość

Angle

Font size

Shadow Opcja narzędzia

Rounded Opcja narzędzia

Wynik

Ustaw parametry i kliknij „Przetwórz”, aby zobaczyć wynik.

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Generator CSS Ribbon online

Wstążki narożnikowe to popularny sposób wyróżnienia produktu (Nowość, Bestseller, -20%). Generator tworzy je czystym CSS — bez obrazków.

CSS ribbon wstążka CSS narożnik CSS badge CSS

Pozycje wstążki

Górny-lewy, górny-prawy, dolny-lewy, dolny-prawy — każda wariant z automatycznym obrotem tekstu i clipping overflow.

Stylizacja

Kolor tła, kolor tekstu, rozmiar czcionki, cień, opcjonalny pasek cienia pod wstążką dla efektu głębi.

Najczęstsze pytania

Czy wstążka działa na position:relative?

Tak — wrapper musi mieć position:relative i overflow:hidden; generator zaznacza to w kodzie.

Czy mogę użyć emoji?

Tak — tekst wstążki obsługuje UTF-8 i emoji.

Jak zrobić animowaną wstążkę?

Dodaj transition na transform lub opacity — generator opcjonalnie exportuje wariant z animacją pulse.

Inne dekoracje CSS znajdziesz w generatorze CSS Badge i clip-path maker.