June 03, 2019

MEMBUAT KARTU PROFILE: PERANAN CSS DAN HTML DALAM DESAIN WEB

web design
web design
Contoh dunia modern adalah peranan digital yang merasuk sampai jauh ke sendi sendi kehidupan kita. Kartu kredit mulai di ganti dengan kartu dan ID virtual dalam bentuk digital, yang diklaim jauh lebih memudahkan, lebih aman dan lebih cepat.

HTML dan CSS sangat berperan dalam hal desain, contoh template editblogtema ini dibuat dengan HTML dan CSS, pembuatannya sangat sederhana dan mudah namun mampu menghasilkan efek efek warna, bentuk border dan animasi yang memukau. Saya akan memberikan contoh pembuatan kartu hanya dengan dua elemen ini.

1. CSS

Tambahkan kode CSS berikut, kalau mau menerapkannya langsung ke halaman blog setiap untaian kode CSS yang dibuka dengan <style> dan kemudian ditutup dengan </style> ya letakan diatas </head>
<style>body { font-family: Arial, Helvetica, sans-serif;}.flip-card { background-color: transparent; width: 300px; height: 300px; perspective: 1000px;}.flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);}
.flip-card:hover .flip-card-inner { transform: rotateY(180deg);}.flip-card-front, .flip-card-outer { position: absolute; width: 100%; height: 100%; backface-visibility: hidden;}.flip-card-back { background-color: red; color: white;}.flip-card-front { background-color: red; color: blue; transform: rotateY(180deg);}</style>

2. HTML

Tambahkan saja HTML dibawah ini kalau menerapkannya keblogspot setiap kode HTML yang dibuka atau diawali tag <duv> dan kemudian ditutup dengan </div> ya letakan dibawah kode <body> atau dibawah kode </head>
<h1>Kartu Tanda Pengenal</h1><h3>Sentuh dengan jari atau kursor mouse:</h3>
<div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="https://1.bp.blogspot.com/-x9ySxhwcVe0/XPTIZ6_ktZI/AAAAAAAAmRE/La9-fANZ-bcFe5-RZnKwZlXM-O--yGUGgCLcBGAs/s1600/collage_1556976585604%2B%25281%2529.jpg" alt="Avatar" style="width:300px;height:300px;"> </div> <div class="flip-card-back"> <h1>Edit Blogtema</h1> <p>Writer & Constributor</p> <p>at www.editblogtema.net</p> </div> </div></div>

3. Itu saja semuanya dan selesai.

Perhatikan kode yang saya sorot kuning adalah link sumber photo yang telah saya save terlebih dahulu di halaman blog atau di google drive, dan google photo juga boleh. Sedangkan tulisan warna merah bisa sobat robah sesuai dengan keperluan, misalnya jika ingin menjadikan kartu ini sebagai profile unik blogspot.

Sobat bisa mengkopi dan menggabungkannya semua kode diatas lalu masuk ke setting blogspot tambahkan widget/gadget, pilih HTML/JavaScript kemudian pada kotak blanko kosong yang muncul pastekan seluruh kodenya dan SAVE. Dalam bentuk widget kita dapat menempatkan posisinya dimana kita suka.

Lihat DEMO sidebar blog Anissa

Atau lihat ihat hasilnya dibawah artikel ini (profile Anissa):

www.editblogtema.net

A coding addict, a hard smoker, love boxing even not a boxer. Love maths even not a scientist

4 comments:

  1. hasilnya lumayan bagus Mas, ada efek rotasinya lagi....cocok untuk pesan perkenalan ke sesama teman blogger

    ReplyDelete
    Replies
    1. Sebenarnya itu hanya contoh, dengan memodifikasi material CSS-nya, akan dapat dibuat jauh lebih indah he he he...murni CSS HTML sangat ringan

      Delete
  2. Kereeeennn.. itu buat sendiri mas kode-kodenya? :D

    ReplyDelete
    Replies
    1. Kode kode ya ditulis dari contoh contoh yang pernah kita pelajari, itu kan sudah pernah diajarkan di bangku sekolah dasar dasar koding, hanya saja ternyata Google mengajarkan lebih banyak he he he..

      Delete