Minggu, 23 Juni 2013

Desain profil css3/html


profile design

Bingung setiap masuk blog mau ngapain, jalan2 keblog-blog temen belum juga dapat inspirasi, desain box profil ini sudah beberapa hari didalam folderku sekarang dari pada bingung aku bagi aja nih...

<div id='zto_profile'>
<div class='foto'><img src='foto-anda.jpg'/></div>
<div class='data'>
<p><b>ZHINTO</b></p>
<table>
<tbody>
<tr>
<td>Tempat</td>
<td>: Rawamangun (SULSEL)</td>
</tr>
<tr>
<td>Hobi</td>
<td>: Denger musik / Ngeblog / Main gitar</td>
</tr>
<tr>
<td>Status</td>
<td>: { pengangguran }</td>
</tr>
</tbody></table>
</div>
<div style='clear:both'></div>
<div class='sos'>
<a class='fb' href='#'>Facebook</a>
<a class='tw' href='#'>Twitter</a>
<a class='tw d' href='#'>Profil Blogger</a>
</div>
</div>

/*
ZTO Creation
http://zhinto.blogspot.com/
*/#zto_profile {
width: 400px;
margin: 0 auto;
padding: 10px;
border-bottom: 3px solid #44515A;
overflow: hidden;
color: #171820;
background: #1696C5;
background: -moz-linear-gradient(-45deg, #53abcc 0%, #2a88b7 50%, #0079b2 51%, #2a7ab7 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#53abcc), color-stop(50%,#2a88b7), color-stop(51%,#0079b2), color-stop(100%,#2a7ab7));
background: -webkit-linear-gradient(-45deg, #53abcc 0%,#2a88b7 50%,#0079b2 51%,#2a7ab7 100%);
background: -o-linear-gradient(-45deg, #53abcc 0%,#2a88b7 50%,#0079b2 51%,#2a7ab7 100%);
background: -ms-linear-gradient(-45deg, #53abcc 0%,#2a88b7 50%,#0079b2 51%,#2a7ab7 100%);
background: linear-gradient(135deg, #53abcc 0%,#2a88b7 50%,#0079b2 51%,#2a7ab7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#53abcc', endColorstr='#2a7ab7',GradientType=1 );
}
#zto_profile p {
margin: 0;
padding: 0;
font: normal 14px/20px Arial,sans-serif
}
#zto_profile table {
font: normal 12px/20px Arial,sans-serif
}
#zto_profile abbr {
border-bottom: 1px dotted #999;
cursor: help
}
#zto_profile .foto {
float: left;
margin: 0 10px 0 0;
height: 100px;
width: 75px;
overflow: hidden;
}
#zto_profile .foto img {
width: 100%;
height: 100%;
}
.sos {
background: #288AD8;
background: -moz-linear-gradient(45deg, #53abcc 0%, #2a88b7 50%, #0079b2 51%, #2a7ab7 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#53abcc), color-stop(50%,#2a88b7), color-stop(51%,#0079b2), color-stop(100%,#2a7ab7));
background: -webkit-linear-gradient(45deg, #53abcc 0%,#2a88b7 50%,#0079b2 51%,#2a7ab7 100%);
background: -o-linear-gradient(45deg, #53abcc 0%,#2a88b7 50%,#0079b2 51%,#2a7ab7 100%);
background: -ms-linear-gradient(45deg, #53abcc 0%,#2a88b7 50%,#0079b2 51%,#2a7ab7 100%);
background: linear-gradient(45deg, #53abcc 0%,#2a88b7 50%,#0079b2 51%,#2a7ab7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#53abcc', endColorstr='#2a7ab7',GradientType=1 );
padding: 10px;
margin: 5px 0 0;
overflow: hidden;
position: relative;
left: -10px;
bottom: -10px;
width: 100%;
box-shadow: 0 0 10px rgba(10, 11, 12, 0.7);
-moz-box-shadow: 0 0 10px rgba(10, 11, 12, 0.7);
-webkit-box-shadow: 0 0 10px rgba(10, 11, 12, 0.7);
z-index: 2;
border-top: 1px solid #00B8F1;
text-align: center
}
.sos .fb, .tw {
padding: 5px 10px;
background: #6997E7;
border: 1px solid #0056C2;
-moz-box-shadow: 0 1px 1px rgba(238, 238, 238, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(238, 238, 238, 0.3) inset;
box-shadow: 0 1px 1px rgba(238, 238, 238, 0.3) inset;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
font: bold 11px/20px Arial,sans-serif;
color: #0B4897;
text-decoration: none;
}
.fb {
float: left;
}
.tw {
float: right;
}
.tw.d {
float: none;
display: inline-block;
}
.sos .fb:hover, .tw:hover {
box-shadow: inset 0 0 5px rgba(0,0,0,0.15);
-moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.15)
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.15)
}