Cara Membuat style keren pada textarea dengan CSS3
Halo teman-teman di panduan kali ini saya akan menjelaskan Cara Merancang style keren di textarea dengan CSS3, namun sebelum kita masuk kepembahasan bagi merancang style keren di textarea, ada baiknya kita mengetahui dulu apa manfaat dari textarea tersebut.
Guna dari textarea yaitu bagi merancang inputan yang dapat menampung lebih dari satu baris inputan dan textarea hampir sama fungsinya seperti input type text, namun di textarea bisanya digunakan bagi inputan panjang seperti komentar, catatan, atau sebuah keterangan. Bagi contoh penulisan textarea kita lumayan menggunakan <textarea>…</textarea>, nah diantara tag pembuka dan tag penutup kita dapat memasukan sebuah text yang akan kita input, nantinya inputan demikianlah yang akan kita masukan style sehingga font yang kita input berbentuk seperti 3d.
Bagi Merancang style keren di textarea dengan CSS3 langkah pertama-tama yang mesti teman-teman lakukan yaitu silahkan buka text editornya terlebih dahulu, bila telah kita kan merancang file indexnya dan teman-teman dapat menyimpan script yang terdapat dibawah ini dengan nama index.html
<html>
<head>
<title>Cara Merancang style keren di 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 berikutnya kita akan merancang file cssnya, nah di file css inilah kita akan mengatur style dari inputan yang akan kita bikin, bagi merancang style tersebut teman-teman lazim 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 seluruh file nya dan kita akan mencoba mejalankannya di browser karenanya 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 lumayan gampang bukan Cara Merancang style keren di textarea dengan CSS3, demikianlah dulu panduan saya kali ini mengenai Cara Merancang style keren di textarea dengan CSS3
Semoga bermanfaat
Terimakasih
Sumber https://kursuswebsite.org
