18 Tutorial Efek Teks dan Tipografi Web CSS3

CSS3 sudah memiliki waktu yang hebat dalam pengembangan web sampai sekarang. Ini diadopsi secara luas. Alasan di balik adopsinya adalah kemampuan pengembangan yang dibawanya. CSS3 sekarang hampir mampu menggambar apa pun di papan; satu-satunya persyaratan adalah menjadi desainer yang terampil untuk memanfaatkan fungsinya secara maksimal.

Hari ini, saya memiliki kesempatan untuk mempelajari beberapa Efek Teks CSS3 dan Tutorial Tipografi Web.

Apakah Anda mencari barang yang sama? Kemudian, Anda telah mendarat di tempat yang tepat karena kami akan membahas beberapa tutorial Efek Teks CSS3 terbaik di web.

Mari kita mulai.

Pembuatan Teks 3D

Saya suka teks 3D. Ini menawarkan kedalaman yang luar biasa bagi pembaca dan menawarkan rasa pencapaian bagi pembuatnya. Dengan CSS3, membuat teks 3D sangat mudah.

Dengan menggunakan kode di situs web, Anda dapat membuat teks 3D. Anda dapat menyesuaikan parameter dan eksperimen untuk memahami cara kerjanya dan bahkan memodifikasinya agar sesuai dengan kebutuhan Anda.

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

Efek Letterpress Dengan CSS Text-Shadow

Letterpress adalah efek teks populer yang digunakan dalam metode cetak industri. Tidak perlu menggunakan Photoshop atau alat yang berbeda untuk membuat efek.

Buat Tipografi CSS3 yang Indah

Tipografi adalah salah satu faktor kunci untuk pengalaman pengguna. Dengan tutorial ini, Anda dapat membuat tipografi CSS3 yang indah. Tutorial ini dipecah menjadi beberapa langkah dan mudah digunakan.

Tipografi Web dengan Lettering.js dan CSS3

CSS3 adalah pendukung yang kuat. Ini menjadi lebih berguna jika digunakan dengan perpustakaan JS. Dalam tutorial ini, Anda menggunakan kekuatan CSS3 dan Lettering.js (plugin berbasis jQuery untuk membangun Tipografi Web yang menarik) untuk membuat Tipografi Web yang kuat.

Sisipkan Tipografi dengan CSS3

Tipografi Inset cukup keren. Dalam tutorial ini, penulis Andrew Roberts menjelaskan cara membuat tipografi sisipan dengan bantuan tutorial CSS3. Tutorial yang berguna untuk siapa saja yang ingin meningkatkan keterampilan tipografi mereka menggunakan CSS3.

Teks Garis Besar menggunakan Properti Stroke Teks CSS3

Dalam tutorial ini, Anda akan memahami cara membuat goresan teks di sekitar teks Anda. Tutorial menggunakan properti text-stroke CSS3 dan membuatnya mudah untuk membuat teks dengan garis besar. Anda juga dapat memilih transparansi teks menggunakan fitur stroke transparan.

Membuat efek teks Anaglyphic menggunakan CSS

Dengan tutorial ini, Anda dapat mempelajari cara membuat efek teks Anaglyphic menggunakan CSS. Anaglyphs adalah cara luar biasa untuk membuat gambar 3D dengan mengotak-atik saluran merah, hijau, dan biru. Teks dapat dilihat menggunakan kaca 3D dan karenanya menawarkan nilai penggunaan yang luar biasa.

Tutorial Teks Bayangan CSS 3D

Text Shadow adalah salah satu aspek penting dari teks. Dengan tutorial ini, Anda dapat membuat teks CSS 3D dengan 'ZOOM' dan melakukan lebih banyak trik seperti yang ditunjukkan dalam tutorial.

Tutorial ini menawarkan detail luar biasa untuk membuat teks bayangan CSS 3D.

Mengubah Warna Pilihan Teks Default

