Darmowy generator CSS

Intuicyjne, proste narzędzie zostało zaprojektowane w taki sposób, by użytkownik mógł nie tylko wygenerować oczekiwany kod, ale także zobaczyć, jak taki kod powstaje i czegoś się przy okazji nauczyć.

Proste w użyciu i darmowe narzędzie, za pomocą którego dobierzesz odpowiednie wartości dla wybranych właściwości. CSS GENERATOR to wygodne dostosowanie parametrów za pomocą suwaków, podgląd na żywo i błyskawiczne kopiowanie gotowego kodu CSS.

Jak dużo narzędzi powinien znać Web Developer? Czy początkujący twórca front-endu musi wykuć każdy symbol na blachę? Niektóre z nich lepiej znać, inne po prostu dobrze mieć w zasięgu ręki. Jednym z takich zasobników podstawowej wiedzy jest CSS GENERATOR stworzony przez programistę Marka Foltańskiego, który całkiem niedawno pracował także w Kodilli.

Darmowe wyzwania programistyczne HTML, CSS, JS

Idea jest dość prosta. Korzystając z narzędzia zaprojektowanego przez Marka, możemy dowolnemu tekstowi nadać wybrane atrybuty, a następnie skopiować wygenerowany kod i wkleić go pomiędzy linijki większego kodu, np. powstającej właśnie strony internetowej. Znajomość CSS nie jest tutaj specjalnie potrzebna. Korzystamy z suwaków oraz pól do wpisywania wartości. W ten sposób określamy położenie i natężenie cienia w generatorze dla boxów lub tekstu, generujemy gotowe reguły CSS (pożądany gradient, albo kod do tła z wybranym wcześniej obrazkiem w postaci jpg).

W zamyśle autora znalazło się też miejsce na wartości edukacyjne:

- Na mojej stronie cssgenerator.pl znajdziecie proste rozwiązania, które dla niektórych osób mogą być pewną drogą na skróty. Ale zaprojektowałem wszystko w taki sposób, by było jak najbardziej czytelne i żeby użytkownik mógł się też przy okazji trochę nauczyć, jak to wszystko działa. Z jednej strony to tylko ruch suwakiem, ale mamy też podgląd na żywo na kod i widzimy, jak w zależności od wyboru wartości ten kod się zmienia - tłumaczy Marek Foltański.

CSS GENERATOR składa się z:

Box shadow
Text shadow
Flexbox
Border radius
Gradient
Transition
Transform
Background
Button

To oczywiście tylko jedno z wielu narzędzi. O innych pisaliśmy już w naszych artykułach. Jeśli chcesz zająć się kodowaniem na serio, zachęcamy do udziału w naszym szkoleniu :)

Kurs Full Stack Developer