CSS3 wprowadził niezliczone możliwości dla projektantów UX, a najlepsze w nich jest to, że najfajniejsze części są naprawdę łatwe do wdrożenia.
Tylko kilka linii kodu da Ci niesamowity efekt przejścia, który podnieci Twoich użytkowników, zwiększy zaangażowanie, a ostatecznie, gdy zostanie dobrze wykorzystany, zwiększ liczbę konwersji. Co więcej, efekty te są przyspieszane sprzętowo i stopniowe ulepszenia, z których można korzystać już teraz.
Oto 8 naprawdę prostych efektów, które dodadzą życie Twojemu interfejsowi i uśmiechną się do twarzy użytkowników.
Wszystkie te efekty (pasek pierwszy) są kontrolowane za pomocą właściwości przejścia. Widzimy więc, że te efekty działają, a my utworzymy div na stronie HTML:
Po wykonaniu tej czynności ustaw jej szerokość i wysokość (czyli wymiary), kolor tła (abyśmy mogli go zobaczyć) i jego właściwość przejścia.
Właściwość przejścia ma trzy wartości: właściwości do przejścia (w naszym przypadku wszystkie z nich) do prędkości przejścia (w naszym przypadku 0,3 sekundy) i trzecią wartość, która pozwala zmienić sposób obliczania przyspieszenia i hamowania, ale my " Trzymam się wartości domyślnej pozostawiając to pole puste.
Teraz wszystko, co musimy zrobić, to zmienić właściwości i będą one animować dla nas ...
Jeśli chcesz śledzić dalej, możesz pobierz tutaj pliki demonstracyjne.
Gdy sprawy bledną, jest to dość powszechna prośba klientów. To świetny sposób na podkreślenie funkcjonalności lub zwrócenie uwagi na wezwanie do działania.
Efekty zanikania są kodowane w dwóch krokach: najpierw ustawiasz stan początkowy; następnie ustaw zmianę, na przykład po najechaniu kursorem:
.fade{opacity:0.5;}.fade:hover{opacity:1;}(Upewnij się, że ustawiłeś klasę div na "zanikanie", aby zobaczyć, że działa.)
Aby wyhodować element, używałeś jego szerokości i wysokości lub wypełnienia. Ale teraz możemy użyć transformacji CSS3, aby powiększyć.
Ustaw klasę div, aby "rosła", a następnie dodaj ten kod do swojego bloku stylu:
.grow:hover{-webkit-transform: scale(1.3);-ms-transform: scale(1.3);transform: scale(1.3);}Transformacje CSS mają wiele różnych zastosowań, a jedną z najlepszych jest transformacja obrotu elementu. Daj swojemu divowi klasę "obróć" i dodaj do swojego CSS następujące elementy:
.rotate:hover{-webkit-transform: rotateZ(-30deg);-ms-transform: rotateZ(-30deg);transform: rotateZ(-30deg);}Cienie 3D były niezadowolone przez rok lub dłużej, ponieważ nie były postrzegane jako zgodne z płaską konstrukcją, co jest oczywiście nonsensem, działają fantastycznie, dając użytkownikom opinie na temat ich interakcji i pracując z płaskimi lub fałszywymi interfejsami 3D .
Efekt ten uzyskuje się, dodając cień pola, a następnie przesuwając element na osi X za pomocą właściwości przekształcania i translacji , tak aby wydawał się wyrastać z ekranu.
Podaj swój div klasie "threed", a następnie dodaj następujący kod do swojego CSS:
.threed:hover{box-shadow:1px 1px #53a7ea,2px 2px #53a7ea,3px 3px #53a7ea;-webkit-transform: translateX(-3px);transform: translateX(-3px);}Jednym z najgorętszych stylów przycisków jest przycisk upiorów; przycisk bez tła i ciężkiej granicy. Możemy oczywiście dodać obramowanie do elementu, ale to zmieni położenie elementu. Możemy rozwiązać ten problem za pomocą rozmiarów skrzynek, ale o wiele prostszym rozwiązaniem jest przejście w ramce przy użyciu cienia wstawionego pudełka.
Daj divowi klasę "border" i dodaj następujące style CSS do swoich stylów:
.border:hover{box-shadow: inset 0 0 0 25px #53a7ea;}