Tutorial Pemrograman

Cara Membuat Efek Blur dan Warna Text-Shadow di CSS3

CSS3 memberikan banyak fitur baru guna mempercantik tampilan website, salah satunya adalah text-shadow. Seperti namanya, text-shadow akan memberikan efek tulisan berbayang. Tak usah menunggu lama, mari kita langsung coba ke contoh di bawah ini:

Membuat Efek ‘Blur’ di Text-Shadow

1. Buka XAMPP Control Panel dan aktifkan Apache dan MySql.

2. Buka text editor, seperti Notepad++, atau Dreamweaver dan ketiklah script code berikut.

Simpan script code di atas, simpan di folder xampplite → htdocs → buat folder baru (disini saya buat folder baru dengan nama “inwepo”) → saya simpan dengan nama file “text-shadow3.php”.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS3</title>
<style>
   h1 {
     text-shadow: 15px -20px 5px;
   }
</style>
</head>
<body>
<h1>Membuat Teks Shadow di INWEPO</h1>
<p>Penulisan : text-shadow: 15px -20px 5px, berarti saya ingin memberikan bayangan kearah 15 pixel ke<b>kanan</b>
dan 20 pixel ke<b>atas</b> dan 5 pixel adalah nilai blur. Semakin besar Nilai blurnya semakin kabur bayangan yang dihasilkan</p>
</body>
</html>

3. Untuk melihat hasil script code di atas, kamu bisa buka browser kamu ketiklah http://localhost/inwepo/ text-shadow3.php.

Memberi ‘Warna’ Text-Shadow

1. Buka XAMPP Control Panel dan aktifkan Apache dan MySql.

2. Buka text editor, seperti Notepad++, atau Dreamweaver dan ketiklah script code berikut.

Simpan script code di atas, simpan di folder xampplite → htdocs → buat folder baru (disini saya buat folder baru dengan nama “inwepo”) → saya simpan dengan nama file “text-shadow4.php”.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS3</title>
<style>
   h1.satu {
     text-shadow: 2px 2px 5px red;
   }
   h1.dua {
     text-shadow: 2px -2px 5px blue;
   }
   h1.tiga {
     text-shadow: -5px -5px 3px #FF68ED;
   }
   h1.empat {
     text-shadow: 2px -2px 15px #56FF67;
   }
</style>
</head>
<body>
<h1 class="satu">Membuat Teks Shadow di INWEPO</h1>
<h1 class="dua">Membuat Teks Shadow di INWEPO</h1>
<h1 class="tiga">Membuat Teks Shadow di INWEPO</h1>
<h1 class="empat">Membuat Teks Shadow di INWEPO</h1>
</body>
</html>

3. Untuk melihat hasil script code di atas, kamu bisa buka browser kamu ketiklah http://localhost/inwepo/ text-shadow4.php.

Catatan:

1. Mungkin ada yang masih bingung kenapa harus disimpan di htdocs? Htdocs adalah salah satu folder bawaan dari XAMPP, yang tugasnya khusus untuk menyimpan berkas-berkas yang akan dijalankan, seperti berkas PHP, HTML, CSS, dan JavaScript.

2. Kemudian, mungkin ada yang menanyakan maksud dari http://localhost/inwepo/text-shadow2.php. Localhost merupakan server lokal pada computer. Localhost dapat diaktifkan ketika anda meng-klik start Apache di XAMPP Control Panel. Inwepo menunjuk pada folder inwepo saya di xampplite → htdocs. Dan, text-shadow2.php adalah nama file yang tersimpan script code di atas.

Demikian penjelasan dari tutorial tentang ‘Cara Membuat Efek ’Blur’ dan Memberi ‘Warna’ Text-Shadow di CSS3‘. Selamat mencoba.

Tutorial Lainnya dari Penulis:









Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Ikuti Kami di Sosmed!

        

Berlangganan Tutorial Gratis Melalui Email!

Copyright © 2020 Inwepo - All Rights Reserved.

To Top