Minggu, 09 November 2014

Membuat Efek Berkilau Dengan CSS Di Blog

Membuat Efek Berkilau Dengan CSS Di Blog merupakan artikel terbaru yang saya buat setelah 2 minggu tidak melakukan update untuk blog ini. Tidak adanya update untuk blog ini dikarenakan ada kesibukan di offline yang tidak bisa dibiarkan dan harus fokus untuk dikerjakan, dan Alhamdulillah semuanya lancar dikerjakan dan akhirnya kembali ke blog ini dengan artikel membuat efek berkilau dengan CSS di blog :)

Membuat Efek Berkilau Dengan CSS Di Blog

Membuat efek berkilau ini murni hanya dengan menggunakan kode CSS tanpa perlu menggunakan Script sehingga lebih memudahkan dalam pemasangannya di blog. Efek berkilau ini menggunakan efek transisi dari sebuah kode CSS yang dikombinasikan dengan penggunaan mouse-over atau efek hover yang ditimbulkan pada element jika pointer mouse diarahkan pada element tersebut

Baca juga Kumpulan efek mouse over atau Klik disini sehingga Anda menemukan efek seperti dibawah ini
Rugi kalau tidak dibaca..

DEMO Efek Berkilau
Dibwah ini adalah beberapa demo dari tampilan efek berkilau yang saya buat. Sorot pada masing-masing objek dan lihat hasilnya
Efek Berkilau Pada Teks
Jika Anda tertarik untuk membuat efek berkilau dengan CSS di blog tersebut didalam blog Anda khususnya untuk judul logo blog seperti yang terlihat pada DEMO diatas, caranya pun sangat mudah dengan menyalin kode CSS berikut ini kedalam kode template blog Anda
.mask-shine {
position:relative;
display:block;
width:150px;
height:64px;
text-align:center;
margin:0 auto;
background:none;
}
.mask-shine:after {
content: "";
position:absolute;
top:0px;
left:0px;
width:0%;
height:100%;
background:rgba(255,255,255,0.4);
-webkit-transition:none;
-moz-transition:none;
-ms-transition:none;
-o-transition:none;
transition:none;}
.mask-shine:hover:after {
width:120%;
background-color:rgba(255,255,255,0);
-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
-ms-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
}
Untuk markup HTML dibuat seperti berikut ini:
<div class="mask-shine">
<a href="#">
<img src="http://2.bp.blogspot.com/-uTWFewrPvR8/VFhifYbeACI/AAAAAAAAF2g/UzeT0U3-ZLw/s1600/logoku.png"/>
</a>
</div>

* Ganti url gambar

Sedangkna untuk membuat efek berkilau pada teks, untuk kode CSSnya sama saja. Hanya perlu menyesuaikan beberapa value seperti lebar, tinggi, warna background, url gambar, dan letak posisi. Silahkan berkreasi :)

Cukup mudah kok untuk membuat efek berkilau dengan CSS di blog seperti yang telah saya jelaskan diatas, hanya perlu mengedit beberapa kode saja untuk merubah tampilannya. Okey, terimakasih :)

Membuat Efek Berkilau Dengan CSS Di Blog Rating: 4.5 Diposkan Oleh: ana sriwahyuni

