Efekt tekstowy 3D z CSS

Zobaczmy, jak to się robiBędziemy potrzebować:

• Podstawowa znajomość HTML i CSS
• Edytor kodu
• Nasza przeglądarka

Krok 1

Stworzymy folder w naszej lokalnej witrynie, aby zapisać pliki, których będziemy potrzebować, nazwę go "text_3d" w nim inne wywołanie css
POWIĘKSZAĆ
POWIĘKSZAĆ

Krok 2

Przejdziemy do edytora kodu i utworzymy nowy plik index.html, który zapiszemy w katalogu głównym folderu „3d_text”, który utworzyliśmy w poprzednim kroku, w którym napiszemy naszą podstawową strukturę html i dodamy referencję do plik css o nazwie „style.ccs”, który stworzymy później.
Kod HTML

Krok 3

W korpusie dodamy kreskę, w której umieścimy etykietę

do której przypiszemy klasę „tekst 3d”, którą następnie utworzymy w pliku .css, umieszczę dowolny tekst wewnątrz tej etykiety do przetestowania.

Efekt tekstu 3-D

Jeśli zobaczymy go teraz w przeglądarce, nie zobaczymy większych zmian, tylko normalny i aktualny tekst, abyśmy mogli mieć wygląd 3d, konieczne jest zdefiniowanie niektórych właściwości przez css. Idź po to.
POWIĘKSZAĆ

Krok 4

W naszym edytorze kodu utworzymy nowy plik .css, który nazwę style.css w tym umieścimy właściwości tak, aby nasz tekst miał ten efekt 3D, który chcemy osiągnąć.

Krok 5

Zaczniemy edytować nasz css, najpierw określimy rozmiar naszego ciała, w tym celu nadamy mu pozycję bezwzględną o szerokości i wysokości 100%.

 ciało {pozycja: bezwzględna; szerokość: 100%; wzrost: 100%} 

Krok 6

Napiszemy w naszym .ccs właściwości klasy „3d-text”, którą skomentowaliśmy w kroku 3. Zaczniemy od zdefiniowania czcionki, szczególnie lubię używać czcionki „Helvetica Neue”, oczywiście możesz użyj go z wybraną czcionką. W tym przypadku ustawię rozmiar czcionki na około 80px; bold czy bold type… I tym razem zostawię to na biało. Jeśli zobaczymy go w naszej przeglądarce, zauważymy, że tekst zniknął, to znaczy, że umieściliśmy go na biało, a tło przeglądarek też jest białe…

 ciało {pozycja: bezwzględna; szerokość: 100%; wysokość: 100%} .3d_text {rodzina czcionek: "Helvetica Neue", Helvetica, Arial, bezszeryfowy; rozmiar czcionki: 80px; grubość czcionki: pogrubiona; kolor: #fff; } 

W przeglądarce zobaczymy, że tekst znika
POWIĘKSZAĆ

Krok 7

Widzieliśmy, że w poprzednim kroku tekst zniknął, teraz potrzebujemy, aby się pojawił i z efektem 3D. W tym celu wystarczy dodać cień do naszego tekstu za pomocą właściwości text-shadow w następujący sposób.

 ciało {pozycja: bezwzględna; szerokość: 100%; wysokość: 100%} .3d_text {rodzina czcionek: "Helvetica Neue", Helvetica, Arial, bezszeryfowy; rozmiar czcionki: 80px; grubość czcionki: pogrubiona; kolor: #fff; cień tekstu: 0 1px 0 #ccc; } 

POWIĘKSZAĆ

Widzimy, że osiągnęliśmy lekki efekt cieniowania, ale to nie wystarczy, aby wyglądało to na 3D, na szczęście css pozwala nam połączyć kilka cieni we właściwości text-shadow oddzielonych przecinkiem, wykorzystamy to, aby umieścić wiele cienie w innej odległości od naszego tekstu i z różnymi odcieniami kolorów od ciemniejszego do jaśniejszego, aby uzyskać efekt, ale musimy również połączyć te cienie za pomocą kolorów i przezroczystości rgba, aby uzyskać efekt rozproszenia na końcu zacienienie.
W ten sposób nasz kod css wyglądałby tak.

 ciało {pozycja: bezwzględna; szerokość: 100%; wysokość: 100%} .3d_text {rodzina czcionek: "Helvetica Neue", Helvetica, Arial, bezszeryfowy; rozmiar czcionki: 80px; grubość czcionki: pogrubiona; kolor: #fff; text-shadow: 0 1px 0 #ccc, 0 2px 0 # c9c9c9, 0 3px 0 #bbb, 0 4px 0 # b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba (0, 0, 0, .1), 0 0 5px rgba (0, 0, 0, .1), 0 1px 3px rgba (0, 0, 0, .3), 0 3px 5px rgba (0, 0, 0, .2), 0 5px 10px rgba (0 , 0, 0, .25), 0 10px 10px rgba (0, 0, 0, .2), 0 20px 20px rgba (0, 0, 0, .15); } 

A wynik efektu byłby następujący …
POWIĘKSZAĆ
To wszystko na razie tutaj jest .zip z plikami, wszelkie pytania lub sugestie można przesyłać poprzez komentarze, pozdrowienia…
text_3d20150917130359.zip 694 bajty 217 pobrańPodobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt