18 samouczków CSS3 dotyczących efektów tekstowych i typografii internetowej

CSS3 do tej pory świetnie się bawił w tworzeniu stron internetowych. Jest szeroko stosowany. Powodem jego przyjęcia są możliwości rozwoju, które wnosi do stołu. CSS3 jest teraz w stanie praktycznie narysować wszystko na tablicy; jedynym wymaganiem jest bycie wykwalifikowanym projektantem, aby maksymalnie wykorzystać jego funkcjonalność.

Dzisiaj mam okazję zapoznać się z samouczkami dotyczącymi efektów tekstowych CSS3 i typografii internetowej.

Szukasz tych samych rzeczy? Następnie wylądowałeś we właściwym miejscu, ponieważ przejdziemy przez jedne z najlepszych samouczków CSS3 Text Effect w Internecie.

Zacznijmy.

Tworzenie tekstu 3D

Uwielbiam tekst 3D. Oferuje czytelnikom ogromną głębię, a twórcom daje poczucie osiągnięcia. Dzięki CSS3 tworzenie tekstu 3D to bułka z masłem.

Korzystając z kodu na stronie, możesz stworzyć tekst 3D. Możesz dostosować parametry i poeksperymentować, aby zrozumieć, jak to działa, a nawet zmodyfikować je, aby spełniały Twoje wymagania.

h1 {
  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);
}

Efekt typografii z CSS Text-Shadow

Druk typograficzny to popularny efekt tekstowy stosowany w przemysłowej metodzie druku. Nie ma potrzeby używania Photoshopa ani żadnego innego narzędzia do tworzenia efektu.

Twórz piękną typografię CSS3

Typografia jest jednym z kluczowych czynników wpływających na wrażenia użytkownika. Za pomocą tego samouczka możesz stworzyć piękną typografię CSS3. Samouczek jest podzielony na kroki i jest łatwy w użyciu.

Typografia internetowa z Lettering.js i CSS3

CSS3 jest potężnym zwolennikiem. Staje się bardziej użyteczny, jeśli jest używany z bibliotekami JS. W tym samouczku wykorzystasz możliwości CSS3 i Lettering.js (wtyczki opartej na jQuery do tworzenia ciekawej typografii sieci Web) do tworzenia potężnej typografii sieci Web.

Wstawka Typografia z CSS3

Wkładka Typografia jest całkiem fajna. W tym samouczku autor Andrew Roberts wyjaśnia, jak tworzyć typografię wstawek za pomocą samouczka CSS3. Przydatny samouczek dla każdego, kto chce poprawić swoje umiejętności typograficzne za pomocą CSS3.

Tekst obrysu przy użyciu właściwości obrysu tekstu CSS3

W tym samouczku zrozumiesz, jak utworzyć obrys tekstu wokół tekstu. Samouczek używa właściwości text-stroke CSS3 i ułatwia tworzenie tekstu z obrysem. Możesz także wybrać przezroczystość tekstu za pomocą funkcji przezroczystości obrysu.

Tworzenie efektu tekstu anaglificznego za pomocą CSS

Dzięki temu samouczkowi dowiesz się, jak tworzyć anaglyficzne efekty tekstowe za pomocą CSS. Anaglify to niesamowity sposób na tworzenie obrazów 3D poprzez majstrowanie między kanałami czerwonym, zielonym i niebieskim. Tekst można zobaczyć za pomocą szkła 3D, dzięki czemu zapewnia doskonałą wartość po użyciu.

Samouczek 3D CSS Shadow Text

Tekst Cień to jeden z ważnych aspektów tekstu. Dzięki temu samouczkowi możesz tworzyć tekst CSS 3D za pomocą „ZOOM” i wykonywać więcej sztuczek, jak pokazano w samouczku.

Samouczek zawiera świetne szczegóły dotyczące tworzenia tekstu cieni 3D CSS.

Zmiana domyślnego koloru zaznaczenia tekstu

Wybór tekstu jest pokazywany poprzez zmianę koloru tekstu. Jeśli nie wiedziałeś, że kolor można dostosować, teraz wiesz. Za pomocą samouczka możesz łatwo zmienić kolor zaznaczenia tekstu na swoim blogu.

Kolor jest ważny dla każdej marki. Używając głównego koloru jako koloru wyboru tekstu, programujesz swoich lojalnych klientów, aby myśleli o Tobie, jeśli zobaczą ten kolor. To dobry sposób na marketing i chcę, abyś wykorzystał go w swojej firmie i firmie klienta.

Fajne efekty tekstowe przy użyciu CSS3 Text-Shadow

CSS Text-Shadow to dość zaskakujący pakiet. W tym samouczku poznasz użycie pakietu Text-Shadow CSS3, używając go do tworzenia fajnych efektów tekstowych. Alfonse Surigao pisze samouczek.

Obrót tekstu za pomocą CSS

Obracający się tekst jest fajny do oglądania i możesz to zrobić, postępując zgodnie z tym prostym samouczkiem napisanym przez programistę Jonathana Snooka.

Książka kucharska CSS3

Jako programista i projektant zawsze dobrze jest mieć przy sobie książkę kucharską. Książka kucharska CSS3: 7 super łatwych przepisów CSS do kopiowania i wklejania, oferuje fajne przepisy do kopiowania i używania. Świetna strona do dodania do zakładek do wykorzystania w przyszłości.

Dodawanie obrysu do tekstu internetowego

Dzięki temu samouczkowi możesz łatwo pogłaskać tekst tak, jak powinien. Samouczek jest prosty i szczegółowo omawia ten temat. Posuwa się również do przodu i wyjaśnia granice głaskania tekstu internetowego.

Stosowanie gradientów tekstu CSS

W krótkim, 4-minutowym filmie dowiesz się, jak stosować gradienty tekstu. Film jest krótki, ale jest bardzo przydatny. Więc nie przegap tego.

Kocham Blur

Nic nadzwyczajnego, ale mała sztuczka, aby pokazać efekt rozmycia tekstu I Love Blur. Możesz go użyć do wysłania innej wiadomości w innym kontekście, dlatego warto nauczyć się sztuczki.

Plakat CSS bez obrazów

Eksperymentalny post, w którym autor próbuje stworzyć plakat bez obrazów. Osiąga to, używając uroczych bitów, takich jak border-radius, box-shadow, transform, @font-face, text-shadow, box-sizing i RGBa. Aby w to uwierzyć, musisz przejrzeć kod, który jest dostępny na stronie.

Rozmiar czcionki za pomocą Rem

Kolejny prosty artykuł Jonathana Snooka prowadzi nas do rozmiaru czcionki za pomocą REM. Artykuł jest niezwykle szczegółowy i pokochasz, ile miłości autor włożył w ten artykuł. Kolejny świetny samouczek wart dodawania zakładek do przyszłych odniesień.

Zakończyć

Nauka to ciągła ścieżka. To nigdy się nie kończy, dlatego przygotowaliśmy niesamowitą listę samouczków CSS3 dotyczących efektów tekstowych i typografii internetowej. Wiele samouczków jest niezwykle szczegółowych i warto poświęcić im czas. Inni przechodzą przez pewne efekty świetlne i są świetne do nauczenia się podczas długotrwałego użytkowania.

Mam nadzieję, że artykuł Ci się spodobał. Jeśli tak, nie zapomnij podzielić się nim ze znajomymi. Skomentuj także najlepszy samouczek, który Ci się podobał w Internecie. Chętnie uczymy się od Ciebie.

*ostatnia aktualizacja 03.02.2019