Generator właściwości CSS

Generator właściwości CSS to narzędzie, które tworzy kod CSS dla efektu wizualnego na podstawie zestawu suwaków i próbników kolorów, zamiast wymagać ręcznego wpisywania kodu. Obsługuje cztery efekty: gradienty, cienie elementów, promienie obramowania i cienie tekstu. Każdy panel wyświetla podgląd na żywo i generuje kod CSS gotowy do skopiowania.

Co generuje

• Gradienty: liniowe lub radialne przejścia między dwoma kolorami
• Cienie elementów: cień zewnętrzny lub wewnętrzny wokół elementu, z ustawieniami przesunięcia, rozmycia, rozmiaru, koloru i krycia
• Zaokrąglenie obramowania: zaokrąglone narożniki, takie same dla wszystkich czterech narożników albo ustawiane indywidualnie
• Cienie tekstu: cień za tekstem, z ustawieniami przesunięcia, rozmycia, koloru i krycia

Każde ustawienie jednocześnie aktualizuje podgląd i wygenerowany kod CSS, dzięki czemu zmiany można sprawdzić przed skopiowaniem kodu.

Jak obliczyć liniowy gradient CSS

Gradient liniowy przechodzi od jednego koloru do drugiego wzdłuż linii prostej. Jego składnia CSS ma postać:

1background: linear-gradient(angle, color1 position1%, color2 position2%);
2

Kąt jest mierzony w stopniach, od 0 do 360. Wartości position1 i position2 określają, w którym miejscu każdy kolor osiąga pełną intensywność, jako procent długości gradientu.

Przykład obliczeniowy

Początkowe wartości generatora to kąt 90 stopni, kolor #ff5f6d w położeniu 0% oraz kolor #ffc371 w położeniu 100%. Daje to:

1background: #ff5f6d;
2background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
3

Pierwszy wiersz jest zwykłym zastępczym kolorem dla przeglądarek, które z jakiegoś powodu nie wyświetlą gradientu. Drugi wiersz zawiera sam gradient.

Wzór gradientu radialnego

Gradient radialny rozchodzi się na zewnątrz od punktu centralnego, a nie wzdłuż linii:

1background: radial-gradient(circle, color1 position1%, color2 position2%);
2

Ten generator zawsze tworzy okrągły gradient radialny. Nie oferuje opcji kształtu elipsy ani możliwości przesunięcia punktu centralnego; zmieniać można tylko dwa kolory i położenia punktów przejścia.

Oba typy gradientów w tym narzędziu używają dokładnie dwóch kolorów, ustawianych za pomocą próbników Kolor 1 i Kolor 2. Nie ma opcji dodania trzeciego punktu zatrzymania koloru.

Wzór cienia elementu CSS

Cień elementu to cień rysowany wokół krawędzi elementu:

1box-shadow: h-offset v-offset blur spread color;
2

Wartości h-offset i v-offset przesuwają cień w lewo lub w prawo oraz w górę lub w dół. Wartości dodatnie przesuwają go w prawo lub w dół, a ujemne — w lewo lub w górę. Wartość blur zmiękcza krawędź cienia; większa liczba rozciąga efekt zmiękczenia na większy obszar. Wartość spread zwiększa lub zmniejsza rozmiar cienia przed zastosowaniem rozmycia. Dodanie słowa kluczowego inset przed przesunięciami powoduje narysowanie cienia wewnątrz obramowania elementu zamiast na zewnątrz.

Przykład obliczeniowy

Przy ustawieniach domyślnych (poziome przesunięcie 5 px, pionowe przesunięcie 5 px, rozmycie 10 px, rozprzestrzenienie 0 px, czarny kolor o kryciu 20%) narzędzie generuje:

1box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
2

Suwak krycia próbnika koloru ma zakres od 0 do 100 i jest przeliczany na skalę od 0 do 1 używaną przez rgba(), więc 20% staje się wartością 0,2.

Wzór zaokrąglenia obramowania CSS

Zaokrąglenie obramowania zaokrągla narożniki elementu. Istnieją dwie postacie:

1border-radius: value;                              /* same on all four corners */
2border-radius: top-left top-right bottom-right bottom-left; /* set separately */
3

Gdy wszystkie cztery narożniki mają jedną wartość, generator zapisuje skróconą postać. Gdy wartości się różnią, podaje je w dokładnej kolejności: lewy górny, prawy górny, prawy dolny, lewy dolny.

Przykład obliczeniowy

Domyślne zaokrąglenie wynosi 10 px dla każdego narożnika:

