Ponad 20 ulepszeń narzędzi i generatorów CSS3
CSS3 jest ulepszoną wersją specyfikacji Arkuszy stylów kaskadowych i zawiera wiele uroczych funkcji, które rewolucjonizują układ i projektowanie stron internetowych, a także inne zalety.
Ale ma również pewne wady, a ich rozwiązanie wymaga sprytów. CSS3 jest nowy na rynku, więc wciąż jest wiele do poprawienia.
Głównym problemem jest to, że właściwości są specyficzne dla przeglądarki i nie można ich łatwo wdrożyć w różnych przeglądarkach. Programiści muszą dodać dodatkowy kod, aby zaimplementować właściwości w taki sam sposób w różnych przeglądarkach.
W tym artykule przedstawimy kilka skutecznych narzędzi generowania automatycznych generatorów CSS3, które mogą pomóc programistom - zwłaszcza leniwym - w wielu zadaniach. Największą zaletą tych narzędzi jest to, że pozwalają na pełne dostosowanie, co oznacza, że każdy może z nich korzystać z łatwością.
1. CSS3, proszę!
CSS3, proszę to uniwersalne narzędzie z wszechstronnymi funkcjami, takimi jak border-radius , box-shadow i gradienty liniowe. Jest to aplikacja internetowa, która pokazuje natychmiastowe wyniki po prawej stronie okna, pomagając programistom tworzyć przydatny kod CSS3 w różnych przeglądarkach. CSS3, proszę zaprojektował Paul Irish i Jonathon Neal.
2. Generator CSS3
Generator CSS3 pomaga programistom w tworzeniu wielu fragmentów przeglądarki dla różnych właściwości CSS3. Daje programistom pełną funkcjonalność dostosowywania, w tym border-radius , text-shadow , RGBa, rozmiar skrzynki i zmiana rozmiaru pudełka. Wystarczy kliknąć na proste menu rozwijane i wygenerować kod dla pożądanego efektu.
3. Promień graniczny
Promień obramowania sprawia, że Twoje projekty wyglądają bardziej elegancko przy mniejszym wysiłku. Wprowadź żądaną wartość, a wygeneruje kod dla prostokątów o różnych specyfikacjach granicznych. Użyj go, aby Twoje projekty były urocze.
4. Maker CSS3
CSS3 Maker to oszczędne narzędzie, które zawiera rozwijane menu i różne inne opcje, w tym rozmiar skrzynki, selektory konturu i transformatory. Wystarczy wprowadzić żądane wartości w polach i wygenerować kod wraz z podglądem. Kod jest dostępny do pobrania.
5. Button Maker
Chris Coyier prezentuje eleganckie narzędzie na CSS-Tricks do projektowania stylowych 3-D przycisków. Z Button Maker , po prostu przesuwaj suwaki, aby dostosować gradienty górny i dolny, kolor tła kursora, kolor tekstu kursora i inne elementy, aby szybko uzyskać pożądany przycisk.
6. CSS3 PIE
CSS3 PIE zawiera szybką wersję demonstracyjną i kilka elementów sterujących do wykonywania kilku właściwości CSS3, takich jak border-radius , box-shadow i gradient liniowy. Przesuń elementy sterujące, aby zobaczyć zmiany w dołączonym polu. Następnie zaznacz to pole wyboru, aby wyświetlić pole CSS i wyświetlić wygenerowany kod.
7. Widget Pad
Widget Pad może ulepszyć funkcje CSS3 wprowadzone w przeglądarkach Webkit dzięki prostemu, ale efektywnemu generatorowi automatycznemu. Obejmuje ona właściwości CSS, takie jak krycie, zaokrąglone rogi, transformacje i inne.
8. CSS3 Gen
CSS3 Gen to poręczne narzędzie dla początkujących programistów. Użyj elementów sterujących, aby utworzyć układ progresywny: twórz zaokrąglone rogi, dodawaj efekty cienia do dowolnego elementu pola i baw się fajnymi efektami tekstowymi. Narzędzie pomaga również programistom, określając zgodność kodu z przeglądarkami.
9. Menu CSS3
Eleganckie rozwijane menu z wieloma interaktywnymi funkcjami jest dostępne za pomocą kilku kliknięć. Spraw, by Twój projekt wyglądał elegancko Menu CSS3 . Obejmuje zaokrąglone rogi, gradienty i wiele więcej. Narzędzie skraca czas kodowania, aby uzyskać stylowe menu. Wystarczy pobrać kod i osadzić go zgodnie z jego wymaganiami.
10. Zaokrąglony generator narożny
Portal CSS stworzył wszechstronne narzędzie do generowania kodu dla zaokrąglonych narożników, które sprawiają, że układy Web wyglądają klasycznie. The Zaokrąglony generator narożny ułatwia generowanie niestandardowego kodu dla wszystkich narożników za jednym razem lub za rogiem.
11. CSS3 Kliknij Wykres
CSS3 Kliknij Wykres wspomaga wspaniałe efekty, takie jak kolory RGBa, cienie pudełek, gradienty radialne i rotacja. Programiści mogą dostosowywać rozmiary tła i nadawać tekstom niesamowite efekty obrysu. Jednak narzędzie nie ma wielu elastycznych opcji dostosowywania kodu. Mimo to jest to skuteczny generator automatyczny, który może zaoszczędzić czas.
12. Test selektorów CSS3
Test selektorów CSS3 to kompletny zestaw testów, który automatycznie generuje różne małe testy, aby ocenić, czy przeglądarka jest zgodna z selektorami CSS. Jeśli wykryje problem ze zgodnością, oznacza to. Ale nie radzi sobie dobrze z selektorami zależnymi od użytkownika z powodu ograniczeń technicznych.
13. Generator gradientów
Kolory mogą radykalnie zmienić projekt. Generator gradientów umożliwia projektowanie gradientu trójkolorowego w ciągu sekundy. Wystarczy wybrać kolory początkowy, przejściowy i końcowy. Następnie generuje gradient, z kolorami rozstawionymi w równej odległości od siebie. Złap kod i idź.
14. Generator obrazów granicznych
Generator obramowania obrazu to ekscytujące narzędzie CSS3, którego możesz użyć do generowania fajnych obramowań poprzez dostosowanie suwaków. Uzyskaj natychmiastowy kod dla border-radius własność. Wybierz dowolny obraz i użyj go, aby ukształtować tło i obramowanie określonego elementu i nadać projektowi oszałamiający wygląd.
15. Westciv
Westciv to zbiór narzędzi, który musi zawierać zakładkę. Użyj XRAY, aby zobaczyć położenie, marginesy, dopełnienie i wiele więcej szczegółów dowolnego elementu. MRI pomaga wytworzyć najlepsze selektory dla danego elementu. CSS3 Sandbox zawiera gradienty, cienie i transformacje CSS. A jeszcze inni podobno wkrótce.
16. Xeo CSS
Xeo CSS to interaktywne narzędzie z doświadczeniem podobnym do komputera stacjonarnego. Pomaga programistom i początkującym projektować strony CSS i HTML bez pisania pojedynczej linii kodu. Generuje nie tylko fragmenty CSS3, ale także klasy i selektory ID. Ogólnie rzecz biorąc, jest to świetne narzędzie. Zarejestruj się i zacznij projektować niezwykły layout strony internetowej.
17. Narożniki CSS
Narożniki CSS pozwala tworzyć zaokrąglone narożniki z gradientami, aby nadać projektowi profesjonalny wygląd. Zaokrąglony kod narożników jest obsługiwany przez wiele przeglądarek. Wszystko, co musisz zrobić, to użyć kontrolek wraz z małą funkcją podglądu i uzyskać kod.
18. Generator przycisków gradientowych CSS3
Przyciski mogą nadać elegancki wygląd, ale jeśli nie są dobrze zaprojektowane, mogą zniszczyć cały układ. Twórz fajne przyciski, dodając gradienty i cienie. CSS3 Gradient Button Generator generuje odpowiedni kod w kilka sekund, oferując różnorodne elementy sterujące, w tym efekty gradientowe, tekstowe i najedź.
19. Spritebox
Spritebox jest narzędziem WYSIWYG ("widzisz to, co dostajesz"), pomagając programistom tworzyć klasy CSS i identyfikatory z jednego obrazu ikonki. Opcja "przeciągnij i upuść" sprawia, że narzędzie jest przyjemnie interaktywne. Spritebox obsługuje wiele przeglądarek, więc problemy ze zgodnością można szybko rozwiązać. Wybierz dowolną część obrazu, którą można pobrać z dowolnego adresu URL lub załadować z komputera i zdefiniować nazwę klasy. Narzędzie automatycznie utworzy reguły CSS dla położenia tła.
20. Edytor gradientów
Nadaj swojemu projektowi kolorowy, a jednocześnie spójny wygląd dzięki funkcjom Adobe Edytor gradientów . Projektuj przezroczyste gradienty CSS i dodawaj efekty pojawiania się, zaniku, półprzezroczystości i podobnych efektów, aby uzyskać kolorowy przycisk gradientu.
21. Mike Plate's CSS3 Playground
Mike Plate (twórca stron internetowych i mobilnych) prezentuje niesamowite narzędzie internetowe, Plac zabaw CSS3 , co ułatwia tworzenie różnych funkcji, w tym cieni, transformacji i tła gradientowego. To niesamowite narzędzie ma również opcję zmiany rozmiaru i repozycjonowania, dzięki selektorom kolorów i suwakom, które mogą pomóc w stylizowaniu pola tekstowego. Po zakończeniu modyfikacji podgląd z wygenerowanym kodem pojawia się natychmiast.
Wniosek
Dzięki CSS3 można robić cuda dzięki układom internetowym. Ale trzeba umiejętności technicznych. Poręczne narzędzia wymienione tutaj będą bardzo pomocne dla profesjonalistów, którzy chcą wygenerować jak najwięcej kodu zgodnego z przeglądarką dla różnych właściwości CSS3, a także pomogą tym, którzy są nowi w dziedzinie projektowania.
Coś, co przegapiliśmy? Na jakie narzędzia CSS3 polegacie najbardziej?