Cara Membuat Efek Shadow dan Transitions Pada Teks atau Box

Membuat Shadow Effect dan Transitions Effect ternyata cukup mudah, kita hanya perlu melakukan pengembangan pada kode CSS nya saja dan menambahkan kode baru dari CSS3. Apakah sobat pernah melihat sebuah tombol atau teks yang memiliki efek shadow? atau sebuah gambar dipostingan yang memiliki efek bayangan pada pembatas-pembatasnya? atau juga pernah melihat saat cursor mouse diarahkan ke suatu box, maka box tersebut akan membersar secara perlahan?Sekarang kita akan mencoba untuk membuat semua itu.

Sebagai contoh, jika dulu saya ingin membuat sub judul yang terlihat keren, saya menggunakan gambar yang dibuat dari photoshop, atau sebuah tombol (button) yang mentereng pasti juga menggunakan gambar yang dibuat dari photoshop atau sejenisnya. Sekarang kita tidak perlu lagi melakukan hal tersebut. karena sobat akan bisa membuatnya sendiri hanya dengan menambahkan beberapa kode didalam CSS, dengan hasil seperti dibawah ini.

Kita coba dulu untuk memberi shadow pada sebuah teks, misalnya saya ingin membuat sub judul pada postingan dengan efek shadow, seperti dibawah ini.

Mari kita coba buat sebuah Class saya beri contoh akan membuat class dengan nama .subjudul .

CSS

.subjudul {
  display: block;
    font-size: 25px;
    margin: 10px 0 10px 0;
    text-shadow: 1px 1px 3px red;
}

HTML

<span class="subjudul">Contoh Sub Judul Dengan Efek Shadow</span>

Output

Contoh Sub Judul Dengan Efek Shadow

Silahkan sobat bereksperimen, ganti font-size sesuai selera, ganti warna pada text-shadow sesuai selera, disana saya buat red jika ingin mengganti warna teks nya, silahkan di tambah properti baru didalam CSS nya yaitu color contoh color: blue; baiklah, kita akan lanjut ke yang lain.

Cara Membuat Efek Box Shadow

Sekarang kita akan coba membuat box shadow, mari kita buat class baru, beri nama sesuai selera, misal saya ingin membuat sebuah box shadow untuk button dan diberi nama tombolku , berikut CSS, HTML serta Output yang akan dihasilkan.

CSS

.tombolku {
    background-color: blue;
    border: 1px solid red;
    color: white;
    padding: 6px 20px;
    text-align: center;
    font-size: 20px;
    margin: 4px 2px;
    box-shadow: 3px 3px 5px #333; }

HTML

<button class="tombolku">Ini Tombol</button>

Output

Silahkan dicoba-coba untuk mengganti background, border, warna teks, teks size, dan juga box shadow nya.

Cara Membuat Efek Transitions

Mungkin sudah banyak dari sobat yang tau apa itu transition effects (efek transisi), transition adalah jenis dari CSS3 sama dengan efek shadow, bagaimana bentuk efek transition itu, dapat sobat demo dibawah ini, silahkan arahkan cursor ke kotak yang saya buat ini.

Cursor Kesini / Tap Disini (pengguna mobile)

Baiklah, sekarang kita akan membuat seperti yang diatas terlebih dahulu. Saya berikan contoh lagi akan membuat sebuah class dengan nama .transisiku , yang sobat perlukan selanjutnya hanya menambahkan kode CSS transition, dapat sobat lihat dibawah kode lengkap yang saya gunakan untuk membuat seperti diatas barusan.

CSS

.transisiku {
    width: 100px;
    height: auto;
    text-align: center;
    background: red;
    transition: width 2s linear 0.5s;
}

.transisiku:hover {
    width: 300px; }

HTML

<div class="transisiku">Cursor Kesini / Tap Disini (pengguna mobile)</div>

Output

Cursor Kesini / Tap Disini (pengguna mobile)

Keterangan: transition: width 2s artinya adalah saat objek tersebut ber-transisi akan memakan waktu 2 detik, sedangkan linear 0.5s adalah waktu yang dibutuhkan saat hendak ber-transisi, jadi jika sobat ingin transisi nya tidak delay saat cursor mengarah ke objek, silahkan di hapus properti linear nya.

Diatas adalah contoh sederhananya saja, karena transisi dapat sobat kembangkan untuk macam-macam kebutuhkan, misalnya menjadi sebuah efek untuk navmenu atau input box, sebagai contoh, kita buat transisi untuk sebuah kotak input search box atau kotak pencarian, kita buat dulu class contoh saya beri nama .box-pencarian

CSS

.box-pencarian {
width: 100px;
transition: width 1s;
}

.box-pencarian:focus {
width: 300px;
}

HTML

Cari: <input class="box-pencarian" />

Output

Cari:

Keterangan nya sama dengan yang sebelumnya, jadi tidak perlu saya jelaskan lagi ya.

Sepertinya hanya itu yang dapat saya sampaikan. Namun, sebelum saya tutup, bagaimana jika kita coba menggabungkan semua yang telah kita bahas diatas untuk diterapkan pada sebuah gambar didalam postingan, kita dapat memberi efek bayangan serta transition.

Cara Membuat Efek Transform dan Transition Pada Gambar Postingan

Baiklah untuk yang terakhir ini, kita tetap menggunakan class. Mengapa saya selalu menggunakan class, karena jika saya langsung memberikan kode CSS ke elemen ( <div> / <span> / <img> atau yang lainya) maka itu akan mempengauri semua yang ada di dalam postingan yang menggunakan tag tersebut. Jadi, akan lebih baik jika menggunakan class karena dapat kita atur objek mana yang akan diberikan efek.

Disini contohnya saya memberikan nama class .efekgambar nama class dapat sobat tentukan sesuka hati, yang penting tidak terdapat simbol atau angka diawal nama, misalnya .8efekgambar nama class ini tidak dapat di terima, sobat boleh menggunakan angka untuk penamaan class, namun tempatkan angka tersebut di tengah atau diakhir nama, seperti yang sudah saya jelaskan pada postingan sebelumnya yang berjudul Mengenal Properti Margin, Padding, Border, Color dan Backround Pada CSS Serta Penerapanya

Berikut adalah kode CSS lengkap, serta penerapanya pada HTML.

CSS

.efekgambar{
border: 1px solid #ccc;
box-shadow: 0 0 2px;
transition: all 0.5s;   /* atau pindahkan ke img:hover dan hasil nya akan berbeda*/
}

.efekgambar:hover {
border: 1px solid #333 !important;
box-shadow: 2px 2px 5px;
transform: scale(1.1);   /* properti tambahan: atur scale sesuai kebutuhan */
}

HTML

<img class="efekgambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4_NYqDerbCNbYmkY8A4_vYSPXAQaphsTo7kD79fJpylhiDDdcJCwCxAtfO-oqVMYf_9qjrtgPdROWm0QStHPD4LMWTgylc9hKg98CrVKgYV7BDcnW9bleo8YX_vKF-MRBYZT1bpQAJgc/w140-h140-p/contact-form-image.jpg" />

Output

Silahkan di Bereksperimen dan dikembangkan sendiri apa yang telah kira bahas diatas, semoga artikel kali ini dapat membantu sobat sekalian, jika ada yang ingin ditanyakan, silahkan jangan sungkan.

sumber referensi : w3schools.com

Info4You Info4You Update Pada: February 01, 2017