7 Najlepsze strony, aby znaleźć fragmenty CSS i inspiracje

Poświęciłeś czas na naukę i opanowanie CSS. I można powiedzieć, że jesteś teraz biegłym programistą. Świetnie!

Ale zrozumienie, jak dobrze kodować z CSS, niekoniecznie oznacza, że biegle znasz najnowsze trendy w projektowaniu stron internetowych. Jeśli nie masz nieograniczonego wolnego czasu na przeczytanie wszystkich głównych blogów internetowych i blogów WordPress co tydzień, nie ma możliwości, abyś mógł rozsądnie oczekiwać, że pozostaniesz na nieustannie obracających się drzwiach trendów lub wiesz, jak je wykonać za pomocą CSS.

Pomocne w tym zakresie są fragmenty CSS. Te małe kawałki kodu pomogą Ci szybko i skutecznie dodać CSS (i kilka naprawdę fajnych nowych funkcji) do twojej witryny WordPress w mgnieniu oka.

Jednak polowanie na te fragmenty nie jest łatwym zadaniem, jeśli nie wiesz, czego szukasz lub którym zasobom online możesz zaufać. W tym artykule zamierzam dostarczyć Ci najlepsze zasoby 7 do śledzenia fragmentów CSS i stosowania nowych, zabawnych funkcji w Twojej witrynie WordPress.

Korzyści z używania fragmentów CSS w WordPress

Jeśli nie używałeś fragmentów CSS do tworzenia w WordPress, oto dlaczego powinieneś zacząć:

Oszczędność Czasu

Prawdopodobnie już znalazłeś sposoby na poprawę przepływu pracy CSS i napisanie czystszego kodu CSS, aby zaoszczędzić czas podczas budowania stron internetowych WordPress. Fragmenty CSS tylko zwiększą tę wydajność.

Spójność

Spójność jest nieodłączną zaletą kaskadowych arkuszy stylów. Umożliwiają one stworzenie stylu dla niektórych elementów w witrynie, a następnie zastosowanie reguły uniwersalnie przy minimalnym wysiłku.

Rozszerzone Możliwości

Czasami możesz zdecydować się na użycie fragmentu CSS do czyszczenia kodu w rutynowej stylizacji. Jednak prawdziwe piękno korzystania z fragmentu kodu polega na tym, że daje Ci możliwość dodania czegoś naprawdę nowatorskiego do swojej witryny, do czego sam możesz nie być zdolny.

Ulepszenia SEO

Korzystając z dobrze zakodowanych fragmentów, które zwiększają komfort użytkownika, zmniejszysz współczynniki odrzuceń, wydłużysz czas spędzony na stronie i poprawisz SEO witryny. CSS jest na ogół kompatybilny z różnymi platformami i przeglądarkami, co przyczyni się do ogólnej poprawy rankingu wyszukiwania.

Redukcja Przepustowości

Nie ma absolutnie nic złego w korzystaniu z wtyczek, aby osiągnąć najnowocześniejszą funkcjonalność lub dodać więcej nowoczesnych funkcji do witryny. Jednak z każdą nową wtyczką dodaną do WordPressa, więcej energii będzie sapped z twojego serwera. Jeśli możesz znaleźć fragmenty CSS, które pomogą Ci osiągnąć te same cele, dlaczego nie użyć ich zamiast tego?

Inspiracje

Jest też czynnik inspiracji. Eksplorowanie zasobów fragmentów CSS nie jest po prostu świetne do nauki korzystania z CSS lub skrócenia czasu potrzebnego na kodowanie. Jest to również dobra okazja, aby znaleźć inspirację dla swoich projektów, o których być może nie byłeś świadomy.

Ale, ponownie, kto ma czas, aby polować w sieci przez wiele godzin, szukając nowych, fajnych sposobów, w jakie programiści używają CSS? (Nie ty.) Czytaj dalej, aby dowiedzieć się, gdzie natychmiast znaleźć te przełomowe fragmenty CSS.

7 Najlepsze strony internetowe, aby znaleźć fragmenty CSS

Chociaż fragmenty CSS mogą nie pomóc ci zbudować całych stron internetowych od podstaw (w końcu chodzi o zastosowanie różnych stylów do kodu HTML, a nie o ustanowienie podstawy), zaoszczędzą Ci czas i energię.

• CodeMyUI

  

  CodeMyUI jest naprawdę fajnym repozytorium dla fragmentów CSS. Na górze strony widać, że ich głównym celem są elementy interfejsu użytkownika, o których zwykle rozmawiamy (np. menu, przyciski, obrazy). Jednak wyszukaj „fragmenty CSS”, a przekonasz się, że ta strona obejmuje znacznie szerszy wachlarz animacji i funkcji niż tylko te ogólne elementy.

  Oto dobry przykład czegoś, co można znaleźć na tej stronie: fidget spinner loader. Biorąc pod uwagę, jak popularne są teraz te zabawki, byłoby to fajnym dodatkiem do twojej witryny, jeśli potrzebujesz animacji przejścia strony.

  

  Jest też ten fragment bułki tartej, który zapewnia większą wszechstronność w stylu nawigacji bułki tartej.

  

  A oto fragment, na który warto rzucić okiem. Zobaczysz, że stosuje „inteligentny” efekt najechania na pola lub bloki, przy czym odwracają się na podstawie kierunku, w którym kursor przechodzi nad nimi.

  

