Membuat Logo Article [Pabk-4yOu] dengan CSS

Membuat Logo Article [Pabk-4yOu] dengan CSS

Translate
Info [K-moe] - Membuat Logo Article [Pabk-4yOu] dengan CSS. Semakin hari trick css semakin maju dan berkembang untuk membuat gambar-gambar, logo, dll. dapat menggunakan CSS. So sudah waktunya bagi kita untuk belajar Trick CSS karena menurut saya akan sangat berguna khususnya bagi para blogger...

<div class="container">
<div class="a"><span>A</span></div>
<div class="null" href="/" itemprop="url" title="Article [Pabk-4you]">  
<span class="logo" >
<span class="matakiri"></span>
<span class="matakanan"></span>
<span class="mulut"></span> 
</span>
</div>
<div class="p"><span>P</span></div>
<div class="y"><span>Y</span></div>
</div>
<div class="nama">Article [Pabk-4yOu]</div>


*{padding: 0;margin: 0;
  font-family: arial;
  font-size: 26px;
  outline: none;
}
.container{
  width:100px;
  background: #222;
}
.container div{
  display: table;
}
.container div span{
  display: table-cell;    
  text-align: center;
  vertical-align: middle;
  color: #ddd;
}
.a, .null, .p, .y{
  width:50px;
  height:50px;float:left;
}
.a{
  background: #970202;    
  z-index: -9999;
  position: relative;  border-radius:5px
}
.null{
  background: #222;  border-radius:5px
}
.p{
  background: #1B9297;;
  border-radius:5px
}
.y{
  background: #F87209;
  -webkit-transform: rotate(50deg);
  border-radius:5px;padding:2
}
.logo{
  position: relative;
  background: #383838;
  border-radius:50% ;}

.matakiri, .matakanan {
  position: relative;
  background: #bbb;
  width: 10px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  height:5px;
}
.matakiri {
  top:-10px;
  left: 10px;
}
.matakanan {
  top:-10px;
  left: 20px;
}
.mulut{
  top:10px;
  left:-8px;
  width:25px;
  position:relative;
  background: #bbb;
  border-radius: 0 0 45px 45px;
}
.null:hover{
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-animation: a0 .2s infinite alternate .5s;
  -moz-animation: a0 .2s infinite alternate .5s;
  -ms-animation: a0 .2s infinite alternate .5s;
  -o-animation: a0 .2s infinite alternate .5s;
  animation: a0 .2s infinite alternate .5s;
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -ms-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;}
.null:focus{
  width:80px;
  background:#fff
}
.nama{  
  background:#bbb;
  padding:5px;
  font-size:40%;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  display:block;
  position:absolute;
  left:70px;
  top:40px;}

Demo

Lihat Juga

Semakin hari trick css semakin maju dan berkembang untuk membuat gambar-gambar, logo, dll. dapat menggunakan CSS
Reaksi :
Share :
Print/Save
Blok kemudian tekan tombol Ctrl dan huruf C pada keyboard secara bersamaan untuk copy artikel di atas. Bagi pengguna Google Chrome bisa menyimpan halaman ini dalam bentuk *pdf melalui tombol print/save di atas.! Bagi yang mau repost ulang harap untuk mencantumkan tautan/sumber!..

Jika Anda menyukai , Share melalui social media di atas (satu suka dari anda sangat berarti bagi kami. Tuliskan kritik dan saran anda pada form komentar di bawah! Ketikan email dan klik subcribe untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Info [K-Moe].

Halaman relevan lainnya
Beri Komentar