Czekaj chwilkę
lis 23, 2016

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
http://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
http://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
http://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
http://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
http://www.borderimagegenerator.com

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

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

Kolejny prosty ale bardzo pomocny generator kodu CSS.

7. The CSS Text Wrapper
http://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
http://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
http://www.typechart.com/

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

10. Typetester
http://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.

Komentarze
  • Mateusz sie 31, 2013 Odpowiedz

    Świetny zbiór, bardzo mi pomógł. Dzięki! :)

  • lll paź 25, 2014 Odpowiedz

    pozdro

Dodaj komentarz