23 komentar:

  1. inilah kalau bisa menggunakan CSS dengan hover saja sudah bisa sekreatif ne mbak.. keren mbak...

    BalasHapus
    Balasan
    1. Mbak Ana emang jagonya Coding Mas Ehwansah. saya harus belajar banyak nih
      Masa CSS Dan Html mah biar desain blognya sebagus punya Mbak Ana :-bd

      Hapus
    2. saya juga sedang belajar mas...

      Hapus
  2. Tampilan gambarnya bisa ada bercak ber dan kemilau ya Mbak Ana, saya belum pernah nyoba nih Effects ini. ijin coba dulu Mbak Ana.. makasih sudah berbagi *salam silaturrahmi :)

    BalasHapus
    Balasan
    1. silahkan di coba mas, semoga bermanfaat.. :)

      Hapus
    2. woe...mas saud
      jadi manggung nggak nih,koq malah main disini mulu,tuh mbak ananya dah ngantuk

      Hapus
    3. saya sudah bangun lagi mas Yanto.. :)

      Hapus
  3. blog very nice
    http://www.topthemepro.com

    BalasHapus
  4. Memang benar-benar master Bu Ana ni. Hanya dengan CSS sudah bisa buat Efek berkilau di blog. Disamping itu saya lihat ibu juga dengan mudahnya membuat logo blog yang sangat cantik di demo. Kalau boleh tahu pakai alat apa bu ?.

    BalasHapus
    Balasan
    1. saya belum master mbak, masih belajar juga...
      kalau untuk gambar bisa di buat dengan menggunakan photoshop mbak..

      Hapus
    2. Maaf baru balas Bu, Jaringan di tempat saya lemot banget, beberapa kali saya coba buka situs Bu Ana, namun selalu terputus di tengah jalan. Semenjak tahu dari Bu Ana kalau bikin logo pakai photoshop, saya langsung terbang ke sana sini untuk minta bantuan sahabat blogger. Alhamdulillah ada Mas Aan Rusmanto yang bersedia bantu upload photoshop 7.0 di situs nya. Hehe.

      Sukses selalu ya Bu dan di tunggu informasi terbaru lainnya.

      Hapus
    3. makasih banyak mbak...
      oiya untuk photosohop memang lebih mudah menggunakan photoshop 7.0, awalnya saya menggunakannya tapi sekarang sudah menggunakan PS CS6 :)

      Hapus
  5. ternyata sederhana dan mudah ya mbak...trimakasih untuk tipsnya..sangat bermnfaat :)

    BalasHapus
    Balasan
    1. iya mas, bisa dicoba dan diterapkan kedalam blog :)

      Hapus
  6. hemmm...boleh juga nih dicoba mbak

    BalasHapus
  7. Mau tanya mbak, ada pengaruhnya dengan loading blog tidak mbak??

    BalasHapus
    Balasan
    1. Sebelumnya mohon ijin kepada Bu Ana untuk menjawab pertanyaan dari @Koperasi Lestari, hitung-hitung sambil berbagi ilmu yang telah saya dapatkan dari panduantemplateblog.com nya Bu Ana.

      Saya kira membuat efek berkilau di blog ini tidak berpengaruh terhadap loading blog kita, karena tidak menggunakan script eksternal dan hanya murni menggunakan CSS dan kode HTML (< div class = ' ....).

      Akan berpengaruh terhadap loading blog apabila kita menempatkan url gambar dalam kode HTML tadi (Kalau contoh di atas url gambar diapit oleh kode a href).

      Jika ingin gambar tersebut tidak terlalu berpengaruh pada loading blog, mungkin ada 2 cara yang saya ketahui:

      1. Tentukan lebar dan tinggi gambar tersebut dan tambahkan alt untuk menambah nilai SEO gambar agar googlebot tahu gambar kita itu termasuk kategori apa.

      Contohnya:

      Sebelum ditentukan lebar, tinggi, dan alt blog kode HTML nya ini:
      < img src = " http://2.bp.blogspot.com/-uTWFewrPvR8/VFhifYbeACI/AAAAAAAAF2g/UzeT0U3-ZLw/s1600/logoku.png " / >

      Setelah ditentukan lebar,tinggi, dan alt blog kode HTML nya jadi seperti ini:
      < img alt = ' logoku ' src = " http://2.bp.blogspot.com/-uTWFewrPvR8/VFhifYbeACI/AAAAAAAAF2g/UzeT0U3-ZLw/s1600/logoku.png " width= " 100 " height = " 100 "/ >

      2. Ubah url gambar tadi ke bentuk database64 image online. Saya rasa banyak tools converter online yang mengubah url gambar ke bentuk database64 image.

      Mohon maaf Bu Ana kalau kepanjangan, Bu Ana bisa menghapus nya jika kurang berkenan dengan komentar saya ini. Hehehe no heart feeling kok saya Bu.

      Hapus
    2. terimakasih banyak mbak Mami sudah membantu menjelaskan,,
      :)

      Hapus
  8. wah, keren mba, jadi gak ribet harus buat di pothosop klo gini mah, nanti aku coba ah... hehehee

    BalasHapus
    Balasan
    1. hehehe iya mas, bisa dipadukan dengan teks 3D yang saya buat sebelumnya :)

      Hapus
  9. efek kilaunya mirip supermen kalau terbang pake kacamata mba Ana..:)

    BalasHapus
    Balasan
    1. heheee,, sejak kapan supermen pakai kacamata mas, apa karena baca tulisan saya ini ya.. hehee :D

      Hapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia