Css & Grafik Paylaşımlar

<div class="container-barra">
<div class="barra-outer">
<div class="barra-interior"></div>
</div>
<div style="clear:both"></div>
<div class="porcentaje">
<div class="esquinita"></div>
<div class="porcentaje-visual">40%</div>
</div>
</div>

.container-barra {
width: 80%;
margin: 10px 10%;
}
.barra-outer {
width: 100%;
height: 32px;
border: 3px solid #cccccc;
background: #ffff99;
}
.barra-interior {
width: 40%;
height: 32px;
background: #ffcc00;
}
.porcentaje {
margin-left: 40%;
float: left;
padding-left: 3px;
}
.porcentaje .esquinita {
width: 1px;
height: 1px;
border-top: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #cccccc;
}
.porcentaje .porcentaje-visual {
background: #cccccc;
padding: 5px;
border-radius: 0px 5px 5px 5px;
text-align: center;
}

<div class="sharing_box">
<div class="tweet-share"><a href="https://twitter.com/share" class="twitter-share-button" data-via="iAxtrix" data-lang="es" data-count="vertical">Twittear</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
<div class="facebook-share"><iframe src="//www.facebook.com/plugins/like.php?href&amp;send=false&amp;layout=box_count&amp;width=70&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:90px;" allowTransparency="true"></iframe></div>
<div class="sharing-text">
<h4><span style="color: rgb(255, 153, 0);"><strong>Merhaba!</strong></span></h4>
<p><span style="color: rgb(255, 204, 0);">Bu b&ouml;l&uuml;me sosyal bağlantılarını ekleyebilirsin.</span></p>
</div>
<div style="clear: both"></div>
</div>

.sharing_box {
background: #F9F9F9 url(http://wakpaper.com/large/Antique_wallpapers_219.jpg) no-repeat -70px -151px;
border-color: #000000;
border-style: solid;
border-width: 2px 1px 2px;
display: block;
height: 70px;
margin: 20px 0 0;
padding: 20px;
width: 584px;
}
.facebook-share {
float: left;
}
.tweet-share {
float: left;
margin: 0 15px 0 0;
}
.sharing-text {
display: inline-block;
float: right;
margin-right: 27px;
width: 300px;
text-align: justify;
}
.sharing-text p{
font-family:Helvetica,Arial,sans-serif;
font-size: 11px;
}
.sharing-text h4 {
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}

body {
 color: transparent;
 background: -webkit-linear-gradient(transparent, transparent),
             url(http://stylegerms.com/wp-content/uploads/2013/06/pattern-family-01-single1.jpg) repeat;
 -webkit-background-clip: text;
 -moz-background-origin: border;
 -webkit-background-origin: border;
 -webkit-background-origin: border-box;
 background-origin: border-box;
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
   font:bold 72px Arial, Helvetica, sans-serif;   
}

 /*  Bdalli.tr.gg scrollbar - 3 çizginin olduğu yer */
::-webkit-scrollbar-thumb {background:#333 url(http://img.webme.com/pic/g/gonez/scrollbar.gif) no-repeat center center; border:1px solid #222}

 /* Bdalli.tr.gg scrollbar - Scrollbar'ı boyutlandırabilirsiniz. */
::-webkit-scrollbar {width: 17px; height: 10px; }

/* Buraları genel ayar sakın ellemeyin */
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {display:none;}
::-webkit-scrollbar-track-piece { background-color: #5b5b5b;}

<style type="text/css"> #tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;} #tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;} #tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;} #tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;} #tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;} #tbisose .icon{overflow:hidden; color:#fafafa;} #tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;} #tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;} #tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;} #tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;} #tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;} #tbisose li:hover .icon, .touch #tbisose li .icon{width:210px;} .touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);} .touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);} .touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);} .touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);} .touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);} </style>
<ul id="tbisose">
    <li data-alt="Fcebook'ta takip et"><a class="icon facebook" href="http://facebook.com/rootdraqo">Facebook'ta Takip Et</a></li>
    <li data-alt="Twitter'da takip et"><a class="icon twitter" href="http://twitter.com/rootdraqo">Twitter'da Takip Et</a></li>
    <li data-alt="Google+'da takip et"><a class="icon googleplus" href="https://plus.google.com/">Google+'da Takip Et</a></li>
    <li data-alt="Pinterest'te takip et"><a class="icon pinterest" href="http://pnterest.com/rootdraqo">Pinterest'te Takip Et</a></li>
    <li data-alt="RSS İle Takip Et"><a class="icon rss" href="http://feeds.feedburner.com/rootdraqo">RSS İle Takip Et</a></li>
</ul>

img
{
width:400px;
height:400px;
border:#0000FF dotted 5px
}

table table {
   border: 2px solid #d9d9d9;
   padding: 15px;
   border-radius:9px;
   margin-bottom: 10px!important;
   background-color:#dedede;
}
hr {display:none;}
form {
background: #dedede;
border: 2px solid #d9d9d9;
padding: 1px;
border: 1px dashed #e0e0e0;
padding:10px;
margin:7px;
border-radius:9px;
}
#below_content{margin-bottom:-950px;}
font[color="green"]{
background-color:#00E566;
border:1px solid #00B233;
color:#000000;

<style type="text/css">
body{
   margin:0;
   padding:0;
}
ul#menu, ul#menu ul{
  padding: 0;
  margin: 0;
  list-style: none;
  }
 
ul#menu li {
   float: left;
   position: relative;
   width: 250px;
   height: 100;
}

ul#menu li ul {
   display: none;
   position: absolute;
}

ul#menu li > ul {
top: auto;
left: auto;
}

