10 przydatnych generatorów CSS

CSS, czyli kaskadowe arkusze stylów (ang. Cascading Style Sheets) to język służący do opisu wyświetlania stron www. Po krótce można napisać, że CSS jest to pewien zbiór reguł które odpowiadają za wyświetlani naszej strony w przeglądarce internetowej. Na przykład, za pomocą CSS możemy ustawia parametry marginesów, kolorów, czcionki, szerokości, wysokości, tła, obrazków, itd…

Niestety nie wszystkie przeglądarki internetowe poprawnie wyświetlają nasz kod, gdyż nie wszystkie przeglądarki obsługują wszystkie style CSS, dla przykładu proszę sprawdzić wygląd mojej strony w przeglądarce Firefox, a następnie Internet Explorer, różnice widać od razu 😉 . W tym poście nie będę się rozpisywał na temat genezy czy rodzajów CSS, bo od czego jest wikipedia;) ale chciałbym przedstawić 10 przydatnych generatorów kodu CSS, dla osób które chciałyby poznać ten typ kodowania stron internetowych, a nie koniecznie chcą pisać swój własny kod od podstaw. 1. CSS3 Generator https://css3generator.com/

Naprawdę proste ale bardzo pomocne narzędzie do generowania kodu CSS. Spośród listy możemy odnaleźć promień obramowania (border radius), cień tekstu (text shadow), RGBA, @ font-face, wiele kolumn, selektory, gradienty, itp…

2. CSS3 SandBox https://www.westciv.com/tools/

Bardzo pomocne narzędzie w generowaniu gradientów, a także text shadows, box shadows, transforms i text stroke.

3. CSS Border Radius https://border-radius.com/

Potrzebujesz obramowanie z zaokrąglonymi rogami?…nie ma sprawy narzędzi CSS Border Radius Cię wyręczy.

4. Font-Face Kit Generator https://www.fontsquirrel.com/fontface/generator

Pomocne narzędzie do wdrożenia na swoją stronę internetową innych czcionek, niż te podstawowe z grupy „safe fonts”. Jest to metoda linkowania czcionek TrueType i OpenType, tak jak obecnie linkuje się np. obrazki. 5. Border Image Generator https://www.borderimagegenerator.com

Proste narzędzie do generowania obramowania, umożliwia także zastosowanie swojego obrazka.

6. Cross Browser CSS3 Rule Generator https://css3please.com/

Kolejny prosty ale bardzo pomocny generator kodu CSS.

7. The CSS Text Wrapper https://www.csstextwrap.com/

CSS Text Wrapper to narzędzie które pozwala bardzo łatwo zamienić tekst HTML w różne kształty. Dzięki niemu można szybko zwinąć swój tekst wokół krzywych, opisujących koło, romb, trójkąt itp.

8. CSS Type Set https://csstypeset.com/

CSS Type Set to praktyczne narzędzie typografii, które pozwala na sformatowanie tekstu oraz sprawdzenie jak on będzie wyglądał w przeglądarce.

9. Typechart https://www.typechart.com/

Typechart pozwala przeglądać różne style typografii oraz umożliwia podgląd i pobranie gotowego kodu CSS.

10. Typetester https://www.typetester.org/

Typetester jest aplikacja internetowa, która pozwala na testowanie różnych krojów czcionki. Do wyboru są trzy kolumny tekstu i typografii, które można modyfikować w dowolny sposób, a następnie wygenerować gotowy kod CSS.