• Codepad

  

  Jeśli szukasz strony, na której możesz zarówno znaleźć fragmenty CSS od innych programistów internetowych, jak i dodać własne, Codepad jest miłym do sprawdzenia. Jest łatwy do przeszukiwania (upewnij się, że korzystasz z placów zabaw, aby uzyskać podgląd rzeczywistej animacji/stylu), a także zawiera fragmenty dla JavaScript, PHP, HTML i innych.

  Szczególnie interesujący jest fragment przejścia do logowania/rejestracji. Na pierwszy rzut oka wydaje się po prostu fragmentem krótkiego formularza kontaktowego. Obserwuj jednak, co dzieje się z polami formularza po kliknięciu między zakładkami „Zaloguj się”, „Zarejestruj się” i „zresetuj”.

  

  Odbijająca się strzałka w dół to kolejna subtelna animacja, ale z pewnością złagodzi zamieszanie użytkowników, gdy poruszają się po twojej witrynie.

  

• CodePen

  

  Jestem pewien, że wszyscy już znacie CodePen. W końcu to „środowisko rozwoju społecznego” jest doskonałym miejscem do poznawania nowego kodu i pracy nad doskonaleniem własnego. Jeśli szukasz naprawdę nowoczesnego kodu CSS, ta strona cię nie zawiedzie.

  Weźmy na przykład ten suwak referencji. Treści generowane przez użytkowników są obecnie dużą częścią projektowania stron internetowych, więc ten fragment byłby przydatny.

  

  Ten fragment animacji etykiet jest tak subtelny, ale zdecydowanie wywrze trwały wpływ na każdego, kto lubi element zaskoczenia.

  

  A w przypadku stron internetowych, które mają ważne dane lub informacje do udostępnienia, zawsze jest taki fragment, który sprawia, że różne elementy interfejsu użytkownika są pop.

  

• CSSDeck

  

  CSSDeck jest dobrym wyborem, jeśli nie chcesz sortować fragmentów dla innych języków kodowania. Chociaż możesz napotkać urywki, które łączą CSS i HTML lub CSS i JavaScript, głównym celem jest zawsze dostarczanie Użytkownikom kodu skupionego na CSS.

  Oto przykład tego, co robi jeden z tych fragmentów, aby nadać menu nawigacyjnemu więcej życia. Istnieje wiele opcji do zabawy, więc nie jesteś zdegradowany do korzystania z jednej domyślnej animacji.

  

  W przypadku witryn internetowych, które zawierają wydarzenia lub umożliwiają klientom umawianie spotkań za pośrednictwem witryny, ten fragment ikony kalendarza byłby przyjemny w użyciu. Ikona porusza się na tyle, aby zwrócić na nią uwagę.

  

  Chciałbyś, żeby animacja hamburgerowego menu miała więcej dramatyzmu? Ten fragment menu koła może być inspiracją, której potrzebujesz.

  

• CSSFlow

  

  CSSFlow jest znany nie tylko jako dostawca urywków CSS. Ta strona ma również zestawy interfejsu użytkownika, które pomogą Ci usprawnić i uprościć projektowanie podstawowych elementów interfejsu użytkownika w witrynie WordPress. To świetny cios, jeśli szukasz pomocy zarówno w projektowaniu, jak i animacji.

  Podczas tworzenia aplikacji zwiększających produktywność i witryn internetowych możesz tworzyć listy zadań, z których użytkownicy mogą korzystać. Ten fragment jest prosty w wykonaniu, a jednocześnie dodaje dodatkową myślnik klasy.

  

  Oto kolejny rodzaj fragmentu typu on/off, który da odwiedzającym kolejny powód do aktywnego angażowania się w witrynę za pomocą prostego przełącznika.

  

• CSS-triki

  

  Strona CSS-Tricks jest niesamowicie dobrze zorganizowana, co sprawia, że jest to miła strona do zakładek, gdy czujesz się żądny przygód i chcesz sprawdzić, jakie inne typy fragmentów są dostępne. Znajdziesz tu wszystko, od przejść animacji po Konfigurowanie reguł obsługi długości tekstu.

  Dla każdego, kto ma maskotkę, którą chciałby animować, gdy odwiedzający unosi się nad nim lub nią na stronie, Ten drżący fragment głowy może być fajny do przetestowania.

  

  Jeśli masz trudności z dostosowaniem kopii na swojej stronie internetowej, ten fragment CSS z płynną typografią byłby przydatny.

  

• Małe Fragmenty

  

  Chociaż LittleSnippets jest inspirującym blogiem, istnieje tutaj kilka bardzo praktycznych fragmentów CSS. W szczególności ta strona wydaje się skupiać na zbieraniu fragmentów, które pomagają programistom stosować subtelne efekty animacji do obrazów i przycisków.

  Na przykład ten efekt unoszenia obrazu będzie dobrze działał na stronach portfolio, a także na stronach z wiadomościami i mediami.

  

  Oto przykład działania jednego z efektów najechania na przycisk. To mały ruch i zmiana projektu, a jednocześnie taki, który przyciągnie uwagę odwiedzających.

  

Wrapping Up

Wiesz, co kocham w WordPressie? To coś w stylu obiadu. Każdy przychodzi do stołu z własnym wkładem, a Ty możesz cieszyć się owocami swojej pracy. W ten sposób przeglądam darmowe narzędzia WordPress, takie jak motywy, wtyczki i fragmenty CSS. Deweloperzy nie mieć aby udostępnić wszystkim swoje oszczędzające czas i inspirujące narzędzia i Kod, ale to jeden z powodów, dla których WordPress jest tak świetny.

Jak widać z powyższych witryn, istnieje mnóstwo fragmentów CSS, które czekają, aby zostać zaczepione i wykorzystane. Niezależnie od tego, czy jest to coś tak subtelnego, jak wypełnienie granicy przycisku, czy coś bardziej szczegółowego, takiego jak animacja przejścia strony, fragmenty CSS dają możliwość szybkiego i łatwego zastosowania nowych funkcji w witrynie WordPress bez potu.

Tagi:

• CSS
• CSS snippets