Sfery
Korzystając z właściwości CSS border-radius możemy stworzyć okrągłe kształty i koła. Po dodaniu gradientów staną się sferami. Zróbmy to i dodajmy animację, aby tchnąć w nie życie.
Płaski design
Istnieją dwa sposoby wykonywania sfer za pomocą CSS.
Jeden z nich to stworzenie sfery 3D za pomocą wielu elementów. Tutaj można zobaczyć ich piękne przykłady. Potencjalną wadą jest to, że wymagają od przeglądarki wyświetlania wielu elementów, które mogą mieć wpływ na wydajność. Mogą również wyglądać nieco gorzej, ponieważ wysokiej jakości sfera wymaga wielu elementów.
Zamiast tego, spróbuję drugiego sposobu, wykorzystując gradienty CSS, aby dodać cieniowanie i stworzyć efekt 3D na jednym elemencie.
Przykład i kod źródłowy
Wszystkie wymienione przykłady można zobaczyć na moim koncie Codepen lub wybierając linki "Edit on Codepen" w każdym przykładzie ponizej.
W przykładach kodu usunąłem wszystkie prefiksy przeglądarki. Zalecam skorzystanie z narzędzia Autoprefixer lub dodaj prefiksy w razie potrzeby
Podstawowy kształt
Przed dodaniem szczegółów, stworzymy początkowy kształt koła. Zaczynając od HTML:
<figure class="circle"></figure>
Używamy tutaj elementu figure, ale może to być dowolny element. Figure jest elementem wykorzystywanym w HTML5, aby przedstawić obraz lub diagram będący częścią treści, która może być usunięta bez wpływu na jej znaczenie.
Aby stworzyć koło z elementu figure, nadam mu szerokość i wysokość oraz ustawię promień ramki na 50%. Ponad 50% spowoduje całkowicie zaokrąglony róg.
.circle {
display: block;
background: black;
border-radius: 50%;
height: 300px;
width: 300px;
margin: 0;
}
Pojawia się koło.
Teraz kiedy mamy podstawowe koło, możemy zacząć zmieniać je w coś bardziej sferycznego.
Cieniowanie 101
Pierwsza rzecz o jakiej piszą w poradnikach to dodanie pojedynczego radialnego gradientu, przesunięcie go do góry i w lewo względem środka koła.
Możemy to zrobić korzystając z następującego kodu CSS.
.circle {
display: block;
background: black;
border-radius: 50%;
height: 300px;
width: 300px;
margin: 0;
background: radial-gradient(circle at 100px 100px, #5cabff, #000);
}
Powinno to wyglądać mniej więcej tak:
Radialne gradienty
Właściwość radial-gradient wymaga kilku ustawień. Pierwszym jest pozycja środkowa dla rozpoczynania gradientu. Zgodnie z formułą *shape* at *position*. W tym przypadku jest to koło z pozycją środkową ustawioną na 100 pikseli z lewej i 100 pikseli z góry.
Następna to określony zestaw kolorów. Możesz wybrać ponad dwa kolory, ale wtedy konieczne jest określenie odległości w każdym, tak aby gradient wiedział, kiedy przejść z jednego koloru na drugi.
W tym przykładzie określimy tylko dwa kolory. To pozwoli przeglądarce założyć, że pierwszy jest na 0%, a drugi 100% i rysuje gradient między tymi kolorami. Jeśli chcemy ustawić gradient inaczej, możemy określić odległości w pikselach lub procentowo jak zobaczymy później.
Teraz mamy coś co jest podobne do 3D. Wygląda dobrze, ale spróbujmy to nieco upiększyć.
Cienie i 3D
W zależności od rodzaju cieniowania zastosowanego na powierzchni, możesz tworzyć różne sfery. Ale najpierw wykonajmy scenę, w której umieścimy kulę.
HTML, którego użyjemy posiada jeszcze kilka elementów:
<section class="stage">
<figure class="ball"><span class="shadow"></span></figure>
</section>
Element kuli uzyskał znacznik span, którego użyjemy do stworzenia cienia i został owinięty div stage. div stage jest użyteczny, kiedy chcemy ustawić perspektywę i pozycję cienia sprawiając, że będzie wyglądał bardziej 3D.
Zastosuj kilka stylów do stage i pozycję cienia, aby ustawić scenę.
.stage {
width: 300px;
height: 300px;
display: inline-block;
margin: 20px;
perspective: 1200px;
perspective-origin: 50% 50%;
}
.ball .shadow {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
transform: rotateX(90deg) translateZ(-150px);
z-index: -1;
}
Zwróć uwagę, że nie pokazuję prefiksów w przykładowych fragmentach CSS. Przykłady z Codepen zawierają w pełni prefiksowe fragmenty CSS. W przykładzie powyżej ustawiłem div stage, aby uzyskać perspective wynoszącą 1,200 pikseli. Właściwość perspektywy jest jak znikający punkt w scenie 3D.
Cień kuli jest umieszczany poprzez nadanie radialnego gradientu, ale pozycjonowany przy wykorzystaniu transform. Transforms w CSS pozwalają obracać, skalować, przesuwać i pochylać rzeczy w przestrzeni 3D. Cień jest obrócony o 90 stopni według osi X i następnie przesunięty w dół o 150 pikseli od środka kuli.
Ponieważ ustanowiliśmy wartość perspektywy w kontenerze stage, końcowym rezultatem był rozciągnięty kształt owalny.
Zaczyna to wyglądać trochę lepiej. Dodajmy trochę więcej cieniowania do kuli.
Wielokrotne cieniowanie
W prawdziwym świecie bardzo rzadko zdarzają się obiekty oświetlone pod jednym kątem. Powierzchnie odbijają światło na inne powierzchnie i efektem tego są zmieszane różne źródła światła. Aby stworzyć bardzie realistyczną kulę, utworzymy światło z dwóch źródeł korzystając z pseudoelementu, aby dodać dwa gradienty.
.ball {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
border-radius: 50%;
position: relative;
background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
}
.ball:before {
content: "";
position: absolute;
top: 1%;
left: 5%;
width: 90%;
height: 90%;
border-radius: 50%;
background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
filter: blur(5px);
z-index: 2;
}
Tutaj mamy dwa nieco bardziej kompleksowe gradienty.
Pierwszy gradient jest subtelnym efektem oświetleniowym zastosowanym w elemencie kuli. Środek gradientu jest znajduje się w połowie w poprzek i na 120% wysokości kuli. To ustawia środek poza powierzchnię kuli. Zrobiłem to, żeby ostry kolor końcowy nie był widoczny powodując łagodniejszy gradient.
Drugi gradient jest podświetleniem umiejscowionym na górze. Jego wymiary mają 90% szerokości i 90% wysokości kuli. Gradient jest wyśrodkowany na górze tak, aby zanikł mniej więcej w połowie kuli.
Użyłem pseudo elementu before zamiast tworzenia nowego elementu zawierającego cieniowanie.
Ponieważ gradient podświetlenie ma ostrą krawędź, wykorzystałem efekt blur, aby złagodzić podświetlenie. Niestety jest to obecnie jedyna funkcja webkitu (Chrome i Safari), ale może być bardziej przydatna w przyszłości na innych przeglądarkach.
Oba gradienty łączą się, aby stworzyć o wiele lepszy efekt:
Bardziej Błyszczący
Efekt jest póki co całkiem łagodny, dodajmy trochę blasku i stwórzmy coś podobnego do kuli bilardowej.
Aby to uzyskać, wykorzystamy łagodne podświetlenie jak wcześniej, ale zmniejszymy i wyostrzymy górne podświetlenie. Musimy wykorzystać dwa pseudo selektory do przechowywania koloru kuli, dolnego podświetlenia i odbicia.
.ball {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
border-radius: 50%;
position: relative;
background: radial-gradient(circle at 50% 120%, #323232, #0a0a0a 80%, #000000 100%);
}
.ball:before {
content: "";
position: absolute;
background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
border-radius: 50%;
bottom: 2.5%;
left: 5%;
opacity: 0.6;
height: 100%;
width: 90%;
filter: blur(5px);
z-index: 2;
}
.ball:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 5%;
left: 10%;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
transform: translateX(-80px) translateY(-90px) skewX(-20deg);
filter: blur(10px);
}
Tutaj mamy początkowy kolor zastosowany jak subtelny gradient na kuli. Pseudo element before zawiera jaśniejsze podświetlenie, które zaczyna się na dole kuli i tworzy efekt odbitego światła od powierzchni.
Nowy dodatek to pseudo selektor after. On zawiera okrągły gradient, który zaczyna się białym kolorem na środku i zanika do około 24%. To tworzy efekt białego błysku, ale aby uzyskać efekt odbicia na trójwymiarowym obiekcie, zastosujemy CSS transform.
Transform przesuwa efekt błysku o 80 pikseli w lewo i 90 pikseli w góre i dodaje efekt nachylenia. Efekt nachylenia rozciąga koło wzdłuż osi X, aby efekt był podobny do połysku znajdującego się na błyszczącej kuli.
Kula 8
Jeśli już robimy kulę bilardową, wykonajmy dodatkowy krok i dodajmy cyfrę 8.
Potrzebujemy dodatkowy element przechowujący 8 jak również style zastosowane na kuli.
<section class="stage">
<figure class="ball">
<span class="shadow"></span>
<span class="eight"></span>
</figure>
</section>
.ball .eight {
width: 110px;
height: 110px;
margin: 30%;
background: white;
border-radius: 50%;
transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
position: absolute;
}
.ball .eight:before {
content: "8";
display: block;
position: absolute;
text-align: center;
height: 80px;
width: 100px;
left: 50px;
margin-left: -40px;
top: 44px;
margin-top: -40px;
color: black;
font-family: Arial;
font-size: 90px;
line-height: 104px;
}
100% Promień ramki jest ponownie wykorzystany do stworzenia koła i to koło jest umiejscowione w górnym prawym rogu przy wykorzystaniu właściwości transform. Zamiast wstawić cyfrę 8 w zawartość, użyję pseudo selektora before, aby dodać zawartość przez CSS i następnie nachylić cyfrę w podobny sposób do koła w którym się znajduje.
Rezultatem jest błyszcząca kula 8.
Ma na ciebie oko
Jedną ze świetnych rzeczy o transformacji CSS to możliwość animacji. Korzystając keyframes CSS do animacji, możesz opisać serie transformacji jako animację i zastosować ją w elemencie. Aby to pokazać, stworzę i zaanimuję gałkę oczną.
Pierwszym krokiem jest dostosowanie niektórych kolorów wykorzystywanych w przykładzie kuli 8. Kilka poprawek i bardziej wygląda jak oko. Najpierw HTML:
<section class="stage">
<figure class="ball">
<span class="shadow"></span>
<span class="iris"></span>
</figure>
</section>
Większość CSS jest podobna do kuli 8 z wyjątkiem tęczówki i części źrenicy.
.iris {
width: 40%;
height: 40%;
margin: 30%;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
position: absolute;
animation: move-eye-skew 5s ease-out infinite;
}
.iris:before {
content: "";
display: block;
position: absolute;
width: 37.5%;
height: 37.5%;
border-radius: 50%;
top: 31.25%;
left: 31.25%;
background: black;
}
.iris:after {
content: "";
display: block;
position: absolute;
width: 31.25%;
height: 31.25%;
border-radius: 50%;
top: 18.75%;
left: 18.75%;
background: rgba(255, 255, 255, 0.2);
}
Niebieski gradient formuje kolorową część tęczówki, a następnie źrenicę i tworzone jest podświetlenie jako pseudo elementy. Dodałem również właściwość animacji do elementu tęczówki. Animacje są dołączone do elementów wykorzystujących taki format:
animation: animation-name 5s ease-out infinite;
W tym przypadku zastosujemy animację o nazwie "animation-name", ustawimy jej trwanie na 5 sekund, zapętlimy i zastosujemy wartość łagodzenia "easy-out". Ease-out oznacza, że animacja zwalnia, gdy osiąga koniec tworząc bardziej naturalny efekt.
Bez utworzonej animacji, mamy bardzo statyczną gałkę oczną.
Utwórzmy kilka klatek kluczowych, aby opisać jak gałka oczna powinna się poruszać.
@keyframes move-eye-skew {
0% {
transform: none;
}
20% {
transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
}
25%, 44% {
transform: none;
}
50%, 60% {
transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
}
66%, 100% {
transform: none;
}
}
Klatki kluczowe w CSS mogą wydawać się trochę skomplikowane na początku. To co teraz robimy to opisujemy stan elementu w serii etapów. Każdy stan jest mapowany procentowo. W tym przypadku tęczówka zacznie bez stosowania trasnformacji. Następnie przy 20% nastąpi przeniesienie i nachylenie do lewej. Przerwa między 0 a 20% jest automatycznie obliczana przez przeglądarkę tworząc łagodne przejście między tym dwoma punktami.
Sytuacja powtarza się w każdej klatce kluczowej i cała animacja w tym przypadku trwa 5 sekund jak określono wcześniej.
Nie zapomnij utworzyć moz, ms, o i wersji bez prefiksu animacji klatek kluczowych, ponieważ niektóre przeglądarki wymagają prefiksów.
Bąbelki
Używając kombinacji cieniowania i animacji można wykonać różnego rodzaju interesujące i zróżnicowane efekty. Co myślisz o bąbelkach?
Tworzenie bąbelka wygląda podobnie, ale musimy wykorzystać więcej przeźroczystości w głównym kolorze i dwa pseudo elementy, aby dodać połysk.
Animacja wykorzystuje transformacje scale, aby bąbelek się kołysał.
@keyframes bubble-anim {
0% {
transform: scale(1);
}
20% {
transform: scaleY(0.95) scaleX(1.05);
}
48% {
transform: scaleY(1.1) scaleX(0.9);
}
68% {
transform: scaleY(0.98) scaleX(1.02);
}
80% {
transform: scaleY(1.02) scaleX(0.98);
}
97%, 100% {
transform: scale(1);
}
}
Animacja dotyczy całego bąbelka i jego pseudo elementów.
Wykorzystując obrazy
Jak dotąd wszystkie kule zostały stworzone bez wykorzystania żadnych obrazów. Stosując obraz w tła można dodać więcej szczegółów i nadal wykorzystać cieniowanie CSS w pseudo elementach. Na przykład, nieosłonięta tekstura piłki tenisowej:
Dodanie kilku gradientów CSS może stworzyć iluzję głębi.
Dookoła świata
Animacja może być tez zastosowana do pozycji obrazów tła. Korzystając z tego, możemy stworzyć obracający się globus.
Płaski obraz został delikatnie rozciągnięty na górze i dole, aby można było go wykorzystać jako obraz tła.
Z dodatkiem cieniowania i animacja. można stworzyć globus w 3D. Wybierz "Result" w Codepen, aby zobaczyć go w akcji. Ustawiłem domyślne wyświetlanie HTML, ponieważ wydajność tego przykładu była całkiem niska powodując zwiększenie szybkości wentylatora w moim laptopie.
Uwaga: Wielkie podziękowania dla Sidoruk Sergey (@Sidoruk_SV) za rozbudowę tego globu. Wygląda świetnie.
Zasoby
Kilka dobrych informacji o radialnych gradientach, jeśli chcesz się dowiedzieć więcej.
Szukasz więcej przykładów 3D? Odwiedź Portal CSS po inspiracje.
Opinie
Wszystkie wspomniane przykłady możesz zobaczyć na moim koncie Codepen. Serdeczne podziękowania dla Chrisa i zespołu tworzącego niesamowite zasoby.
Jeśli masz jakieś pytania dotyczące poradnika, skontaktuj się przez email lub Twitter.
Make sure to follow on Twitter for all the latest updates!