Pada tutorial kali ini akan membahas bagaimana cara mengatur teks pada CSS menggunakan text transformation. Mengatur text transformation dapat dilakukan menggunakan properti text-transform. Properti text-transform pada CSS digunakan untuk membuat teks menjadi huruf besar (uppercase) dan huruf kecil (lowercase) dalam teks. Show Properti text-transform juga dapat digunakan untuk mengubah semua teks menjadi huruf besar atau kecil, atau menggunakan huruf besar pada huruf pertama (capitalize) dari setiap kata. Contoh :Penggunan text-transform uppercase, lowercase, dan capitalize pada teks. <!DOCTYPE html> <html> <head> <style> p.uppercase { text-transform: uppercase; } p.lowercase { text-transform: lowercase; } p.capitalize { text-transform: capitalize; } </style> </head> <body> <p class="uppercase">Ini sebuah kalimat.</p> <p class="lowercase">Ini sebuah kalimat.</p> <p class="capitalize">Ini sebuah kalimat.</p> </body> </html> Sekian bahasan dan contoh cara penggunaan text transformation pada CSS, semoga bermanfaat. CSS Membuat tampilan website menggunakan HTML saja tanpa CSS rasanya ada yang kurang. Bisa jadi tampilan website yang kita inginkan, berubah menjadi tampilan website kaku tidak menarik perhatian. Karena era sekarang banyak orang-orang berlomba untuk membuat website sedemikian rupa agar dapat menarik pengunjung dan betah berlama pada website kita. Karena hal itu akan menentukan kualitas website kita seperti apa. Apalagi jika website kita adalah website toko online, tentu berdampak pada penghasilan bukan ?. Mengenai CSS, ada beberapa fungsi yang dapat kalian gunakan dalam menunjang untuk tampilan website. Ada satu fungsi CSS yang dapat memanipulasi teks pada HTML, yaitu text-transform. Ya, kita akan belajar fungsi text-transform pada CSS. Apa fungsi text-transform itu ?, fungsinya adalah untuk memanipulasi teks pada HTML. Contoh sederhananya adalah apabila kalian mempunyai paragraf dengan menggunakan huruf kecil semua, lalu tiba-tiba ingin dirubah menjadi huruf besar semua. Tentu tidak mungkin untuk merubahnya satu persatu. Maka dengan text-transform ini kalian cukup menambahkan sebaris scripts css maka teks tersebut akan berubah semua. Text-transform memiliki 3 buah nilai, yaitu uppercase, lowercase, dan capitalize. Uppercase untuk huruf besar semua, lowercase kebalikan dari uppercase, menjadikan huruf kecil semua. Lalu yang terakhir capitalize untuk huruf besar pada awal kata saja. Lalu bagaimana cara penulisanya?. Caranya cukup mudah, untuk lebih jelasnya kalian bisa ikuti contoh code dibawah ini. index.html<!DOCTYPE html> <html> <head> </head> <body> <p class="uppercase">This is some text.</p> <p class="lowercase">This is some text.</p> <p class="capitalize">This is some text.</p> </body> </html> Pada script diatas terdapat 3 buah paragraf dengan class uppercase, lowercase dan capitalize. Jadi tiap-tiap paragraf tersebut akan mewakilkan 3 nilai yang ada pada text-transform. Lalu sekarang buat cssnya seperti ini. p.uppercase { text-transform: uppercase; } p.lowercase { text-transform: lowercase; } p.capitalize { text-transform: capitalize; } script diatas kalian sisipkan diantara tag <head></head> pada html. Dan jangan lupa untuk diapit oleh tag <style></style> sehingga seperti ini strukturnya. <!DOCTYPE html> <html> <head> <style> code css </style> </head> Setelah sudah kalian simpan filenya dengan format html. Dan lihat hasilnya pada browser kalian. Hasilnya akan seperti ini. Setelah kita belajar tentang properti 4 dan background, berikutnya kita akan belajar tentang cara styling teks.Ini penting, karena teks adalah elemen yang paling banyak dipakai pada halaman web. Ada beberapa properti CSS untuk styling teks yang akan kita pelajari, diantaranya 5, 6, 7, 8, dan 9.Oke langsung saja, mari kita mulai! Text AlignJika kamu pernah menggunakan aplikasi Office, pasti pernah mengenal perataan teks. Ada rata kiri, rata kanan, rata tengah, rata kiri dan kanan. Nah, kita juga bisa meratakan teks dengan properti CSS 5. Properti ini punya nilai yang valid:
Contoh penggunaan:
Biar lebih jelas, mari kita coba latihan. Buatlah file baru dengan nama 9, kemudian isi dengan kode berikut:
Kemudian, coba buka dengan web browser. Maka hasilnya: Teks berhasil diratakan sesuai dengan yang kita inginkan. Text DirectionCSS punya properti 6 untuk menentukan arah baca teks. Misalnya dari kiri ke kanan ( 1) atau dari kanan ke kiri ( 2).Secara umum teks biasanya dibaca dari kiri ke kanan. Tapi ada juga yang dibaca dari kanan ke kiri, contohnya teks bahasa arab. Jika kita membuat website dengan bahasa arab, lalu membiarkan 6 menggunakan left to right ( 1), maka hasilnya akan seperti ini.Ini akan menyulitkan orang membaca tulisan arab, karena tulisan arab dibaca dari kanan ke kiri. Karena itu, kita harus mengatur 6-nya menjadi 2 (right to left).Mari kita coba! Buatlah file HTML baru dengan nama 7 kemudian isi dengan kode berikut:
Setelah itu buka dengan web browser. Maka hasilnya: Secara default, teks akan rata kanan.. Ini karena kita mengatur 8 (kanan ke kiri).Nah, di sini baru kita juga bisa menerapkan 5 dengan nilai 5 dan 7.Contoh:
Hasilnya: Paragraf ke-2 akan rata kiri, karena kiri adalah akhir dari 6. Sedangkan paragraf pertama akan tetap rata di kanan, karena 6 di mulai dari kanan.Text DecorationProperti 6 adalah properti untuk memberikan dekorasi garis pada teks. Contohnya seperti garis bawah, garis atas, dan garis di tengah (teks tercoret).Properti ini punya nilai beripa:
Contoh penggunaan:
Biar semakin paham, mari kita coba latihan. Buatlah file baru dengan nama 9, kemudian isi dengan kode berikut:
Setelah itu buka dengan web browser. Maka hasilnya: Pada contoh ini, kita menggunakan elemen 0 dengan class text-decoration yang sudah kita buat di CSS.O ya, kita sengaja menggunakan 1 pada paragraf agar dekorasi 2 tidak terlihat seperti garis bawah.Selain dekorasi dengan garis lurus, kita juga bisa menentukan style garis dan warnanya. Tinggal tambahkan aja di nilai properti. Contoh:
Artinya, saya inign membuat dekorasi garis bawah dengan gaya garis berombak (wavy) dan warnanya hijau. Mari kita coba! Ubahlah kode pada contoh sebelumnya menjadi seperti ini:
Maka hasilnya: Pada contoh ini, kita memberikan style garis 3 dan 4 pada 6.Selain kedua gaya garis ini, masih ada gaya garis yang lain seperti 6 dan 7.Kamu bisa coba-coba sendiri. Text TransformProperti 7 berfungsi untuk mengubah bentuk teks. Misalnya dari huruf kecil menjadi huruf besar.Berikut ini nilai-nilai yang valid untuk 7.
Contoh penggunaan:
Mari kita coba latihan! Buatlah file HTML baru dengan nama 4 kemudian isi dengan kode berikut:
Setelah itu buka dengan web browser. Maka hasilnya: Perhatikan! Meskipun di HTML kita tulis elemen 5 dengan huruf kecil, tapi hasilnya akan ditransformasi menjadi huruf besar untuk huruf di setiap awal kata. Ini karena kita memberikan 6.Begitu juga untuk teks pada paragraf. Teks 7 ditampilkan dengan huruf besar, karena kita memberikan nilai 1 pada class 9.Text SpacingText Spacing adalah ruang kosong pada teks. CSS menyediakan beberapa properti untuk mengatur spacing pada teks.
Biar lebih jelas, mari kita coba latihan. Buatlah file HTML baru dengan nama 5, kemudian isi dengan kode berikut: 0Setelah itu, buka dengan web browser. Maka hasilnya: Pada contoh ini, kita memberikan 6 dan 7 pada elemen 5. Ini akan membuat hurufnya merapat dan jarak antar katanya 9.Jarak huruf yang dekat cocok dipakai untuk judul atau teks dengan ukuran huruf yang besar. Lalu di paragraf berikutnya, kita memberikan jarak huruf 0 dengan transformasi teks 1.Biasanya teks dengan ukuran huruf kecil akan lebih mudah dibaca jika dikasih 1 yang lebih besar dan 1.Pada paragraf berikutnya kita menerapkan 0, properti ini akan membuat teks masuk ke dalam pada baris pertama paragraf.Kemudian di paragraf berikutnya, kita mengunakan 1 sebesar 6. Ini berfungsi untuk mengatur jarak antar baris.Secara default, nilai 1 adalah 8. Jika kita memberikan nilai di atas 8, maka jarak barisnya akan semakin menjauh. Begitu juga sebaliknya, jika diberikan nilai dibawah 8 maka jarak barisnya akan semakin dekat.Pada paragraf terakhir, kita menggunakan properti 4 untuk mengatur metode white space yang digunakan pada paragraf.Supaya semakin paham, cobalah untuk bereksperimen dengan mengubah-ubah nilai pada properti tersebut. Kamu bisa manfaatkan inscpect element pada browser. Text OverflowProperti 2 berfungsi untuk mengatur panjang teks yang melebihi ukuran dari elemen.Misalnya, kita punya elemen dengan ukuran 3, lalu kita isi dengan teks yang panjangnya lebih dari 3. Maka ini akan menyebabkan teks overflow.Secara default, teks akan ditulis ke baris baru jika melebihi batas elemen. Namun, pada kondisi tertentu, seperti saat kita menggunakan 5 dan 6 teks tidak akan ditulis ke baris baru.Oleh sebab itu, pada kasus ini kita membutuhkan 2 untuk mengatur teks tersebut.Mari kita latihan! Buatlah file HTML baru dengan nama 8, kemudian isi dengan kode berikut: 1Setelah itu, buka di web browser. Maka hasilnya: Perhatikan pada ujung paragraf, ditambahkan 9. Ini karena kita memberikan nilai 00 pada properti 2.Text ShadowProperti 9 merupakan properti untuk memberikan bayangan pada teks. Properti ini mulai ada pada CSS3.
Apa saja property CSS?Dalam CSS ini, terdapat beberapa macam property, yaitu:. Background Property. ... . Border Property. ... . Font Property. ... . Margin Property. ... . Padding Property. ... . Property Lebar dan Tinggi. ... . Text Property. ... . Display Property.. Apa itu Text Transform pada CSS?Ya, kita akan belajar fungsi text-transform pada CSS. Apa fungsi text-transform itu ?, fungsinya adalah untuk memanipulasi teks pada HTML. Contoh sederhananya adalah apabila kalian mempunyai paragraf dengan menggunakan huruf kecil semua, lalu tiba-tiba ingin dirubah menjadi huruf besar semua.
Apa itu CSS value?Pengertian Value CSS. Value CSS adalah nilai dari property. Misalkan untuk property background-color yang digunakan untuk mengubah warna latar belakang dari sebuah selector, value atau nilainya dapat berupa red, blue, black, atau white.
Properti manakah yang digunakan untuk merubah batas kiri pada elemen?border-left-style Mengatur gaya batas kiri elemen. border-left-width Mengatur lebar batas kiri suatu elemen.
|