Jeśli masz i szukasz pomysłów na to, jak sprawić, by strony internetowe okazały się kolejną wielką rzeczą po Pieśni ognia i lodu (seria Gra o tron dla populacji nieczytającej książek) bez grabienia mózgów, sprawdź te 15 CSS3 efekty, które dla Ciebie przygotowaliśmy.

Od samouczków po oferty — mamy dla Ciebie 15 niesamowitych efektów, które zmienią strony internetowe od bla do wow!

Efekt paralaksy

Czy przeglądałeś stronę internetową ihatetomatoes świętującą 25-lecie Game Boya Nintendo? Gdzie ty też grałeś w Tetrisa?

A może przeglądając stronę internetową Rimmel zachwycony tym, jak genialnie prezentują się przedmioty na kolorowym tle modeli?

Efekt 3D, który wydaje się być obecnie największym zachwytem w projektowaniu, jest technicznie nazywany efektem paralaksy. Projektanci uwielbiają się nimi bawić, ale musisz być subtelny i strategiczny, ponieważ może to przynieść odwrotny skutek i doprowadzić do bałaganu.

Efekt paralaksy lub przewijanie paralaksy jest wynikiem ładowania tła z mniejszą prędkością niż pierwszy plan, tworząc bardziej trójwymiarowy wygląd. Czy to brzmi jak dużo pracy? Nie dla kogoś, kto pracuje sprytnie, zdobądź całkowicie gotowy motyw paralaksy już w Cyberchimps.

Efekt Kena Burnsa

Twórca filmów dokumentalnych był pionierem koncepcji panoramowania i powiększania statycznego obrazu. Grafik wykorzystywał ten efekt obficie i mogłeś się z nim nawet spotkać na wielu stronach internetowych.

Efekt nie tylko kieruje gałki oczne dosłownie tam, gdzie ma być skupiona, ale także dodaje odrobinę intensywności obrazowi. Czy pamiętasz, jak oglądałeś film, w którym stare zdjęcie błysnęło na ekranie, a narrator mówi o czymś na zdjęciu, podczas gdy kadr powoli przesuwa się i przybliża do tego tematu?

Efekt Kena Burnsa stał się dość popularny i słusznie, ponieważ zapewnia natychmiastowy lifting każdej nudnej stronie internetowej.

Półokrągłe menu nawigacji

Nie musisz iść na całość, aby zmienić wygląd swojej witryny. Czasami może pomóc tak mało, jak pozbycie się opcji starych i nudnych mężczyzn.

Zamiast tego wybierz stylową, okrągłą lub półkolistą opcję nawigacji, która pomaga zaprezentować wiele opcji menu. Niektórzy projektanci dołączają to tylko do przycisków udostępniania w mediach społecznościowych, ale byłbyś zaskoczony jego wszechstronnością.

Od oczywistej konsoli muzycznej i ikon udostępniania w mediach społecznościowych, po menu główne i ikony profili, istnieje wiele sposobów na wykorzystanie tego.

Nie chcesz grzebać sobie w głowie, tworząc ten efekt CSS3 od podstaw? Zdobądź jeden jako gratis od DealFuel.

Pokaż/ukryj panel logowania

Przesuwane panele są obecnie powszechnie używane, ale głównie po to, aby zmniejszyć obciążenie zbyt wielu zakładek. Niewielu projektantów eksperymentuje z potencjałem tej opcji, ponieważ przesuwne panele mogą być korzystne na tak wiele sposobów.

Prezentuj tematy treści, stwórz uporządkowany wygląd, podnieś estetykę lub po prostu odróżnij się od konwencjonalnie zaprojektowanych stron internetowych. Panel logowania Pokaż/Ukryj jest koniecznością dla każdej witryny WordPress, zapewnia przegląd pulpitu nawigacyjnego z wieloma opcjami menu po zalogowaniu. Dowiedz się więcej o tym panelu tutaj.

Slider Formularz logowania

Inna opcja panelu logowania, która przesuwa się, aby odsłonić więcej treści, jest świetnym posunięciem, gdy chcesz, aby subskrybenci umieścili nieco więcej informacji niż tylko adres e-mail i nazwisko, ale jednocześnie nie chcą ich przytłoczyć.

Ogranicz też przestrzeń, zdecydowanie sprawdź to, ponieważ przydałoby się, gdy tworzysz strony internetowe o minimalistycznej tematyce.

Wstążki 3D i efekty 3D

Jeśli nadal onieśmiela Cię efekt paralaksy i boisz się, że coś schrzanisz, zacznij od małych kroków. Użyj wstążek 3D, różnych odcieni i cieni, aby stworzyć ogólną iluzję głębi w swojej witrynie, renderując w ten sposób efekt 3D.

Wstążki 3D same w sobie wyglądają absolutnie niesamowicie. Użyj tego, aby wyróżnić część witryny lub oficjalny dokument certyfikacyjny, który chcesz umieścić, co zwiększy ogólną atrakcyjność wizualną strony.

Dowiedz się, jak stworzyć efekt za pomocą CSS3 na pvmgarage.

Efekt pokrycia

Używany głównie w witrynach opartych na książkach, z pewnością widziałeś ten efekt na komputerze Mac lub urządzeniu Apple podczas przeglądania zdjęć. Efekt Coverflow prezentuje szereg elementów – takich jak okładki książek – w których można następnie przesunąć palcem w lewo lub w prawo, aby wyświetlić okładkę, wyświetlić wyskakujące szczegóły i wybrać je.