Pemilihan teks ditunjukkan dengan mengubah warna teks. Jika Anda tidak tahu bahwa warnanya dapat disesuaikan, sekarang Anda tahu. Dengan bantuan tutorial, Anda dapat dengan mudah mengubah warna pemilihan teks untuk blog Anda.

Warna penting untuk merek apa pun. Dengan menggunakan warna utama sebagai warna pemilihan teks, Anda memprogram pelanggan setia Anda untuk memikirkan Anda jika mereka melihat warna tersebut. Ini adalah cara yang kuat untuk memasarkan barang, dan saya ingin Anda menggunakannya untuk bisnis Anda dan bisnis klien Anda.

Efek Teks Keren menggunakan CSS3 Text-Shadow

CSS Text-Shadow adalah paket yang cukup mengejutkan. Dalam tutorial ini, Anda akan mengeksplorasi penggunaan paket Text-Shadow CSS3, dengan menggunakannya untuk membuat efek teks yang keren. Alfonse Surigao menulis tutorialnya.

Rotasi Teks Dengan CSS

Teks yang berputar menyenangkan untuk ditonton, dan Anda juga dapat melakukannya dengan mengikuti tutorial sederhana yang ditulis oleh pengembang web Jonathan Snook.

Buku Masak CSS3

Sebagai pengembang dan desainer, selalu berguna untuk memiliki buku masak. Buku Masak CSS3: 7 resep CSS super mudah untuk disalin dan ditempel, menawarkan resep keren untuk disalin dan digunakan. Halaman yang bagus untuk bookmark untuk penggunaan di masa mendatang.

Menambahkan Stroke ke Teks Web

Dengan tutorial ini, Anda dapat dengan mudah menggores teks seperti yang seharusnya. Tutorialnya sederhana dan membahas topik secara mendalam. Itu juga maju dan menjelaskan batas membelai teks web.

Menerapkan Gradien Teks CSS

Dalam video singkat 4 menit, Anda akan belajar bagaimana menerapkan gradien teks. Videonya pendek tapi sangat bermanfaat. Jadi, jangan lewatkan yang satu ini.

saya suka blur

Tidak ada yang mewah di sini, tetapi trik kecil untuk menampilkan efek buram pada teks I Love Blur. Anda dapat menggunakannya untuk mengirim pesan yang berbeda dalam konteks yang berbeda dan karenanya bermanfaat untuk mempelajari triknya.

Poster CSS Tanpa Gambar

Postingan eksperimental di mana penulis mencoba membuat poster tanpa menggunakan gambar. Dia mencapai ini dengan menggunakan bit yang indah seperti border-radius, box-shadow, transform, @font-face, text-shadow, box-sizing dan RGBa. Untuk mempercayai ini, Anda harus melalui kode, yang tersedia di situs web.

Ukuran Font Dengan Rem

Artikel sederhana lainnya dari Jonathan Snook membawa kita ke ukuran font dengan bantuan REM. Artikelnya sangat terperinci, dan Anda akan menyukai betapa banyak cinta yang diberikan penulis dalam artikel tersebut. Tutorial hebat lainnya yang layak di-bookmark untuk referensi di masa mendatang.

Bungkus

Belajar adalah jalan yang terus menerus. Itu tidak pernah berakhir, dan itulah mengapa kami membawakan Anda daftar menakjubkan Efek Teks CSS3 dan Tutorial Tipografi Web. Banyak tutorial yang sangat mendalam dan sepadan dengan waktu Anda. Yang lain mengalami beberapa efek cahaya dan bagus untuk dipelajari untuk penggunaan jangka panjang.

Saya harap Anda menyukai artikelnya. Jika Anda melakukannya, jangan lupa untuk membagikannya dengan teman-teman Anda. Juga, beri komentar di bawah tutorial terbaik yang Anda sukai di internet. Kami sangat ingin belajar dari Anda.

*terakhir diperbarui 03/02/2019