CSS Business Card

CSS Business Card - Sebelumnya selamat melaksanakan ibadah puasa bagi teman2 yang menjalankannya, dan mohon maaf lahir bathin.

Setelah sebelumnya cukup lumayan lama gak update sebuah postingan kali ini JPB akan mengawali dengan pembuatan sebuah kartunama atau business name card, yang tentunya dalam hal ini membuat bukan dengan sebenarnya melainkan dengan CSS dan HTML, nah untuk freview hasil jadi kurang lebih tampilannya seperti pada gambar dibawah ini :

kartu nama, business card, css business card, membuat kartu nama dengan css


Nah untuk cara pembuatannya sobat hanya perlu merangkai kode CSS dan HTML dan mengemasnya hehhehhe,
Untuk panduan pemasangan widget silakan klik DISINI

UNTUK KODE HTML NYA
 <div id="efect_warna"></div>
<div id="kartu">
  <img src="DIISI DENGAN LINK GAMBAR SOBAT"/>
  <h2>NAMA SOBAT MUNGKIN</h2>
  <p>JUDUL CONTEN SOBAT</p> 
  <p>CONTEN SOBAT</p>
  <p>CONTEN SOBAT ;)</p>
  <span class="left bottom">+62-8572394-XXXX </span>
  <span class="right bottom">Adress: Sukabumi - Jabar.</span>
</div> 

UNTUK KODE CSS NYA
 .left {
  left: 25px;
}

.right {
  right: 25px;
}

.center {
  text-align: center;
}

.bottom {
  position: absolute;
  bottom: 18px;
}

#efect_warna {
  background: #999955;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.2, #DAB046), color-stop(0.2, #D73B25), color-stop(0.4, #D73B25), color-stop(0.4, #C71B25), color-stop(0.6, #C71B25), color-stop(0.6, #961A39), color-stop(0.8, #961A39), color-stop(0.8, #601035));
  background-image: -webkit-linear-gradient(#DAB046 20%, #D73B25 20%, #D73B25 40%, #C71B25 40%, #C71B25 60%, #961A39 60%, #961A39 80%, #601035 80%);
  background-image: -moz-linear-gradient(#DAB046 20%, #D73B25 20%, #D73B25 40%, #C71B25 40%, #C71B25 60%, #961A39 60%, #961A39 80%, #601035 80%);
  background-image: -o-linear-gradient(#DAB046 20%, #D73B25 20%, #D73B25 40%, #C71B25 40%, #C71B25 60%, #961A39 60%, #961A39 80%, #601035 80%);
  background-image: linear-gradient(#DAB046 20%, #D73B25 20%, #D73B25 40%, #C71B25 40%, #C71B25 60%, #961A39 60%, #961A39 80%, #601035 80%);
  margin: 0 auto;
  margin-top: 100px;
  width: 100%;
  height: 150px;
}

#efect_warna:after {
  content: "";
  position: absolute;
  background: #E9E2D0;
  left: 50%;
  margin-top: -67.5px;
  margin-left: -270px;
  padding-left: 20px;
  border-radius: 5px;
  width: 520px;
  height: 275px;
  z-index: -1;
}

#kartu {
  position: absolute;
  width: 450px;
  height: 225px;
  padding: 25px;
  padding-top: 0;
  padding-bottom: 0;
  left: 50%;
  top: 67.5px;
  margin-left: -250px;
  background: #E9E2D0;
  box-shadow: 0 0 5px black;
  box-shadow: -20px 0 35px -25px black, 20px 0 35px -25px black;
  z-index: 5;
}

#kartu img {
  width: 150px;
  float: left;
  padding: 5px;
  border-radius: 5px;
  margin-right: 20px;
  -webkit-filter: sepia(1);
  -moz-filter: sepia(1);
  filter: sepia(1);
}

#kartu h2 {
  font-family: courier;
  color: #333;
  margin: 0 auto;
  padding: 5px;
  font-size: 15pt;
}

#kartu p {
  font-family: courier;
  color: #555;
  font-size: 13px;
}

#kartu span {
  font-family: courier;
} 

Berlangganan update artikel terbaru via email:

21 Responses to "CSS Business Card"

  1. wew keren sob, barusan ane dah liat demo nya ^_^

    ReplyDelete
    Replies
    1. hehehheh makasih sob support serta kunjungannya

      Delete
  2. jadi ini kaya bikin kartu pengenal gitu ya sob?

    ReplyDelete
    Replies
    1. betul sob atau dengan kata laian kartu nama virtual

      Delete
  3. dapet pelajaran baru lagi dari kang alex, haturnuwun kang :)

    ReplyDelete
    Replies
    1. sama2 mas, terimaksih kembali mas sudah nyempetin berkunjung

      Delete
  4. keren keren banget mas alex joen

    ReplyDelete
    Replies
    1. terimaksih mas atas support serta kunjungannya

      Delete
  5. waduch keren banget mas alex bisa saya coba nie mas,,selalu ada yang baru di KT (h)

    ReplyDelete
    Replies
    1. Terimakasih banyak mas, sekarang bukan KT lagi mas kan udah Reinkarnasi :) :) :)

      Delete
  6. Waduh ...lama ndak berkunjung kesini tampilannya udah ganti nih .
    Warna hijau masih melekat di blog ini....persebaya banget :d

    ReplyDelete
    Replies
    1. emang kemana aja mba...........
      padahal penghuni rumah tua ini dah kangen :)) :)) :))

      Delete
  7. klau aq ingin template'y maz

    ReplyDelete
  8. Replies
    1. keknya tidak pake innerbar juga ga apa apa...
      tinggal pindahin p, a nya ke #bar

      Delete
    2. Betul mas, hehhehheh, terimaksih banyak sudah memberi tambahan yang sangat berguna

      Delete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel