Cara Trik CSS Membuat Scroll Text Area di Blog/Website dan Stylenya

Scroll text adalah text yg berada pada pada kotak yg luas dan tingginya di batasi pada berukuran eksklusif sebagai akibatnya buat melihatnya sampai ke bawah diperlukan mouse scrolling. Trik ini lazim dipakai untuk berhemat ruang di dalam post body juga sidebar, sebagai akibatnya holistik page yang dimuat oleh browser menjadi nir terlalu panjang.

Ini adalah model text yg menggunakan pengaruh manual scrolling text. Secara normal, text ini akan terlihat menjadi paragraf di pada post body seperti text pada atas, dimana batas kiri, kanan, atas, serta bawah dibatasi sang margin atau alignment yg telah diberi pengaturan default pada pada template HTML.

Style diatas dibuat menggunakan memakai div styling, dengan menambahkan atribut restriksi lebar (width) dan tinggi (height) dalam area text, dimana area text tersebut sebenarnya lebih tinggi serta atau lebih lebar berdasarkan batasan yang diberikan. Lalu, untuk menaruh notifikasi pada browser bahwa elemen text wajib dapat dipandang tetapi dalam luas area yang telah ditentukan tersebut, digunakanlah atribut overflow: scroll buat menaruh dampak scroll, ataupun overflow: auto yang secara otomatis akan memberikan imbas scroll bila area text disempitkan. Logikanya, hal ini sama menggunakan area suatu halaman blog /website atau dokumen-dokumen lain di PC. Apabila page tersebut lebih panjang menurut area browser (juga berdasarkan resolusi layar monitor), maka akan muncul scroller di sebelah kanan browser, dan jika lebih lebar, maka akan ada scroller di bagian bawah browser.

So, kita mampu memakai dasar tag
text yang hendak diberi style
sama seperti text styling yang lainnya, dengan menambahkan 3 atribut penting: height, overflow:scroll/auto, dan weight:
text yang hendak diberi imbas scroll text
Sebagai model hasil dasarnya misalnya ini:

text yang hendak diberi imbas scroll text text yang hendak diberi imbas scroll text text yang hendak diberi imbas scroll text text yang hendak diberi imbas scroll text text yang hendak diberi imbas scroll text text yang hendak diberi imbas scroll text

Dan ini tag dan atribut yg dipakai buat contoh pada atas:
text yang hendak diberi imbas scroll text text yang hendak diberi imbas scroll text text yang hendak diberi imbas scroll text text yang hendak diberi imbas scroll text text yang hendak diberi imbas scroll text text yang hendak diberi imbas scroll text

Nah, lalu supaya scroll text tersebut sebagai indah atau latif serta muncul pada posisi sesuai dengan hasrat, masukkan atribut-atribut styling yang lain, misalnya: border, margin, padding, text-align, atau background. Sebagai contoh:

Ini adalah contoh Scroll Text dengan tinggi 80px, border ukuran 2px berjenis solid serta berwarna lightblue, menggunakan menggunakan overflow berjenis auto, text-align berjenis justify(rata kanan kiri), dengan batas margin kiri sebesar 30px, padding sebanyak 3px, dan mempunyai luas sebesar 300px.

Ini tag serta atribut yg digunakan:
padding: 3px; text-align: justify; width: 300px;">
Ini merupakan contoh Scroll Text dengan tinggi 80px, border berukuran 2px berjenis solid dan berwarna lightblue, menggunakan menggunakan overflow berjenis auto, text-align berjenisjustify (rata kanan kiri), menggunakan batas margin kiri sebesar 30px, padding sebesar 3px, serta mempunyai luas sebesar 300px.

Untuk praktisnya, anda dapat meng-copy yang pada bawah ini:
2px solid #000000; height: 100px; margin-left: 20px; overflow: auto; padding: 3px; text-align: left; width: 320px;">Text anda disini
Yang berwarna biru merupakan value atau ukuran border, tinggi, margin, padding, serta luas area. Anda dapat mengubahnya sesuai asa.
Yang berwarna merah adalah nilai warna border, anda bisa pula mengubahnya. Untuk panduan code warna hex, sanggup ditinjau disini.
Text-align memiliki 4 value: left, center, justify, serta right.
Anda bisa mengutak-atik atribut-atribut di atas; bahkan menambah atau menghapus atribut yang tidak dibutuhkan, kecuali tiga atribut inti: height, overflow, dan width buat menerima bentuk scroll text blog yang diinginkan.
Untuk bagian posting pakai edit HTML, buat sidebar pilih gadget HML/JavaScript.
Have a nice experiment and be creative.
Tersaji dengan Esensi
mencuri merupakan pekerjaan pengecut! © tentang-soal.blogspot.com

Tidak ada komentar untuk "Cara Trik CSS Membuat Scroll Text Area di Blog/Website dan Stylenya"