Czy to brzmi interesująco? Czy chciałbyś to zaimplementować w projekcie? Jeśli tak, to zdecydowanie przejrzyj ten artykuł.

Przejścia CSS3

Projektanci, którzy grają sprytnie, a nie twardo, wiedzą, że nie trzeba wiele, aby dodać mojo do swojej witryny, zmiana motywu tutaj, kilka elementów cienia i cienia i faktycznie można przekształcić swoją stronę. Innym sposobem na to jest animowanie zawartości strony za pomocą przejść CSS3.

Od odstępów między literami po cienie tekstu — baw się wszystkim, co lubisz, aby zobaczyć, co najlepiej pasuje. Ponadto, oto świetny darmowy dodatek zawierający kompleksową gamę efektów przejścia.

Animacja CSS3 o tematyce śnieżnej

Nadal odczuwasz skutki okresu świątecznego? Śnieżne animacje CSS3 nie tylko mają świąteczny akcent, ale także działają wyjątkowo dobrze na niektórych stronach internetowych, takich jak marka lodów.

Jest szybki i łatwy w użyciu i może zmienić wygląd Twojej witryny lub strony bloga, aby uzupełnić temat lub sezon.

Animacja

Animacje mogą zdziałać cuda na stronach internetowych, nawet jeśli są wykonane subtelnie. Przyciąga uwagę i pomaga również w konwersjach, ponieważ uwaga jest kierowana na wezwanie do działania.

Lub po prostu dodaje do wartości nominalnej strony, jeśli nic więcej. Oto kilka świetnych specjalnych efektów animacji, które możesz sprawdzić.

Efekt typograficzny

Prawdopodobnie widziałeś te posty z cytatami na Instagramie z wyciętym tekstem? Tak właśnie wygląda efekt Letterpress, który staje się również dość popularny w projektowaniu stron internetowych.

Ma to odwrotny charakter pisma, ale ma elegancki i elegancki wygląd. Zdecydowanie zalecane, jeśli twoja jest publikacją online lub blogiem. Ponadto, jeśli chcesz wprowadzić odrobinę profesjonalizmu bez przechodzenia na cały pakiet C, to pomoże. Oto samouczek, w jaki sposób możesz użyć efektu typografii w CSS3.

Odwracanie koła

Trochę informacji nie tylko nigdy nikomu nie zaszkodzi, ale może również być USP strony. Witryna taka jak ta, która przy każdym odświeżeniu wyświetla przypadkowe fakty, mogłaby zostać przekształcona w coś w rodzaju galerii ze zdjęciami z małym uchwytem, który po kliknięciu otwiera się, pokazując zabawne ciekawostki.

Ale nawet w zwykłych witrynach obracający się krąg ma duże znaczenie. Kompresuje informacje, więc nie masz strony wypełnionej tekstem. Ma też fajne wrażenie 3D. Oto samouczek dotyczący tworzenia obracającego się koła.

Megamenu

Prawdopodobnie widziałeś je na stronach e-commerce, gdzie wiele kategorii trzeba umieścić bezpośrednio na stronie docelowej, ale bez tworzenia zatłoczonego paska menu.

Opcja Mega Menu jest również koniecznością dla branży edukacyjnej, czy masz witrynę internetową uniwersytetu, która prezentuje wszystkie główne kursy, informacje o przyjęciu, wyniki studentów i wiele więcej?

Mega Menu może pomóc w uporządkowaniu, stworzeniu ostrzejszej, bardziej eleganckiej opcji paska menu i nie mylić czytelników z klikaniem niewłaściwej opcji z powodu dłuższych, bardziej dusznych opcji menu. Możesz także zdobyć wiele, pobierając za darmo responsywne Mega Menu .

Galeria Akordeon

Istnieją dwa sposoby na utrzymanie zaangażowania czytelników w Twojej witrynie, rozpowszechnianie potężnych treści i zwrócenie ich uwagi na te potężne treści. Statyczna strona może przyciągnąć wzrok czytelnika, ale coś interaktywnego, takiego jak Galeria akordeonu, przyciągnie wzrok czytelnika.

Galerie akordeonowe – niezależnie od tego, czy zdecydujesz się zaprezentować swój najlepszy kawałek portfolio, czy zwrócić uwagę na swój najlepiej sprzedający się produkt – zawsze będą działać. Masz tylko 6 sekund, aby przykuć uwagę czytelnika i utrzymać go na stronie, skorzystaj z galerii Harmonijka, aby przyciągnąć i utrzymać jego uwagę na Twojej stronie znacznie dłużej. Oto świetna, adaptowalna wtyczka Accordion Gallery, którą możesz pobrać za darmo.

Lightbox

Jak ważna jest galeria siatki? Jeśli jesteś fotografem, artystą lub po prostu blogerem, może to oznaczać kolejny wielki koncert.

Galeria siatki przedstawia wszystkie Twoje najlepsze prace na widoku! Od oszałamiającego ujęcia zachodu słońca na szczycie wzgórza po intensywny portret uliczny, zaskocz ich, przekaż im wiadomość lub po prostu zachęć ich do wygrania kontraktu, galeria z siatką może być Twoim najlepszym życiorysem.

Jako projektant powinieneś wziąć to pod uwagę nie tylko w przypadku pracy swojego klienta, ale także w przypadku własnej witryny. Spraw, by Twoja praca była dla Ciebie mistrzem i ręcz za swoją kreatywność, galeria z siatką jest na wagę złota.

Ale dostaniesz to za darmo w tej umowie, więc weź to teraz!

Który z nich poleciłbyś znajomemu?

AffiAi