Halo teman-teman pada tutorial kali ini saya akan menjelaskan Cara Membuat style keren pada textarea dengan CSS3, namun sebelum kita masuk kepembahasan untuk membuat style keren pada textarea, ada baiknya kita mengetahui dulu apa fungsi dari textarea tersebut.
Fungsi dari textarea yaitu untuk membuat inputan yang dapat menampung lebih dari satu baris inputan dan textarea hampir sama fungsinya seperti input type text, namun pada textarea bisanya digunakan untuk inputan panjang seperti komentar, catatan, atau sebuah keterangan. Untuk contoh penulisan textarea kita cukup menggunakan <textarea>…</textarea>, nah diantara tag pembuka dan tag penutup kita dapat memasukan sebuah text yang akan kita input, nantinya inputan itulah yang akan kita masukan style sehingga font yang kita input berbentuk seperti 3d.
Untuk Membuat style keren pada textarea dengan CSS3 langkah pertama yang harus teman-teman lakukan yaitu silahkan buka text editornya terlebih dahulu, jika sudah kita kan membuat file indexnya dan teman-teman bisa menyimpan script yang terdapat dibawah ini dengan nama index.html
<html> <head> <title>Cara Membuat style keren pada textarea dengan CSS3</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="font3d"> <textarea placeholder="Silahkan Masukan TEXT..."></textarea> </div> </body> </html>
Langkah selanjutnya kita akan membuat file cssnya, nah pada file css inilah kita akan mengatur style dari inputan yang akan kita buat, untuk membuat style tersebut teman-teman biasa menyimpan script yang terdapat dibawah ini dengan nama style.css
<style>
.font3d {
width:800px;
height:600px;
margin:0 auto;
display:block;
}
.font3d textarea {
resize:none;
width:955px;
overflow: hidden;
font-family: 'Arvo', arial, serif;
background-color: transparent;
color:#b1e8a1;
font-size:5em;
border: 0;
text-align:center;
text-shadow: -2px -2px 1px #fff, -1px -1px 1px #fff, 1px 1px 1px rgba(255, 255, 255, 0.9), 1px 1px 0 #461009, 2px 2px 0 #29638a, 3px 3px 0 #286188, 4px 4px 0 #275f85, 5px 5px 0 #d6eeff, 6px 6px 0 #255a80, 7px 7px 0 #24577d, 8px 8px 0 #235479, 9px 9px 0 #215075, 10px 10px 0 #828282, 11px 11px 0 #1e486c, 12px 12px 1px rgba(192, 220, 245, 0.5), 14px 14px 12px rgba(1, 7, 13, 0.5);
}
</style>Berikutnya silahkan teman-teman save semua file nya dan kita akan mencoba mejalankannya pada browser maka akan muncul seperti di bawah ini
Dan setiap text yang kita masukan akan mememiliki style yang keren seperti gambar yang terdapat diabawah ini
Bagai mana teman-teman cukup mudah bukan Cara Membuat style keren pada textarea dengan CSS3, sekian dulu tutorial saya kali ini tentang Cara Membuat style keren pada textarea dengan CSS3
Semoga bermanfaat
Terimakasih
The post Cara Membuat style keren pada textarea dengan CSS3 appeared first on Kursus Website Terbaik.