Efek Teks Tip Super Dreamweaver

Tujuan aplikasi: Membuat efek khusus teks

Perangkat lunak aplikasi: Dreamweaver MX

Kesulitan pengoperasian: ★★☆☆☆

Alat pembuatan halaman web kami yang biasa digunakan Dreamweaver MX tidak hanya dapat membuat halaman web, tetapi juga menggunakan filter CSS untuk melakukan efek khusus sederhana pada teks atau gambar. berurusan dengan. Mari kita lihat beberapa contoh untuk melihat cara membuat teks efek khusus di Dreamweaver.

Halo Word

pertama-tama memulai Dreamweaver, menyisipkan tabel 1×1 ke dalam dokumen baru, menyetel batas ke 0, lalu memasukkan teks yang perlu diubah.

Klik "Desain→Gaya CSS" di panel mengambang di sebelah kanan untuk membuka panel mengambang ini.

Empat tombol di sudut kanan bawah panel adalah: menambah, membuat, mengedit, dan menghapus gaya CSS.

Catatan: Di Dreamweaver, filter CSS hanya dapat digunakan pada objek dengan batasan area, seperti tabel, sel, gambar, dll, tetapi tidak dapat digunakan langsung pada teks, jadi kita perlu meletakkan teks yang perlu ditambahkan dengan spesial efek di tabel terlebih dahulu, lalu terapkan gaya CSS ke tabel untuk membuat efek khusus pada teks.

Gambar 1 Buat gaya CSS baru.

Klik tombol Gaya CSS baru, dan kotak dialog seperti yang ditunjukkan pada Gambar 1 akan muncul.

Pilih "Buat gaya khusus" untuk item "Jenis", pilih "Hanya untuk dokumen ini" untuk "Ditentukan dalam", dan klik OK untuk memunculkan kotak dialog definisi gaya CSS (Gambar 2). tentukan font, ukuran font, Warna dan konten lainnya, dalam contoh ini kita memilih font menjadi skrip resmi, ukurannya menjadi 50 piksel, dan warnanya menjadi putih.

Gambar 2 Untuk menentukan gaya CSS

untuk menghasilkan efek teks, yang paling penting adalah pengaturan di panel ekstensi (Gambar 3). Semua filter CSS tercantum dalam filter di bawah "Efek Visual". teks memiliki efek tepi bercahaya. Format sintaksis filter Cahaya adalah: Cahaya(Warna=?, Kekuatan=?), yang memiliki dua parameter: Warna menentukan warna lingkaran cahaya. Anda dapat menggunakan kode heksadesimal seperti ffffff, atau kata-kata seperti Merah dan Kuning. Mewakili; Kekuatan mewakili intensitas cahaya, mulai dari 0 hingga 255. Dalam contoh ini kita mengatur warna menjadi Merah, intensitas cahaya menjadi 8, dan kemudian OK.

Gambar 3 Setelah mengatur filter Glow

, kita akan menerapkan gaya CSS ini ke tabel. Pindahkan kursor ke sel, klik label di sudut kiri bawah

jendela

Kita tidak dapat melihat perubahan di jendela dokumen. Tekan tombol F12 untuk melihat pratinjau di IE, dan efeknya akan muncul (Gambar 4).

Gambar 4 Bagaimana dengan efek kata halo

? Tidak kalah dengan efek filter di photoshop. Menempatkan beberapa kata efek khusus ini pada halaman web akan membuat halaman web jauh lebih indah, dan kita juga dapat menggunakan tombol PrintScreen untuk menangkap layar, lalu menempelkan dan menyimpannya dalam program menggambar untuk menjadikannya gambar terpisah.

kata bayangan

yang dapat menghasilkan efek bayangan pada teks yaitu Drowshadow dan Shadow. Efek yang dihasilkannya sedikit berbeda.

Langkah-langkah membuat shadow word pada dasarnya sama dengan membuat halo word. Anda hanya perlu memilih ulang filter pada style CSS.

Sintaks filter Drowshadow adalah sebagai berikut: DropShadow(Warna=?, OffX=?, OffY=?, Positif=?).

Diantaranya, Warna mewakili warna bayangan, dinyatakan sebagai angka heksadesimal; OffX dan OffY masing-masing mewakili jumlah penyimpangan bayangan dari posisi teks, dalam piksel; Positif adalah nilai logis, 1 mewakili penciptaan bayangan untuk semua buram elemen, 0 Mewakili penciptaan bayangan yang terlihat untuk semua elemen transparan.

Gambar 5 Efek Kata Bayangan

Misalnya, jika filter diatur ke DropShadow (Warna=6699cc, OffX=2, OffY=2, Positif=1), efeknya akan seperti yang ditunjukkan pada Gambar 5.

kata topeng

juga memberi kita fungsi topeng, yang dapat memproses bagian teks menjadi topeng. Jika gambar yang sesuai digunakan di latar belakang, efek teks berongga yang indah dapat dihasilkan.

Masukkan tabel 1x1 ke dalam jendela dokumen, klik label di sudut kiri bawah jendela dokumen untuk memilih seluruh tabel, pilih gambar yang sesuai di gambar latar belakang pemeriksa properti (seperti yang ditunjukkan pada Gambar 6), dan lalu masukkan teks yang diperlukan.

Gambar 6

Selanjutnya kita menambahkan filter Mask pada sel, langkahnya mirip dengan dua contoh sebelumnya. Pilih Mask (Color=?) di filter. Parameter ini menentukan warna mask.

Catatan: Pemilihan warna teks dalam contoh ini tidak penting, karena efek akhir teks akan berlubang dan warna tidak akan ditampilkan.

Gambar 7 Setelah efek kata topeng

diatur, terapkan gaya CSS ini ke sel, lalu tekan tombol F12 untuk melihat efeknya (Gambar 7).

Catatan: Gambar latar belakang ditambahkan ke seluruh tabel dan sesuai dengan label, sedangkan gaya CSS ditambahkan ke sel dan merupakan label.

dinamis

, kita perlu menggunakan filter Blur, yang digunakan untuk menghasilkan efek blur. Format sintaksnya adalah Blur(Add=?, Direction=?, Strength=?). Parameter Tambah adalah nilai Boolean. Secara umum, ketika filter digunakan untuk gambar, dibutuhkan 0, dan ketika digunakan untuk teks, dibutuhkan 1; Arah mewakili arah buram, dan satuannya mewakili Kekuatan nilai gerakan blur, dan satuannya adalah piksel. Misalnya, jika kita mendefinisikan Blur(Tambah=1, Arah=90, Kekuatan=150), Anda dapat melihat efeknya seperti yang ditunjukkan pada Gambar 8 di pratinjau.

Gambar 8 Efek Kata Dinamis

Sebenarnya banyak filter di CSS yang juga bisa digunakan untuk memodifikasi gambar, seperti filter Blur yang bisa menghasilkan efek blur pada gambar. Jika kita dapat menerapkan filter ini dengan terampil, terkadang kita dapat membuat efek gambar yang cukup bagus tanpa perangkat lunak pengolah gambar profesional.