ul#menu li a {
font: bold 11px verdana, arial, helvetica, sans-serif; <!-- FONT ÖZELLİKLERİ -->
display: block;
margin: 0;
padding: 0px 0px;
height: 250px;
width: 100px;
color: #ffffff;
background-image: url(http://cdesignnblog.files.wordpress.com/2014/02/bac59flc4b1k1111sc4b1z-1.png);
text-decoration: none;
text-align: center;
text-valign: bottom;
}

ul#menu li a:hover {
color: #68b5db;
text-align: center; nnblog.files.wordpress.com/2014/02/az1.png);
}

ul#menu li:hover ul, ul#menu li.over ul {
   display: block;
}
   
</style>  <script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over",

"");
   }
   }
  }
 }
}
window.onload=startList;

</script>
<ul id="menu">
    <li><img src="http://cdesignnblog.files.wordpress.com/2014/02/az5.png" width="250" height="100"></a>
    <ul>
        <li><a href="SAYFA LİNKİ"><img src="http://cdesignnblog.files.wordpress.com/2014/02/az11.png" width="250" height="100"></a></li>
        <li><a href="SAYFA LİNKİ"><img src="http://cdesignnblog.files.wordpress.com/2014/02/az2.png" width="250" height="100"></a></li>
        <li><a href="SAYFA LİNKİ"><img src="http://cdesignnblog.files.wordpress.com/2014/02/az3.png" width="250" height="100"></a></li>
        <li><a href="SAYFA LİNKİ"><img src="http://cdesignnblog.files.wordpress.com/2014/02/az4.png" width="250" height="100"></a></li>
    </ul>
    </li>

<style type="text/css">
body{
   margin:0;
   padding:0;
}
ul#menu, ul#menu ul{
  padding: 0;
  margin: 0;
  list-style: none;
  }
 
ul#menu li {
   float: left;
   position: relative;
   width: 250px;
   height: 100;
}

ul#menu li ul {
   display: none;
   position: absolute;
}

ul#menu li > ul {
top: auto;
left: auto;
}

ul#menu li a {
font: bold 11px verdana, arial, helvetica, sans-serif; <!-- FONT ÖZELLİKLERİ -->
display: block;
margin: 0;
padding: 0px 0px;
height: 250px;
width: 100px;
color: #ffffff;
background-image: url(http://cdesignnblog.files.wordpress.com/2014/02/bac59flc4b1k1111sc4b1z-1.png);
text-decoration: none;
text-align: center;
text-valign: bottom;
}