1border-radius: 10px;
2

Okrągły obraz awatara zazwyczaj używa zamiast tego wartości border-radius: 50%, choć ta wartość wykracza poza zakres suwaka generatora, wynoszący od 0 do 100 pikseli.

Wzór cienia tekstu CSS

Cień tekstu działa podobnie jak cień elementu, ale nie ma wartości rozprzestrzenienia i dotyczy liter zamiast obszaru elementu:

1text-shadow: h-offset v-offset blur color;
2

Przykład obliczeniowy

Przy ustawieniach domyślnych (poziome przesunięcie 2 px, pionowe przesunięcie 2 px, rozmycie 3 px, czarny kolor o kryciu 50%):

1text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
2

Jakie kody kolorów akceptuje generator

Każde pole wyboru koloru ma próbkę i pole tekstowe. Pole tekstowe przyjmuje szesnastkowy kod koloru w postaci # używanej w całym CSS. Dozwolone są cztery długości: trzy cyfry (#f00), cztery cyfry (#f00c), sześć cyfr (#ff0000) oraz osiem cyfr (#ff0000cc). Krótkie postacie oznaczają ten sam kolor co długie, ponieważ każda cyfra jest powielana: #123 oznacza ten sam kolor co #112233.

Ostatnia cyfra postaci czterocyfrowej i ostatnia para postaci ośmiocyfrowej ustalają przezroczystość. Generatory cieni ignorują te cyfry i pobierają wartość kanału alfa z suwaka krycia, dzięki czemu suwak zawsze pokazuje rzeczywiście stosowaną przezroczystość. Jeśli pole tekstowe zawiera coś, co nie jest kolorem szesnastkowym, na przykład częściowo wpisany kod, cień przyjmuje kolor czarny zamiast generować nieprawidłową deklarację.

Jak używać generatora właściwości CSS

1. Wybierz kartę: Gradient, Cień elementu, Promień obramowania lub Cień tekstu.
2. Dostosuj suwaki, próbniki kolorów i pola wyboru. Obok każdego suwaka znajduje się pole liczbowe, w którym można wpisać dokładną wartość. Panel podglądu i kod CSS są aktualizowane natychmiast.
3. Wybierz przycisk „Kopiuj do schowka” i wklej kod do arkusza stylów lub atrybutu style.
4. Wybierz „Resetuj”, aby przywrócić początkowe wartości wszystkich pól na wszystkich czterech kartach. Spowoduje to także ponowne przełączenie aktywnej karty na Gradient, nawet jeśli wyświetlana była inna karta.

Często zadawane pytania

Do czego służy generator właściwości CSS? Zamienia wartości suwaków i próbników kolorów na gotowy kod CSS dla gradientów, cieni i zaokrąglonych narożników, dzięki czemu użytkownik nie musi ręcznie pisać ani zapamiętywać tej składni.

Czym różni się gradient liniowy od radialnego? Gradient liniowy zmienia kolor wzdłuż linii prostej pod określonym kątem. Gradient radialny zmienia kolor na zewnątrz od punktu centralnego. Opcja radialna tego narzędzia zawsze używa okrągłego kształtu.

Czy to narzędzie może utworzyć gradient z więcej niż dwoma kolorami? Nie. Panele gradientu liniowego i radialnego obsługują dokładnie dwa kolory: Kolor 1 i Kolor 2, każdy z własnym położeniem punktu zatrzymania.

Czym różni się wewnętrzny cień elementu od zwykłego? Zwykły cień elementu znajduje się poza krawędziami elementu, jak światło padające za nim. Cień wewnętrzny znajduje się wewnątrz krawędzi, przez co element wygląda na wklęsły, a nie wypukły.

Dlaczego wartości zaokrąglonych narożników występują w kolejności: lewy górny, prawy górny, prawy dolny, lewy dolny? Tego porządku oczekuje właściwość CSS border-radius przy zapisie czterech oddzielnych wartości, poruszając się zgodnie z ruchem wskazówek zegara od lewego górnego narożnika.

Czy wygenerowany kod CSS działa w każdej przeglądarce? Gradienty, cienie elementów, promienie obramowania i cienie tekstu są obsługiwane w aktualnych wersjach przeglądarek Chrome, Firefox, Safari i Edge. Dane wyjściowe nie zawierają prefiksów producentów.

Piśmiennictwo

1. MDN Web Docs: Używanie gradientów CSS
2. MDN Web Docs: box-shadow
3. MDN Web Docs: border-radius
4. MDN Web Docs: text-shadow