CSS 3 merupakan potensi baru bagi para web designer dan dapat di manfaatkan pada web design. Ini merupakan respon yang sangat cepat karena pada web memerlukan suatu seperti teks efek untuk user interface pada web menggunakan CSS3.
Dalam hal ini design pada suatu web ini bergantung pada pengalaman dari web designer sendiri. Karena pada CSS 3 ini memiliki tool yang lebih banyak , dengan ini merancang suatu web akan lebih menarik lagi.
Pada kali ini saya akan menjelaskan beberapa fitur-fitur teks efek pada CSS 3. Kita dapat menggunakan fitur baru ini untuk kenguntung pada kita.
Dalam bab ini kalian akan belajar tentang sifat-sifat teks berikut:
- text-shadow
- word-wrap
BROWSER SUPPORT
Dalam menggunakan fitur-fitur pada CSS 3 ini kita harus melihat browser-browser mana yang support dengan menggunakan CSS 3 ini. Ini adalah browser yang support :
Internet Explorer 10, Firefox, Chrome, Safari, dan Opera mendukung properti text-shadow.
Internet Explorer 10, Firefox, Chrome, Safari, dan Opera mendukung properti text-shadow.
Semua browser utama mendukung properti word-wrap.
Catatan: Internet Explorer 9 dan versi sebelumnya, tidak mendukung properti text-shadow.
Text Shadow
Menggunakan CSS 3 untuk membuat text shadow yang keren itu adalah pilihan yang tepat. CSS3 properti text-shadow telah sekitar untuk beberapa waktu sekarang dan umumnya digunakan untuk menciptakan Photoshop Drop Shadow jenis shading untuk menambahkan bayangan halus yang membantu menambah kedalaman, dimensi dan mengangkat sebuah elemen dari halaman. Hal ini tidak semua properti text-shadow mampu sekalipun, dengan mendapatkan kreatif dan bermain-main dengan warna, offset dan kabur kita dapat membuat beberapa efek teks cerdas dan keren!
Bagaimana cara kerja teks shadow :
Teks shadow CSS properti digunakan untuk menambah bayangan untuk teks terkait elemen HTML. Sintaks termasuk angka untuk X-offset, Y-offset, jumlah blur dan akhirnya warna bayangan yang sebenarnya. Terlebih lagi, kalian tidak harus puas dengan satu bayangan, kalian dapat membangun beberapa nilai text-shadow untuk membuat beberapa efek benar-benar keren!
Ini saya mencoba membuat text shadow terinspirasi dari line25.com . Ini dia hasil codingan dari text shadow yang dibuat yaitu :
Efek teks hanya menggunakan beberapa bayangan masing-masing dengan peningkatan jumlah offset dari teks asli untuk menciptakan serangkaian bolak warna. Tidak ada kabur digunakan untuk menjaga bayangan tajam dan tajam sebagai reproduksi yang tepat dari teks asli.
WORD-WARP
word-wrap properti diciptakan oleh Microsoft dan ditambahkan ke CSS3. Hal ini memungkinkan kata-kata panjang untuk dapat menjadi rapih dan tertata ke baris berikutnya. Dibutuhkan dalam dua nilai, normal atau break-word.
Dalam paragraf pertama di bawah ini, biasa digunakan. Ini adalah sama seperti jika properti itu tidak digunakan, yaitu kata yang panjang istirahat keluar dari kotak karena ada tidak cukup lebar untuk itu harus sepenuhnya terkandung di dalam kotak. Dalam paragraf kedua, break-kata yang digunakan dan kata yang panjang ini dibagi menjadi dua bagian, sehingga bagian kedua membungkus ke baris berikutnya.
Saat ini didukung di IE, Safari, dan Firefox 3.1 (Alpha).
Syntaks yang digunakan :
Word-wrap properti menerima dua nilai, salah satunya adalah default:
- #selector {
- word-wrap: break-word;
- }
- #selector-2 {
- word-wrap: normal; /* the default, naturally */
- }
Pada dasarnya dengan menggunakan word-warp ini maka teks kita yang telah dibuat akan di atur agar tidak melebih space yang telah di tentukan. Sebagai contoh , misal kalian membuat suatu border yang lebarnya sekitar 200px dan kemudian kalian membuat suatu kata yang sangat panjang melebihi dari lebar yang telah di tentukan maka kalian jangan lupa menggunakan break-word. Maka teks yang telah dibuat secara otomatis akan tertata sesuai yang diatur pada lebarnya. Oleh karena itu fitur ini begitu berguna walaupun cukup sederhana.
Berikut ini adalah contoh tanpa properti word-wrap:
Berikut ini adalah contoh dengan properti word-wrap:break-word :
Sekian dari penulisan ini. Saya hanya mencoba untuk memberikan sedikit ilmu tentang teks efek pada CSS 3. Untuk selanjutnya bisa diliat di blog :
Adam Ramadhan Junior
Referensi :
http://www.w3schools.com/cssref/css3_pr_text-shadow.asp
http://www.impressivewebs.com/word-wrap-css3/
http://www.css3.info/preview/word-wrap/
http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects
http://css-weaver.com/50-tutorial-efek-teks-keren-dengan-css3/
http://www.w3schools.com/css3/css3_text_effects.asp
