Membuat Logo Article [Pabk-4yOu] dengan CSS
Oktober 19, 2013
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;}