ul#menu li a:hover {
color: #68b5db;
text-align: center; nnblog.files.wordpress.com/2014/02/az1.png);
}

ul#menu li:hover ul, ul#menu li.over ul {
   display: block;
}
   
</style>  <script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over",

"");
   }
   }
  }
 }
}
window.onload=startList;

</script>
<ul id="menu">
    <li><img src="http://cdesignnblog.files.wordpress.com/2014/02/as5.png" width="250" height="100"></a>
    <ul>
        <li><a href="SAYFA LİNKİ"><img src="http://cdesignnblog.files.wordpress.com/2014/02/as1.png" width="250" height="100"></a></li>
        <li><a href="SAYFA LİNKİ"><img src="http://cdesignnblog.files.wordpress.com/2014/02/as2.png" width="250" height="100"></a></li>
        <li><a href="SAYFA LİNKİ"><img src="http://cdesignnblog.files.wordpress.com/2014/02/as3.png" width="250" height="100"></a></li>
        <li><a href="SAYFA LİNKİ"><img src="http://cdesignnblog.files.wordpress.com/2014/02/as4.png" width="250" height="100"></a></li>
    </ul>
    </li>
   

<style type="text/css">
body{
   margin:0;
   padding:0;
}
ul#menu, ul#menu ul{
  padding: 0;
  margin: 0;
  list-style: none;
  }
 
ul#menu li {
   float: left;
   position: relative;
   width: 250px;
   height: 100;
}

ul#menu li ul {
   display: none;
   position: absolute;
}

ul#menu li > ul {
top: auto;
left: auto;
}

ul#menu li a {
font: bold 11px verdana, arial, helvetica, sans-serif; <!-- FONT ÖZELLİKLERİ -->
display: block;
margin: 0;
padding: 0px 0px;
height: 250px;
width: 100px;
color: #ffffff;
background-image: url(http://cdesignnblog.files.wordpress.com/2014/02/bac59flc4b1k1111sc4b1z-1.png);
text-decoration: none;
text-align: center;
text-valign: bottom;
}

ul#menu li a:hover {
color: #68b5db;
text-align: center; nnblog.files.wordpress.com/2014/02/az1.png);
}

ul#menu li:hover ul, ul#menu li.over ul {
   display: block;
}
   
</style>  <script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over",

"");
   }
   }
  }
 }
}
window.onload=startList;

</script>
<ul id="menu">
    <li><img src="http://cdesignnblog.files.wordpress.com/2014/02/ad5.png" width="250" height="100"></a>
    <ul>
        <li><a href="SAYFA LİNKİ"><img src="http://cdesignnblog.files.wordpress.com/2014/02/ad1.png" width="250" height="100"></a></li>
        <li><a href="SAYFA LİNKİ"><img src="http://cdesignnblog.files.wordpress.com/2014/02/ad2.png" width="250" height="100"></a></li>
        <li><a href="SAYFA LİNKİ"><img src="http://cdesignnblog.files.wordpress.com/2014/02/ad3.png" width="250" height="100"></a></li>
        <li><a href="SAYFA LİNKİ"><img src="http://cdesignnblog.files.wordpress.com/2014/02/ad4.png" width="250" height="100"></a></li>
    </ul>
    </li>
</ul>

style type=textcss
body{
   margin0;
   padding0;
}
ul#menu, ul#menu ul{
  padding 0;
  margin 0;
  list-style none;
  }
 
ul#menu li {
   float left;
   position relative;
   width 250px;
   height 100;
}

ul#menu li ul {
   display none;
   position absolute;
}

ul#menu li  ul {
top auto;
left auto;
}

ul#menu li a {
font bold 11px verdana, arial, helvetica, sans-serif; !-- FONT ÖZELLİKLERİ --
display block;
margin 0;
padding 0px 0px;
height 250px;
width 100px;
color #ffffff;
background-image url(httpcdesignnblog.files.wordpress.com201402bac59flc4b1k1111sc4b1z-1.png);
text-decoration none;
text-align center;
text-valign bottom;
}

