Tekst 3D CSS
Przykład 1
W tym przykładzie najpierw musimy utworzyć plik HTML przed utworzeniem pliku CSS. Wykonamy przykłady w studio kodu wizualnego. Musisz utworzyć nowy plik z nazwą pliku i użyć „.rozszerzenie pliku HTML ”dla pliku HTML. Następnie napisz następujący kod renderowania „Hello World” w przeglądarce.
Najpierw musimy wymienić typ dokumentu, który jest tutaj „HTML”. Pamiętaj o jednej rzeczy, którą musimy otworzyć, musi zostać zamknięta za pomocą zamykania znacznika. Ponieważ zamykający znacznik „” będzie „.„Następnie dodaj tag„ ”i wewnątrz tego znacznika„ ”mamy nowy tag, którym jest znacznik„ meta ”; Ustawiamy zestaw znaków jako „Charset”, który jest „UTF-8”. Pozwoli na używanie większej liczby znaków w dokumencie.
Następnie otwórz znacznik „” i dodaj tytuł, który jest tutaj „Dokument”, a następnie zamknij ten znacznik „” za pomocą „.„Następnie musimy podać link do pliku„ CSS ”. W tym celu używamy znacznika „linku” i tutaj atrybut „REL” do zdefiniowania związku między połączoną stroną a bieżącą stroną, która jest wymieniona jako „arkusz stylów” tutaj.
Następnie używany jest „Href” i podajemy nazwę naszego pliku „CSS”, który chcemy połączyć z tym plikami „HTML”. Nazwa naszego pliku „CSS” to „styl.CSS ”Zamknij tutaj metkę„ ”. I otwórz nowy tag nadwozia ”.„W tym ciele mamy„ klasę span ”, która jest równa„ tekstowi ”i akceptuje tekst, który jest napisany jako„ Hello World.”Ponadto, zamknij ten tag jako„. Następnie zamknij wszystkie pozostałe tagi. Pozostałym znacznikiem, którego nie zamknęliśmy, to znacznik ciała, i w końcu zamykamy znacznik za pomocą odpowiednio „i tagów. Następnie musisz po prostu zapisać ten plik. I przejdź do „stylu.plik CSS ”do stylizacji i nadania temu tekstowi efektu 3D.
Teraz musisz utworzyć kolejny plik o nazwie, który otrzymasz w „HREF”, a my podajemy „styl.nazwa pliku CSS ”do łączenia. Tak więc stworzyliśmy nasz plik „CSS” o tej nazwie. W tym „stylu.plik CSS ”wykonamy styl na tekście.
Dodamy styl. Począwszy od ciała, nadajemy kolor tła jako „Dimgrey.„Następną rzeczą, którą zrobiliśmy, jest stylizacja tekstu, a pozycja tekstu jest tutaj„ absolutna ”, która ustawi tekst, w którym chcemy go umieścić. Teraz podajemy marginesy „top” i „właściwych” jako odpowiednio „20%” i „30%”. Używamy „Transform: Tłumacz (50% - 50%)”, a używając tego, możemy obracać, wypaczać lub tłumaczyć nasz tekst.
Przejdźmy do przodu i przekształć nasz tekst w „wielki.„Zamierzamy ustawić rodzinę czcionki na„ Verdana.„Następnie zwiększ rozmiar czcionki do„ 6EM ”i„ Was-W-W-Waight ”do„ 500 ”. „Was-czcionka” ustawia grubość i cienkość czcionki. Ustawiliśmy „kolor” czcionki jako „brązowy.„Tutaj dodamy wiele warstw cienia tekstu. Pierwsza wartość jest używana do przesunięcia poziomego, które zamierzamy ustawić jako „1px”, co oznacza 1 piksel, a druga wartość dotyczy przesunięcia pionowego, które jest ponownie „1px, a trzeci dotyczy„ Blur ”, który jest również „1px”, a kolor, który zamierzamy wybierać, to „#919191”, który znów jest odcieniem szarości.
Teraz dodamy kolejną warstwę, w której używamy przesunięcia poziomego jako „1px”, ale pionowo jako „2px”. Tak samo jak powyżej, zmienimy przesunięcie pionowe w każdej linii, ale przesunięcie poziome i rozmycia będą takie same, jak pokazano na obrazie. Tak więc shadow tekstowy nabrze kształtu. Wtedy mamy ostatnią rzecz do zrobienia, musimy dodać jeszcze kilka warstw tekstowych, ale tym razem użyjemy wartości kolorów „RGBA”, w których „R” jest dla „czerwonych”, „g” jest W przypadku „zielonego”, „B” jest dla „niebieskiego” i „a” dla wartości „alfa”. Ustawiliśmy przesunięcie poziome jako „1px”, przesunięcie pionowe jako „18px”, przesunięcie „rozmycia” jako „6px”, a „RGBA” jest ustawione jako „(16, 16, 16, 0.2) „Gdzie„ 16 ”jest dla czerwonego, następny„ 16 ”jest dla zielonego, inne ostatnie„ 16 ”jest dla niebieskiego, a wartość kanału alfa jest ustawiona jako„ 0.4 ”. W następnych wierszach zmieniamy pionowe przesunięcia i rozmycie obszarów w każdej linii. Ostatnią rzeczą, którą robimy, jest również zmiana kanału alfa.
W kodzie Visual Studio uruchamiamy ten kod w przeglądarce, więc w tym celu przejdź do „Rozszerzenie” lub naciśnij „Ctrl+Shift+X” i wyszukiwaj „Otwórz w przeglądarce” i instaluje go.
Po zainstalowaniu tego musisz kliknąć prawym przyciskiem myszy plik HTML i kliknąć „Otwórz w domyślnej przeglądarce” lub naciśnij „Alt + B”, aby otworzyć ten kod w przeglądarce. Następnie na ekranie renderuje się następujące dane wyjściowe.
Przykład nr 2
W tym przykładzie używamy tego samego pliku HTML, ale użyjemy tutaj innego arkusza stylów. Podamy nazwę innego pliku „CSS” z tym samym kodem „HTML”. Nazwa drugiego pliku „CSS” to „Stylesheet1.CSS ”, jak pokazano poniżej.
W pliku CSS zmieniamy kod i zmieniamy efekt 3D tekstu podanego w naszym pliku HTML. Wypróbujmy ten kod.
Tutaj ustawiamy kolor tła „Blue-Violet.”, A„ pozycja ”tekstu jest absolutna jak w powyższym przykładzie, ale tutaj ustawiamy najwyższe wartości jako„ 15px ”i„ lewy ”jako„ 25px ”. W transformacji ustawiamy „Skew (-63dg)” i „skala (1,.5) ”. „Skew” wypaczy elementy do „-63dg” poziomo. Funkcja „skali” zmieni rozmiar elementów w kierunku poziomym i pionowym. Obie są wbudowanymi funkcjami. Następnie mamy transformację tekstu „Transform: dziedziczy”, która wyświetla tekst tak samo, jak w pliku HTML. Używamy „rodziny czcionki” jako „Times New Roman”, „wielkości czcionki” to „7EM”, a waga „Waseight Font-Weight” to „500”.
Ustawiamy tutaj „kolor” czcionki „biały”. Następnie zastosujemy właściwość „shadow tekstu”. W tym ustawiamy poziome przesunięcie jako „-1px”, przesunięcie pionowe jako „-1px”, rozmycie jako „1px” i wybierają kolor „#808080”, który jest kodem koloru szarego. W następnych wierszach zmienimy wszystkie przesunięcia poziome i pionowe, ale przesunięcie rozmycia i kolor będą takie same. Dodamy więcej warstw tekstowych, ale tutaj używamy wartości „RGBA”. W tym (0, 0, 128, 0.75), ustawiamy „0” dla „czerwonego”, „0” dla „zielonego”, „128” dla „niebieskiego” i „0.75 ”dla„ Alpha.„„ Index Z ”jest tutaj do kontrolowania pionowej kolejności elementu, który nakłada się. Wyjście jest tutaj.
Wniosek
Napisaliśmy dla Ciebie ten przewodnik, abyś mógł zrozumieć działanie tekstu 3D w kodzie Visual Studio. Przeprowadziliśmy te przykłady, które podano w tym przewodniku w studio kodu wizualnego. Omówiliśmy, w jaki sposób tworzymy pliki HTML i. Ten przewodnik pomoże ci zrozumieć użycie „HTML” i „CSS."