Membuat Price Tag Dengan CSS - Hallo sahabat Jendela Dunia Internet Dan Tekhnologi, Pada Artikel yang anda baca kali ini dengan judul Membuat Price Tag Dengan CSS, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Web Design, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Price Tag Dengan CSS
link : Membuat Price Tag Dengan CSS

Membuat Price Tag Dengan CSS

Membuat Price Tag Dengan CSS - Halo geng, gimana kabarnya, smoga baik ya gengs, hari ini masih heboh harbolnas nih hahaa, udah beli apa kalian ??, pastikan apa yang kalian beli adalah barang2 yang emang dibutuhkan ya gengs, jangan sampe beli barang tapi ga tau buat apaan, kan sayang banget uangnya..

Juragan juga pengen ikutan trend nih, berhubung masih hebohnya hari belanja online nasional, Juragan pengen bikin Price Tag dengan css, siapa tau kamu pngn bikin toko online, atau sekedar coba coba ningkatin skill coding kamu, tampilannya sederhana sih, tapi keren, efek tumpukan gitu, hehe. Ya sudah lah di mulai saja. ini untuk kode HTMLnya.

<div class="event">
  <span>#001</span>
  <div class="info">
    MAY 21, 2015 <br />
    Juragan Coding
  </div>
  <div class="price">
    $1,500
  </div>
</div>

setelah itu masukan style sheet nya gengs :

.event {
  font-family: 'Open Sans', sans-serif;
  width: 300px;
  height: 80px;
  background: #fff;
  border: 1px solid #CCC;
  border-radius: 2px;
  margin: 50px;
}
.event:before {
  content: '';
  display: block;
  width: 295px;
  height: 70px;
  background: #fff;
  border: 1px solid #CCC;
  border-radius: 2px; 
  transform: rotate(2deg);
  position: relative;
  top: 12px;
  left: 2px;
  z-index: -1;
}
.event:after {
  content: '';
  display: block;
  width: 295px;
  height: 75px;
  background: #fff;
  border: 1px solid #CCC;
  border-radius: 2px; 
  transform: rotate(-2deg);
  position: relative;
  top: -136px;
  z-index: -2;  
}
.event > span {
  display: block;
  width: 30px;
  background: #232323;  
  position: relative;
  top: -55px;
  left: -15px;
  color: #fff;
  font-size: 10px;
  padding: 2px 7px;
  text-align: right;
}
.event > .info {
  display: inline-block;
  position: relative;
  top: -75px;
  left: 40px;
  color: #232323;
  font-weight: 600;
  line-height: 25px;
}
.event > .info:first-line {
  text-transform: uppercase;
  font-size: 10px;
  margin: 10px 0 0 0;
  font-weight: 700;
}
.event > .price {
  display: inline-block;
  width: 60px;
  position: relative;
  top: -85px;
  left: 115px; 
  color: #E35354;
  text-align: center;
  font-weight: 700;
}

Setelah jadi kira kira hasilnya sepeti ini :

Gimana gengs, mudah kan Membuat Price Tag Dengan CSS ini, udah dulu ya gengs, dadahh :D

Demikianlah Artikel Membuat Price Tag Dengan CSS

Sekianlah artikel Membuat Price Tag Dengan CSS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Price Tag Dengan CSS dengan alamat link http://jendeladuniainternet.blogspot.com/2015/12/membuat-price-tag-dengan-css.html

Tweet