Z samym CSS i przeglądarką internetową można zrobić wiele. Świetni programiści uwielbiają przesuwać koperty i pokazać, ile jest to możliwe.
Projekty eksperymentalne nie zawsze są przydatne na stronach produkcyjnych, ale są niezwykle inspirujące i edukacyjne.
Zorganizowaliśmy garść projektów CSS, które pokazują prawdziwą moc CSS. Wszystkie są hostowane na CodePen, dzięki czemu można nawet studiować i klonować kod źródłowy, aby zobaczyć, jak działają.
To Sass wczytuje stronę używa animowanych gradientów i skalowalnych elementów, aby stworzyć powtarzający się efekt ładowania.
Większość ludzi powinna rozpoznać animację ładowania z Facebooka, która używa mniejszej wersji tego pionowego programu ładującego. Jednak większość programów do ładowania stron internetowych korzysta z animowanych plików GIF, ponieważ obrazy są bardziej zgodne ze wszystkimi przeglądarkami.
Pasek ładowania CSS3 udowadnia, że przy odrobinie kreatywnego myślenia można przebudować niemal każdy styl animacji, jaki chcesz.
Zobacz pióro Ładowanie prętów autor: MaxStalker ( @MaxStalker ) na CodePen .
Oto jeden z najbardziej złożonych projektów CSS, jakie mogłem znaleźć online. Ta dynamika projekt układu słonecznego Malik Dellidj działa na czystym CSS bez żadnych obrazów .
Każda planeta jest renderowana w CSS, w tym prędkości obrotowe. Ten projekt ma być dokładnym modelem układu słonecznego, a nawet realistycznym tłem międzygwiezdnym.
Nie potrafię sobie wyobrazić, jak długo trwało tworzenie ikon planety, nie mówiąc już o szybkości animacji. Ale tam, gdzie jest wola, istnieje sposób.
Zobacz pióro Animacja Układu Słonecznego - Czysty CSS Malik Dellidj ( @kowlor ) na CodePen .
Nigdy bym nie pomyślał, że zobaczę dzień, w którym można zagrać klasyczny trałowiec systemu Windows używając czystego CSS . Jednak dzięki deweloperowi Bali Balo nadszedł ten dzień.
Zauważ, że to nie działa tak dobrze, jak tradycyjny Saper, ponieważ nie zachowuje on poprawnie wyniku. Ale dokładnie śledzi czas i nie używa luki JavaScript.
W jakiś sposób nawet interfejs wygląda zaskakująco blisko oryginalnego interfejsu Minesweepera i wszystko działa na CSS. Chociaż może nie być idealną repliką, jest wystarczająco blisko, aby mnie wciągnąć w kilka rund.
Zobacz pióro Czysty saper CSS Bali Balo ( @bali_balo ) na CodePen .
Na powierzchni ten przełącznik może wyglądać całkiem prosto. Przechodzi przez wejście pola wyboru i przekazuje dane do serwera, chociaż nie jest to naprawdę imponująca część.
Ten przełącznik ma kilka cech, które czynią go jednym z najlepszych przełączników włączenia / wyłączenia frontendu:
W jakiś sposób ten włącznik włącza każde kliknięcie użytkownika i wykorzystuje to zdarzenie do animowania widoku przełączania dzień / noc. Wzory ikon słońce i księżyc są również ładnie stylizowane, biorąc pod uwagę, że działają tylko na CSS.
Zobacz pióro Przełączanie Pure Css "dzień i noc" Benjamin Réthoré ( @bnthor ) na CodePen .
Tradycyjne śledzenie myszy to praca JavaScript, która zgłasza współrzędne X / Y użytkownika na stronie.
Technicznie nadal potrzebujesz JavaScript, aby zebrać te współrzędne i zrobić z nimi coś użytecznego. Ale ten fragment pokazuje, że możesz zaprojektować czystą funkcję śledzenia myszy CSS, która podąża za każdym ruchem użytkownika.
Nie można tak naprawdę myśleć o praktycznym zastosowaniu, ale może to być fajne na stronie dowcipów.
Zobacz pióro Eksperymentalne, czyste śledzenie myszy CSS autor: Momcilo Popov ( @Momciloo ) na CodePen .
Wszyscy widzieliśmy wektorowe ikony i ilustracje przeznaczone do internetu . Ale co z całostronicowymi wektorami zaprojektowanymi z surowym kodem CSS i SVG?
To projekt parku rozrywki to eksperymentalny projekt, który działa tylko w przeglądarkach obsługiwanych przez SVG. Jednak w tych nowoczesnych przeglądarkach renderuje się bezbłędnie, a każdy element ma bardzo realistyczne umieszczenie na stronie.
Animacje są z pewnością imponujące, ale przykuwa moją uwagę również dokładność elementów SVG. Za kilka lat możemy znaleźć tego rodzaju ilustracje w Internecie, działające wyłącznie w kodzie, bez żadnych plików graficznych.
Zobacz pióro Płaski park rozrywki svg autorstwa Liny (animacja z CSS) Vladimir Gashenko ( @gxash ) na CodePen .
Projektowanie powtarzającej się animacji CSS, takiej jak koncepcja taśmy Möbius jest dość trudne. Ale dodać niektóre elementy 3D i różne gradienty? Teraz masz prawdziwe wyzwanie.
Ten fragment jest imponujący, biorąc pod uwagę, jak gładko wygląda i jak mało kodu jest używane (tylko 90 linii CSS). Z Hamlem potrzebujesz tylko 6 linii kodu, aby stworzyć całą koncepcję.
Przyznam, że to nie byłoby super przydatne na prawdziwej stronie internetowej, ale jest to świadectwo tego, ile możesz zrobić z kilkoma liniami kodu HTML i CSS.
Zobacz pióro Möbius 6hedrons (czysty CSS) przez Ana Tudor ( @thebabydino ) na CodePen .
Po użyciu tej aplikacji przez kilka sekund możesz mieć pewność, że działa ona na JavaScript. Dynamiczne zachowania, takie jak obrót 3D i umiejscowienie terenu, są oznaką słodkiej aplikacji webowej JS.
Ale ten interfejs twórcy map Vincenta Duranda to w 100% czysty CSS. Strzałki do obrotu, sam efekt obrotu i wszystkie funkcje "kliknij, aby wstawić" działają na CSS.
Warto wspomnieć, jak cała ta koncepcja jest renderowana za pomocą kostek 3D. Same bloki działają jak elementy 3D i można obracać kostki po prostu przez najechanie.
Bez wątpienia jeden z najbardziej szalonych zastosowań CSS, jaki widziałem od dłuższego czasu.
Zobacz pióro Pełny twórca mapy CSS Vincenta Duranda ( @onediv ) na CodePen .
Ten projekt jest trochę mniej interaktywny, ale wciąż zapiera dech w piersiach. Deweloper Peter Schmiz odtworzył wszystkie główne Ikony aplikacji na iOS 7 używając czystego HTML i CSS.
Żadna z tych ikon nie używa żadnych SVG ani plików graficznych. Każdy element każdej ikony jest zakodowany na stałe w HTML za pomocą elementu span / div, a następnie stylizowany za pomocą CSS. Najbardziej szalona jest ich dokładność!
Pełny zestaw zawiera 22 ikony i wszystkie są na miejscu. Jestem pod wielkim wrażeniem dbałości o szczegóły takich ikon, jak Mapy i Pogoda. Jeszcze więcej dowodów na to, że przy wystarczającej ilości czasu i cierpliwości można zaprojektować coś w CSS.
Zobacz pióro Ikony iOS 7 z czystym CSS Peter Schmiz ( @peterschmiz ) na CodePen .
Ponowne tworzenie animacji ładowania Slack przy pomocy CSS3 jest imponujące. Ale ten fragment odtwarza program ładujący Slack za pomocą jednego elementu na stronie. To właśnie nazywam poświęceniem.
Łączna liczba CSS dla tego fragmentu to nieco ponad 100 linii, które obejmują kolory logo Slack i efekty animacji.
Nie mogę powiedzieć, czy ten pomysł zadziałałby dla innych markowych ikon ładujących, ale jestem z pewnością pod wrażeniem tego.
Zobacz pióro Pojedynczy element Loack loader przez CrocoDillon ( @CrocoDillon ) na CodePen .
Znajdziesz dziesiątki niestandardowych projektów prętów 3D w CodePen z ich własnymi animacjami. Ale te paski 3D Rafael González wyróżnia się spośród wszystkich innych nowoczesnych wykresów słupkowych CSS.
Każdy z tych wykresów uruchom na flexbox w przypadku kontenerów, więc będą one automatycznie wymiarowane w zależności od liczby dodawanych słupków i wielkości pojemnika. Dodatkowo każdy wykres słupkowy ożywia się, gdy jest przesuwany do widoku, a wszystko kontrolowane jest przez czysty CSS.
A ponieważ rozmiar każdego paska jest ustawiony w em, możesz dostosować każdy pasek, aby skalować w sposób naturalny w oparciu o rozmiary czcionek przeglądarki. Sprytny przykład dowodzi, że nowoczesny CSS jest dużo bardziej elastyczny niż kiedykolwiek wcześniej.
Zobacz pióro Czyste paski CSS Rafael González ( @Rgg ) na CodePen .