Cara Membuat Window Text Effect dengan CSS3

Hallo teman-teman, Alhamdulilah Bertemu kembali dengan saya ditahun 2017 dan masih diwebsite ini. Seperti biasa ya teman-teman, semoga masih diberikan kesehatan dan kebahagiaan agar dapat kembali semangat dalam mencari informasi atau ingin mengupgrade skill didunia website terutama dalam hal desain website.

Pada kesempatan kali ini saya akan membahas tentang Cara Membuat Window Text Effect dengan CSS3. Sebelum kita membuat window text effect, langkah pertama teman-teman siapkan terlebih dahulu foldernya dan gambarnya, disini saya menggunakan gambar dibawah ini yang nantinya akan kita gunakan sebagai background :

Teman-teman silahkan download gambar diatas dan letakan didalam folder yang teman-teman buat. Lalu langkah selanjutnya silahkan teman-teman buka text-editornya dan ketik atau copy script HTML dibawah ini :

<!DOCTYPE html>
<html>
<head>
	<title>Window Text Effect</title>
</head>
<body>


    <div class="background">
   	 <h1 class="window">AMAZING TEXT EFFECT</h1>
    </div>


</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Window Text Effect</title>

</head>

<body>

<h1 class="window">AMAZING TEXT EFFECT</h1>

</div>

</body>

</html>

Jika sudah dengan HTMLnya silahkan teman-teman simpan dan langkah selanjutnya teman-teman masukan script CSS nya seperti pada gambar dibawah ini :

<style type="text/css">
		
   .background{
    width: 600px;
    height: 400px;
    background: url(
    bg.jpg);
    background-size: cover;
    }



    h1.window{
    text-align: center;
    font-size: 75px;
    position: relative;
    top: 120px;
    padding: 20px;
    color: #fff;
    background-color: #222;
    mix-blend-mode: multiply;
    }
</style>

.background{

width: 600px;

height: 400px;

background: url(

bg.jpg);

background-size: cover;

}

h1.window{

text-align: center;

font-size: 75px;

position: relative;

top: 120px;

padding: 20px;

color: #fff;

background-color: #222;

mix-blend-mode: multiply;

}

</style>

Script CSS diatas kita sisipkan diantara tag head ya teman-teman, Jadi disini kita menggunakan CSS internal. Jika sudah silahkan teman-teman simpan dan teman-teman jalankan/run dibrowser yang teman-teman gunakan. Jika berhasil maka hasilnya akan terlihat seperti pada gambar dibawah ini :

Bagaimana teman-teman ? cukup mudah bukan ? jadi seperti itulah Cara Membuat Window Text Effect dengan CSS3. Untuk kedepannya silahkan teman-teman modifikasi sendiri sesuai dengan selera teman-teman dan ketahuilah property-property pada CSS itu sangat luar biasa jika kita mempunyai kreativitas yang tinggi.

Oke cukup sampai disini dahulu pembahasan saya tentang Cara Membuat Window Text Effect dengan CSS3. Semoga dapat bermanfaat buat teman-teman dan sampai bertemu di pembahasan selanjutnya.

Terimakasih

Facebook DUMET School

Categories