ul#menu li ahover {
color #68b5db;
text-align center; nnblog.files.wordpress.com201402az1.png);
}

ul#menu lihover ul, ul#menu li.over ul {
   display block;
}
   
style  script type=textjavascript
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById(menu);
for (i=0; inavRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName==LI) {
node.onmouseover=function() {
this.className+= over;
  }
  node.onmouseout=function() {
  this.className=this.className.replace( over,

);
   }
   }
  }
 }
}
window.onload=startList;

script
ul id=menu
    liimg src=httpcdesignnblog.files.wordpress.com201402cd5.png width=250 height=100a
    ul
        lia href=httpcdesignnblog.wordpress.comimg src=httpcdesignnblog.files.wordpress.com201402cd1.png width=250 height=100ali
        lia href=httpswww.facebook.comCDesignnBlogimg src=httpcdesignnblog.files.wordpress.com201402cd2.png width=250 height=100ali
        lia href=httpstwitter.comCnqzhnnnimg src=httpcdesignnblog.files.wordpress.com201402cd3.png width=250 height=100ali
        liimg src=httpcdesignnblog.files.wordpress.com201402cd4.png width=250 height=100ali
    ul
    li
    liimg src=httpcdesignnblog.files.wordpress.com201402az5.png width=250 height=100a
    ul
        lia href=SAYFA LİNKİimg src=httpcdesignnblog.files.wordpress.com201402az11.png width=250 height=100ali
        lia href=SAYFA LİNKİimg src=httpcdesignnblog.files.wordpress.com201402az2.png width=250 height=100ali
        lia href=SAYFA LİNKİimg src=httpcdesignnblog.files.wordpress.com201402az3.png width=250 height=100ali
        lia href=SAYFA LİNKİimg src=httpcdesignnblog.files.wordpress.com201402az4.png width=250 height=100ali
    ul
    li
    liimg src=httpcdesignnblog.files.wordpress.com201402as5.png width=250 height=100a
    ul
        lia href=SAYFA LİNKİimg src=httpcdesignnblog.files.wordpress.com201402as1.png width=250 height=100ali
        lia href=SAYFA LİNKİimg src=httpcdesignnblog.files.wordpress.com201402as2.png width=250 height=100ali
        lia href=SAYFA LİNKİimg src=httpcdesignnblog.files.wordpress.com201402as3.png width=250 height=100ali
        lia href=SAYFA LİNKİimg src=httpcdesignnblog.files.wordpress.com201402as4.png width=250 height=100ali
    ul
    li
    liimg src=httpcdesignnblog.files.wordpress.com201402ad5.png width=250 height=100a
    ul
        lia href=SAYFA LİNKİimg src=httpcdesignnblog.files.wordpress.com201402ad1.png width=250 height=100ali
        lia href=SAYFA LİNKİimg src=httpcdesignnblog.files.wordpress.com201402ad2.png width=250 height=100ali
        lia href=SAYFA LİNKİimg src=httpcdesignnblog.files.wordpress.com201402ad3.png width=250 height=100ali
        lia href=SAYFA LİNKİimg src=httpcdesignnblog.files.wordpress.com201402ad4.png width=250 height=100ali
    ul
    li
ul

<div style="position:absolute; top:0; left:0;">
<img src="http://img.webme.com/pic/a/analogfikir/unutmayacagiz_soma.gif" alt="Y&uuml;reğimiz k&ouml;m&uuml;r karasında g&ouml;l&uuml;m&uuml; &quot;SOMA&quot;" width="150" height="151" title="Y&uuml;reğimiz k&ouml;m&uuml;r karasında g&ouml;l&uuml;m&uuml; &quot;SOMA&quot;" />
</div>

/* KODDERSİM.TR.GG BUTON KODU BAŞLANGIÇ */
a.buton {
background-color: #000;
padding: 5px 10px;
color: #fff;
font-family: Old Republic;
font-weight: bold;
text-decoration: none;
}
a.buton:hover {
color: red;
transition: all .5s ease-in;
}       
/* KODDERSİM.TR.GG BUTON KODU BİTİŞ */ 

<a href="#" class="buton">Buton</a>