Lycoris Responsive Blogger Template

Tasarımı çok beğendiğim bir tema Lycoris blogger teması düzenlenmesi sanırım Aisuka Blog tarafından yapılmış siz tabi bu temayı kendinize göre düzenliyebilirsiniz. Temada üst menü fixed menu olarak ayarlanmış aşağı indikçe menü sizi takip ediyor ayrıca search yani (arama kutusu) temanın en altında çıkıyor çok farklı bir özellik olmuş ve diğer beğendiğim kısım ise post alanı çok şık duruyor :)

• Demo
• Download

Yukarı çık buttonu eklentisi

Siteniz için yukarı çık buttonu bu eklenti eminimki her tasarımda oluyor ama bazı temalarda olmuyabiliyor ve bu eklentiyi arıyan arkadaşlarımız var sanırım :) bana bir kaç kez kullandığım temanın yukarı çık buttonunu soran olmuştu ve bende bugün yazim dedim ne zamandır konuda yazamıyordum grip yüzünden biraz kendime gelince bunu konu olarak ekliyim dedim belki işinize yarıyabilir.
Bu eklentiyi yabancı bir sitede gördüm öncelikle onuda söyleyeyim. Şimdi kodlarımızı nasıl ekliyices onuda anlatalım

öncelikle   <head> ve </head> kodlarının arasına aşağıdaki kodu ekliyices

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"></link>

2. ci olarak css kodlarını ekliyoruz ]]></b:skin> bu kodu bulup ve üstüne aşağıdaki css kodlarını ekliyoruz

.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.element:before {
    content: "\f000"; 
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--sesuaikan sebagai tambahan--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}

3. son işlem olarak jQuery kodunu ekliyices </body> kodunu buluyoruz üstüne aşağıdaki kodu ekliyoruz

<div class="smoothscroll-top">
<span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type="text/javascript">
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>

• Demo

Css ile hazırlanmış Buttons

Css ile hazırlanmı çok şık bir button diğer button şekillerine göre bunlar birazdaha farklı ve fontella icon kullanılarak yapılmış iconları fontella icon sitesinden istediğiniz iconu ekliyerek değiştirebilirsiniz.

• Demo
• Download

Css animations Notification duyuru eklentisi

Yine güzel bir Notification eklentisi bu eklentiyi duyuru eklentisi olarak kullana bilirsiniz Notification eklentisi 12 efekten oluşuyor farklı şekillerde görünüm sağlıyor diğer basit duyuru eklentilerinden daha iyi oludğunu söyliyebilirim. yine demo ve download şeklinde vericem siz eklentiyi indirip zipli klasörün içindeki dosyaları çıkartıp kendinize göre düzenliyebilirsiniz

• Demo
• Download

Efektli Notifications uyarı eklentisi

CSS animations efektli olarak  tasarlanmış çok güzel bir notifications eklentisi bazı arkadaşlarımız bu tarz eklentileri sitelerinde kullanıyor bu eklenti diğerlerinden biraz daha profosyonel olarak hazırlanmış demosunu izlediğinizde farkedeceksiniz. bu uygulamayı düzenliyen yine http://tympanus.net/ sitesidir.

• Demo
• Download

Responsive Multi-Level Menu

Responsive multi menü 5 ayrı efekten oluşuyor menü görüntü olarakda çok iyi duruyor sizde kendiniz istediğiniz gibi menüyü düzenliyip kullanabilirsiniz. Menüyü oluşturan kişi http://tympanus.net sitesidir siteyi incelediğinizde daha farklı menüler veya eklentilere ulaşabilirsiniz.

• Demo
• Download

Nodefire css menü hazırlama programı

Nodefire css menü hazırlama programı kendinize bu programla hazır css menü hazırlıyabilirsiniz programın kullanımı çok basittir bir zamanlar bu programı çok kullanırdım. Kendinizi bu program sayesinde`de css menü  hazırlama konusunda biraz daha geliştirebilirsiniz.
Programı indirdiğiniz taktirde zaten   kullanımın ne kadar kolay olduğunu göreceksiniz.

Kısaca bu programı nasıl kullanacağımızı anlatalım

programı kurduğumuzda ve açtığımızda bu şekilde bir görüntü çıkar burdan dikey veya yana doğru uzayan menü kullancak isek resimde gördüğümüz vertical dikey menüyü veya yana doğru ise Horizontal tıklıyoruz. All-Default da hepsi içindir. Menümüzü seçtikden sonra sağ alttaki show selected template buttonuna tıklıyoruz.

2 ci kısımda menüyü seçtikden sonra üsteki resimdeki gibi karşınıza menü çıkar siz bunu özelleştirmek için ise sağ altta Customize Menü yazan bottona tıklıyoruz ve çıkan sayfada menümüzü özellştiriyoruz.

bu kısımda`da menü hazır bir şekilde karşımıza çıkıyor burda size kalmış sol taraftaki panelden menü renklerini değiştirirsiniz veya menüye efeckt verirsiniz isterseniz bu şekilde sade olarak kullanırsınız tabiki şunlarıda söylemek istiyorum css veya html azda olsa bilmeniz gerekiyor bu konuda pek birşey bilmiyorsanız bu program size biraz zor gelebilir. Ama program  çok kullanışlı bir program.

Konumuza döncek olursak Evet menümüzü de özelleştirdik diyelim kırmızı ile daire içine aldığım yerde css veya html kodları vardır siz onları  kopyalıyarak menünüzü oluşturuyorsunuz. hepsi bu kadardır.




Download

Simple Responsive Menu

Siteniz için çok güzel  bir responsive menü orjinal rengi turuncu  siz menüyü istediğiniz gibi ayarlıyabilirsiniz menüyü sitenize ekliyebilmeniz için öncelikle blogger giriş yapıyoruz. sonrasında şablonumuzu genişleterek html düzenle diyoruz ve ilk olarak css kodlarımızı ekliyoruz şablonumuzda bu kodu ]]></b:skin> bulup css kodlarını hemen üstüne ekliyoruz

 DEMO

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
#menum {
  background: #f96e5b;
  width: auto;
}
#menum ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  display: block;
  zoom: 1;
}
#menum ul:after {
  content: ' ';
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#menum ul li {
  float: left;
  display: block;
  padding: 0;
}
#menum ul li a {
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 15px 25px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;
}
#menum ul li a:hover {
  color: #333333;
}
#menum ul li a:hover:before {
  width: 100%;
}
#menum ul li a:after {
  content: '';
  display: block;
  position: absolute;
  right: -3px;
  top: 19px;
  height: 6px;
  width: 6px;
  background: #ffffff;
  opacity: .5;
}
#menum ul li a:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #333333;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}
#menum ul li.last > a:after,
#menum ul li:last-child > a:after {
  display: none;
}
#menum ul li.active a {
  color: #333333;
}
#menum ul li.active a:before {
  width: 100%;
}
@media screen and (max-width: 768px) {
  #menum ul li {
    float: none;
  }
  #menum ul li a {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  #menum ul li a:after {
    display: none;
  }
  #menum ul li a:before {
    height: 1px;
    background: #ffffff;
    width: 100%;
    opacity: .2;
  }
  #menum ul li.last > a:before,
  #menum ul li:last-child > a:before {
    display: none;
  }
}

Sonra aşağıdaki html kodlarını kendinize göre düzenleyip yerleşim bölgesinden gadget ekle diyerek ekliyebilirsiniz yada tema şablonunuzdan menüyü eklemek istediğiniz yere ekliyebilirsiniz.

<div id='menum'>
<ul>
   <li class='active'><a href='index.html'><span>Ana sayfa</span></a></li>
   <li><a href='#'><span>Deneme</span></a></li>
   <li><a href='#'><span>Güncel</span></a></li>
<li><a href='#'><span>Blogger</span></a></li>
<li><a href='#'><span>wordpress</span></a></li>
<li><a href='#'><span>Link 1</span></a></li>
<li><a href='#'><span> Link 2</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Font awesome css icon kullanımı

Font awasome bir çok sitede kullanılan  bir özelliktir css ile icon oluşturmak için kullanılıyor. Sitenizde linklere css ile icon ekliyebiliyorsunuz Bir örneğini bizde uyguladık font awasome iconlarını kullanarak bir katagori ve 468x60 reklam alanlı oluşturduk slider altında vede sidebar kısmında katagori  kısımlarından görebilirsiniz
Bu iconları menülerinizede ekliyebilirsiniz. kullanımı çok basit olan bir uygulama sitenizede görsel  anlamda farklılık katabiliryor.
Font awasome iconlarını nasıl kullanırız kısaca anlatalım.

1. Öncelikle iconları çağırmamız için <head> kodunun altına şu linki eklememiz gerekiyor.

<link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css' rel='stylesheet'/>

2.Sonra iconların işlevselliğini sağlamak için ]]></b:skin> bu kodu bulup hemen üzerine aşağıdaki css kodunu ekliyoruz.

.element:before {
    content: "\f000";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}

3. Linklerin kullanımı için ise Burdaki siteye girerek iconlara tıklayarak icon kodlarını alıp linklerinizde iconları oluşturabilirsiniz.

Siteye girdiğiniz zaman zaten ekliyeceğiniz kodlar karşınıza çıkıyor siz sadece link oluşturuyorsunuz.

icon boyutlandırma

icon-user
icon-user
icon-user
icon-user

iconların kullanımı aşağıdadır.

<p><i class=" icon-user icon-large"></i> icon-user</p>
<p><i class=" icon-user icon-2x"></i> icon-user</p>
<p><i class=" icon-user icon-3x"></i> icon-user</p>
<p><i class=" icon-user icon-4x"></i> icon-user</p>

iconlara yön verme
normal

icon-rotate-90

icon-rotate-180

icon-rotate-270

icon-flip-horizontal

icon-flip-vertical

iconların kullanımı

<i class=" icon-user"></i>  normal<br>
<i class=" icon-user icon-rotate-90"></i>  90 derece <br>
<i class=" icon-user icon-rotate-180"></i>  180 derece <br>
<i class=" icon-user icon-rotate-270"></i>  270 derece <br>
<i class=" icon-user icon-flip-horizontal"></i>  icon-flip-horizontal<br>
<i class=" icon-user icon-flip-vertical"></i>  icon-flip-vertical

iconları döndürme




iconların Kullanımı

<p><i class=" icon-user icon-2x icon-spin"></i></p>
<p><i class=" icon-user icon-3x icon-spin"></i></p>
<p><i class=" icon-user icon-4x icon-spin"></i></p>

örnek linkler

ornek link 1

ornek link 2

ornek link 3

ornek link 4

Kullanımı bu şekildedir. 

<li><a href="http://www.tolgagonul.net/"><i class=" icon-user icon-2x"></i> ornek link 1  </a></li>
<li><a href="http://www.tolgagonul.net/"><i class=" icon-heart icon-2x"></i> ornek link 2  </a></li>
<li><a href="http://www.tolgagonul.net/"><i class=" icon-rss icon-2x"></i> ornek link 3  </a></li>
<li><a href="http://www.tolgagonul.net/"><i class=" icon-phone icon-2x"></i> ornek link 4  </a></li>

Sadece Css ile Sitenize Animation efekt verin

Sitenizi görsel anlamda ilgi çekici hale getirmek için sitenizde animations efektler verebilirsiniz. bazı sitelerde muhakka görmüşünüzdür kimisinin logosunda siteye girdiğimiz zaman logosu sağdan  veya soldan gelir kimisi yukardan aşağı inerek karşımıza çıkıyor.

Ben size kendi sitemde uyguladığım kodları gösteriğim. uyguladığım kod aşağıdadır. Mavi kısımda belirttiğim alana siz hangi eklentiye efekt vermek istiyorsanız o eklentinin ismini yazıyorsunuz. örnek olarak  sidebar kullanıcaksınız. siz bu alanı  #sidebar-wrapper veya bazılarında .sidebar-wrapper olarakta geçebilir. daha farklıda olabilir  yada post alanı için kullanmak istiyorsanız. o mavi alanı .post olarak değiştirmeniz gerekiyor
css kodu bukadardır başka bi işlem yapmanıza gerek kalmıyor.

Bu efekler sitenizde herhangi bir kasma veya zorlanma  yaratmaz çünki ekliceğimiz kod çok kısa javascript gerektirmiyor sadece css olarak eklememiz yeterli olacaktır.

Blogger şablonumuz genişletip ]]></b:skin> burdaki kodu bulup aşağıdaki kodları hemen üstüne eklemeniz hepsi bu kadar.

2 ci olarak verdiğim adresteki kodları alıp sadece aşağıdaki kodları değiştirin yeşil olanları yani üstekiler sabit kalcak ve birde sadece animations efek isimleri değişceksiniz.ben örnek olarak  ( fadeInDown ) kullanmışım siteye  girdiğiniz zaman efekt isimleri görürsünüz zaten

@keyframes fadeInDown {
from{transform:translate(-1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}
}

#content-wrapper { animation : fadeInDown 3s; }



@-webkit-keyframes fadeInDown{
0%{opacity:0;-webkit-transform:translateY(-20px)}
100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInDown{
0%{opacity:0;-moz-transform:translateY(-20px)}
100%{opacity:1;-moz-transform:translateY(0)}
}
@keyframes fadeInDown{
0%{opacity:0;transform:translateY(-20px)}
100%{opacity:1;transform:translateY(0)}
}
.fadeInDown{
-webkit-animation-name:fadeInDown;
-moz-animation-name:fadeInDown;
animation-name:fadeInDown
}

Sizin değiştirmeniz gereken yerler aşağıdada verdiğim adresteki 2 ci olanda o siteye girdiğiniz zaman yukarda`da resimde belirttiğim alanlar kopyalacaksınız  sadece .
Diğer efektler içinde yine aynı işlemi yapıcaksınız.


1. Animation efek isminin nasıl göründüğünü test etmek için bu siteyi inceleyin.

http://daneden.github.io/animate.css/

2. Animation efek css kodları eklemek için burdaki siteden  kodları alıcaksınız.

https://dl.dropboxusercontent.com/s/jz1hh3xb6dl7nn3/animation.css

3D Button css ve html

Sitenizde çok güzel kullanacağınız bir eklenti görsellik olarakta çok iyi bir 3d button eklentisi çoğu sitelerde kullanılıyor ve bizimde kullandığımız bir uygulama demo ve download buttonlarınıza şekil verebilirsiniz. Kullanımı çok basit olan bir css ve html le hazırlanmış bir eklenti

Önizlemesini ve kodlara aşağıdan ulaşabilirsiniz.

See the Pen xvGbg by Tolga GönüL (@JoenCarLos) on CodePen.

Attractive Css3 Sleek Menu Bar For Blogger

bu menüler blogger için kullana bileceğiniz en iyi menüler diye bilirim çok şık bir css3 olarak hazırlanmıs bir menü  kodu kullana bilmeniz için html editörünü açıp ]]></b:skin> kodunu arattırıp hemen üstüne aşağıdaki kodu yapıştırınız..

 

/* The CSS Code for the menu starts here bloggertrix.com */
#container1 {
width: 960px;
margin: 0 auto;}
.menu33{height:40px;border-right:1px solid rgba(255,255,255,0.3);float:left;}a{text-decoration:none;color:#FFFFFF;text-transform:uppercase;font-size:15px;font-weight:bold;}ul{margin:0;padding:10px 10px ;}
a:link {color:#ffffff;}
a:hover {color:#ffffff;text-decoration: none;}
a:visited {color: #FFFDFD;text-decoration: none;}
ul.menu33 li{list-style:none;float:left;height:40px;text-align:center;background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)));background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);}
ul li a{display:block;padding:0 20px;border-left:1px solid rgba(255,255,255,0.1);border-right:1px solid rgba(0,0,0,0.1);text-align:center;line-height:40px;background:-webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(69,69,69)));background:-moz-linear-gradient(top,rgb(168,168,168),rgb(69,69,69));-webkit-transition-property:background;-webkit-transition-duration:700ms;-moz-transition-property:background;-moz-transition-duration:700ms;}
ul li a:hover{background:transparent none;}
ul[rel=sam1] li a{background:#606060;}
ul[rel=sam1] li a:hover{background:transparent none;}
ul li.active a{background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)));background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);}

ve daha sonra HTML/Javascript gadget olarak ekliceğiniz kod aşağıdadır..

DEMO

<div id="container1">
<ul class="menu33" rel="sam1">
<li class="active"><a href="http://tolgagonul.net/">Home</a></li>
<li><a href="http://tolgagonul.net/">About</a></li>
<li><a href="http://tolgagonul.net/">Blog</a></li>
<li><a href="http://tolgagonul.net/">Services</a></li>
<li><a href="http://tolgagonul.net/">Support</a></li>
<li><a href="http://tolgagonul.net/">Sales</a></li>
<li><a href="http://tolgagonul.net/">Contacts</a></li>
</ul>
</div>

Blogger Transition Css3 Menubar

yine blogger için yabancı bir sitede gördüğüm süper bir menü :) gerçekten çok güzel duruyo hemen görüp paylaşmak istedim ve menüyü veriyorum önce ]]></b:skin> kodunu aratıp buluyorus ve daha sonra aşağıdaki kodu ekliyorus 

DEMO
 

/* The CSS Code for the menu starts here bloggertrix.com */

@import url(http://fonts.googleapis.com/css?family=Dosis:400,700);


.navbar {
 font-family: 'Dosis', sans-serif;
 position:relative;
 display:table;
 float:none;
 list-style-type:none;
 padding:0;
 margin:20px auto 250px auto;
}
.navbar:before {
 position:absolute;
 display:block;
 content: "";
 z-index:-1;
 width:100%;
 height:18px;
 bottom:-9px;
 left:2px;
 background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 75%);
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.7)), color-stop(75%,rgba(0,0,0,0)));
 background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%); 
 background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
 background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
 background: radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#00000000',GradientType=1 );
 opacity:.4;
}
.navbar:after {
 position:absolute;
 display:block;
 content: "";
 z-index:-1;
 width:100%;
 height:100%;
 top:0;
 left:0;
 -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
 box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}
.navbar > li {
 position:relative;
 float:left;
 display:inline-block;
 list-style-type:none;
 text-align:center;
 margin:0;
 border-left:0;
 border:1px solid rgba(0,0,0,0.5);
 line-height:35px;
 -webkit-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
    box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
 -webkit-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -ms-transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 transition: all 300ms ease-in-out;
}
.navbar.color1 > li {
 background:#ea7900;
}
.navbar.color2 > li {
 background:#336277;
}
.navbar.color3 > li {
 background:#3e781b;
}
.navbar.color4 > li {
 background:#ad2259;
}
.navbar.color5 > li {
 background:#b20a22;
}
.navbar > li:before {
 position:absolute;
 display:block;
 content: "";
 z-index:1;
 width:100%;
 height:100%;
 left:0;
 top:0;
 background: -moz-linear-gradient(top,  rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.16) 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.15)), color-stop(100%,rgba(0,0,0,0.16)));
 background: -webkit-linear-gradient(top,  rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);
 background: -o-linear-gradient(top,  rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);
 background: -ms-linear-gradient(top,  rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);
 background: linear-gradient(top,  rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26ffffff', endColorstr='#29000000',GradientType=0 );
}
.navbar > li:after {
 position:absolute;
 display:block;
 content:"";
 width:100%;
 height:100%;
 top:0;
 left:0;
 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OERFQkEzRUJDNUM5MTFFMUE3NzBCMTZBMEExNEQ5NUQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OERFQkEzRUNDNUM5MTFFMUE3NzBCMTZBMEExNEQ5NUQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4REVCQTNFOUM1QzkxMUUxQTc3MEIxNkEwQTE0RDk1RCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4REVCQTNFQUM1QzkxMUUxQTc3MEIxNkEwQTE0RDk1RCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiSp0pIAAAAySURBVHjaYmBgYOAHYmYGCADR/CDiDxDzQAW5gPgLlM3ACsQKUBqhBYjZkY3CMBMgwACvHQKnyUp+6gAAAABJRU5ErkJggg==");
}
.navbar > li.drpdown a > span{
 margin-right:30px;
}
.navbar > li.drpdown > a:after {
 position:absolute;
 content: "\0025bc";
 z-index:1;
 font-size:8px;
 top:0;
 right:10px;
 color:#fff;
 text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.8);
    filter: dropshadow(color=#000, offx=0, offy=-1);
 -webkit-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -ms-transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 transition: all 300ms ease-in-out;
}
.navbar > li.drpdown a:hover:after,.navbar > li a:hover {
 color:#ccc;
}
.navbar > li.drpdown:hover .drpcontent {
 display:block;
}
.navbar > li:first-child {
 border-left:1px solid #1a1a1a;
}
.navbar > li:last-child {
 -webkit-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
    box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25), inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25); 
}
.navbar > li > a {
 position:relative;
 display:block;
 width:100%;
 text-decoration:none;
 font-size:12px;
 color:#fff;
 text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
    filter: dropshadow(color=#000, offx=0, offy=-1);
 z-index:4;
 -webkit-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -ms-transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 transition: all 300ms ease-in-out;
}
.navbar > li:hover {
 -webkit-box-shadow: inset 0px -2px 8px 0px rgba(0, 0, 0, 0.35);
 box-shadow: inset 0px -2px 8px 0px rgba(0, 0, 0, 0.35); 
}
.navbar > li > a > span {
 position:relative;
 font-weight:bold;
 margin:0 15px 0 0;
}
.navbar > li  .drpcontent {
 position:absolute;
 display:none;
 margin:0;
 padding:20px 0 0 0;
 z-index:5;
 top:36px;
 min-width:200%;
 float:none;
 list-style-type:none;
 border:1px solid #737373;
 border-top:0;
 -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25),inset 0px 6px 4px -4px rgba(0, 0, 0, 0.5);
 box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25),inset 0px 6px 4px -4px rgba(0, 0, 0, 0.5);
 -webkit-border-radius: 0px 0px 4px 4px;
 border-radius: 0px 0px 4px 4px;
 background: rgb(249,249,249);
 background: -moz-linear-gradient(-45deg,  rgba(249,249,249,1) 0%, rgba(229,229,229,1) 100%);
 background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(249,249,249,1)), color-stop(100%,rgba(229,229,229,1)));
 background: -webkit-linear-gradient(-45deg,  rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);
 background: -o-linear-gradient(-45deg,  rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);
 background: -ms-linear-gradient(-45deg,  rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);
 background: linear-gradient(135deg,  rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e5e5e5',GradientType=1 );
 -webkit-transition: opacity 300ms ease-in-out;
 -moz-transition: opacity 300ms ease-in-out;
 -ms-transition: opacity 300ms ease-in-out;
 -o-transition: opacity 300ms ease-in-out;
 transition: opacity 300ms ease-in-out;
}
.navbar > li:not(:last-of-type) .drpcontent {
 left:-1px;
}
.navbar > li:last-child .drpcontent {
 right: -1px;
}
.drpcontent li {
 position:relative;
 text-align:left;
 border-bottom:1px solid rgba(0, 0, 0, 0.2);
 font-size:12px;
 line-height:35px;
 height:35px;
 font-weight:bold;
 -webkit-box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.2);
 box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.2);
 overflow:hidden;
}
.drpcontent li:before {
 position:absolute;
 display:block;
 content: "";
 width:100%;
 height:100%;
 top:-100%;
 left:0;
 background: #cecece;
 -webkit-transition: all 500ms ease-in-out;
 -moz-transition: all 500ms ease-in-out;
 -ms-transition: all 500ms ease-in-out;
 -o-transition: all 500ms ease-in-out;
 transition: all 500ms ease-in-out;
 opacity:0;
}
.drpcontent li:after {
 position:absolute;
 display:block;
 content: "\0025b6";
 height:20px;
 width:20px;
 top:0;
 left:6px;
 font-size:8px;
 -webkit-transition: all 500ms ease-in-out;
 -moz-transition: all 500ms ease-in-out;
 -ms-transition: all 500ms ease-in-out;
 -o-transition: all 500ms ease-in-out;
 transition: all 500ms ease-in-out;
}
.drpcontent li:hover:before {
 top:0;
 opacity:0.8;
}
.drpcontent li:hover:after {
 color:#fff;
 left:12px;
}
.drpcontent li:last-child:hover:before {
 -webkit-border-radius: 0px 0px 4px 4px;
 border-radius: 0px 0px 4px 4px;
}
.drpcontent li a {
 display:block;
 height:100%;
 width:100%;
 position:relative;
 color:#000;
 text-decoration:none;
 width:100%;
 padding-left:20px;
 -webkit-transition: all 500ms ease-in-out;
 -moz-transition: all 500ms ease-in-out;
 -ms-transition: all 500ms ease-in-out;
 -o-transition: all 500ms ease-in-out;
 transition: all 500ms ease-in-out;
}
.drpcontent li:hover a{
 color:#fff;
 padding-left:26px;
}
.drpcontent li:first-child {
 border-top:1px solid #a6a6a6;
}
.drpcontent li:last-child {
 border:0;
 -webkit-box-shadow:none;
 box-shadow:none; 
 -webkit-border-radius: 0px 0px 4px 4px;
 border-radius: 0px 0px 4px 4px;
}
.icon20{
 position:relative;
 float:left;
 display:block;
 width:20px;
 height:20px;
 margin:6px 8px 0 8px;
 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAoCAYAAAA16j4lAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjJERkRDNTBDNUQ0MTFFMUI3QjJDOTZFNDMzQ0IwMjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjJERkRDNTFDNUQ0MTFFMUI3QjJDOTZFNDMzQ0IwMjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MkRGREM0RUM1RDQxMUUxQjdCMkM5NkU0MzNDQjAyNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2MkRGREM0RkM1RDQxMUUxQjdCMkM5NkU0MzNDQjAyNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Psj8MzMAAA91SURBVHja7FxbbBTV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") no-repeat;
 -webkit-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -ms-transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 transition: all 300ms ease-in-out;
}
.icon20.home {background-position:0 0;}
.icon20.upload {background-position:-20px 0;}
.icon20.download {background-position:-40px 0;}
.icon20.comments {background-position:-60px 0;}
.icon20.theme {background-position:-80px 0;}
.icon20.login {background-position:-100px 0;}
.navbar > li:hover .icon20.home {background-position:0 -20px;}
.navbar > li:hover .icon20.upload {background-position:-20px -20px;}
.navbar > li:hover .icon20.download {background-position:-40px -20px;}
.navbar > li:hover .icon20.comments {background-position:-60px -20px;}
.navbar > li:hover .icon20.theme {background-position:-80px -20px;}
.navbar > li:hover .icon20.login {background-position:-100px -20px;}

ve daha sonra html/javascript olarak gadget olarak eklicemis kod ise aşağıdadır..

<ul class="navbar color1">
<li><a href="http://www.tolgagonul.net"><i class="icon20 home"></i>Home</a></li>
<li><a href="http://www.tolgagonul.net"><i class="icon20 upload"></i>Upload</a></li>
<li><a href="http://www.tolgagonul.net"><i class="icon20 download"></i>Download</a></li>
<li class="drpdown"><a href="http://www.tolgagonul.net"><i class="icon20 comments"></i>Posts</a>
  <ul class="drpcontent">
<li><a href="http://www.tolgagonul.net">Latest Posts</a></li>
<li><a href="http://www.tolgagonul.net">Popular Posts</a></li>
<li><a href="http://www.tolgagonul.net">Private Posts</a></li>
</ul>
</li>
<li><a href="http://www.tolgagonul.net"><i class="icon20 login"></i>Login</a></li>
<li class="drpdown"><a href="http://www.bloggertrix.com/"><i class="icon20 theme"></i>Themeselector</a>
  <ul class="drpcontent" id="themeselect">
<li><a data-color="color1" href="http://www.tolgagonul.net">Orange</a></li>
<li><a data-color="color2" href="http://www.tolgagonul.net">Marine</a></li>
<li><a data-color="color3" href="http://www.tolgagonul.net">Green</a></li>
<li><a data-color="color4" href="http://www.tolgagonul.net">Purple</a></li>
<li><a data-color="color5" href="http://www.tolgagonul.net">Red</a></li>
</ul>
</li>
</ul>

Attractive Pure CSS3 Menu Bar for Blogger

blogger sitenize güzel bir pure css3 menu daha  3 de birbirinden güzell duruyo unu eklemeniz için html editör açıp ]]></b:skin> arattırıp hemen üstüne aşağıdaki kodları ekleyin

Demo

/* The CSS Code for the menu starts here bloggertrix.com */
ul.btrix_cssTabs   {
 
 background: #848383;
 border:solid 1px #606060;
 padding: 0 75px;
 width: 705px;
 margin:20px 0;
 font-size:12px;
 font-weight:bold;
 background:-moz-linear-gradient(0% 100% 90deg,#737373, #9a9a9a);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#9a9a9a), to(#737373));
  box-shadow: inset 0 1px 0 0 #dfdfdf;
 -moz-box-shadow: inset 0 1px 0 0 #dfdfdf;
 -webkit-box-shadow: inset 0 1px 0 0 #dfdfdf;
 border-radius: 8px 8px;
 -moz-border-radius: 8px 8px;
 -webkit-border-radius: 8px 8px;
 
}
ul.btrix_cssTabs > li {
 background:#989898;
 color:#3a3a3a;
 border:solid 1px #606060; 
 border-bottom:0; 
 display: inline-block;
 margin: 10px 1px -1px;
 padding: 8px 20px;
 background:-moz-linear-gradient(0% 100% 90deg,#9a9a9a, #888888);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#888888), to(#9a9a9a));
 box-shadow: inset 0 1px 0 0 #dfdfdf;
 -moz-box-shadow: inset 0 1px 0 0 #dfdfdf;
 -webkit-box-shadow: inset 0 1px 0 0 #dfdfdf;

 text-shadow: 1px 1px 0 #d3d3d3;
}

ul.btrix_cssTabs > li.active,ul.btrix_cssTabs > li:hover {
 background:#ededed;
 background:-moz-linear-gradient(0% 100% 90deg,#f0f0f0, #d1d1d1) !important;
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d1d1), to(#f0f0f0)) !important;
 box-shadow: inset 0 1px 0 0 #fff;
 -moz-box-shadow: inset 0 1px 0 0 #fff;
 -webkit-box-shadow: inset 0 1px 0 0 #fff; 
 text-shadow: none;
 cursor:pointer;
}

ul.btrix_cssTabs.blue{
 
 background: #237e9f;
 border-color:#20617f;
 background:-moz-linear-gradient(0% 100% 90deg,#217092, #2d97b8);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#2d97b8), to(#217092));
 box-shadow: inset 0 1px 0 0 #a8e3f0;
 -moz-box-shadow: inset 0 1px 0 0 #a8e3f0;
 -webkit-box-shadow: inset 0 1px 0 0 #a8e3f0;

}
ul.btrix_cssTabs.blue > li,ul.btrix_cssTabs.blue > li:hover {
 background:#2ca0c1;
 color:#1a4760;
 border-color:#20617f;
 background:-moz-linear-gradient(0% 100% 90deg,#2ca1c3, #2687aa);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#2687aa), to(#2ca1c3));
box-shadow: inset 0 1px 0 0 #a8e3f0;
 -moz-box-shadow: inset 0 1px 0 0 #a8e3f0;
 -webkit-box-shadow: inset 0 1px 0 0 #a8e3f0;
text-shadow: 1px 1px 0 #8cd9e8;
 
}

ul.btrix_cssTabs.blue > li.active {
  box-shadow: inset 0 1px 0 0 #fff;
 -moz-box-shadow: inset 0 1px 0 0 #fff;
 -webkit-box-shadow: inset 0 1px 0 0 #fff; 
 text-shadow: none;
}

ul.btrix_cssTabs.orange{
 
 background: #d75125;
 border-color:#9c2c09;
background:-moz-linear-gradient(0% 100% 90deg,#d44b22, #ea753d);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ea753d), to(#d44b22));
 box-shadow: inset 0 1px 0 0 #f5b497;
 -moz-box-shadow: inset 0 1px 0 0 #f5b497;
 -webkit-box-shadow: inset 0 1px 0 0 #f5b497;

}
ul.btrix_cssTabs.orange > li, ul.btrix_cssTabs.orange > li:hover {
 background:#e1693e;
 color:#5a2818;
 border-color:#9c2c09;
 background:-moz-linear-gradient(0% 100% 90deg,#e47a48, #dd5733);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#dd5733), to(#e47a48));
box-shadow: inset 0 1px 0 0 #f5b497;
 -moz-box-shadow: inset 0 1px 0 0 #f5b497;
 -webkit-box-shadow: inset 0 1px 0 0 #f5b497;
text-shadow: 1px 1px 0 #f3c6b3;
 
}
ul.btrix_cssTabs.orange > li.active {
 box-shadow: inset 0 1px 0 0 #fff;
 -moz-box-shadow: inset 0 1px 0 0 #fff;
 -webkit-box-shadow: inset 0 1px 0 0 #fff; 
 text-shadow: none;
}

Daha Sonra html/javasicript olarak yani gadget olarak aşağıdaki kodları ekliceksiniz.. Gri menü için

Home
Points
Percent
Contact Us

Mavi Menü için

Home
Points
Percent
iContact Us

Turuncu Menü için

Home
Points
Percent
Contact Us

CSS Sprite Görsel - Image Sprites

Sayfamızda ki görsellerin (butonlar,logolar,ikonlar vs.) tümünü veya bir kısmını tek görselde birleştirmeye Sprite / Çoklu Görseldeniliyor. Sayfamızda ki her görselin ayrı ayrı yüklenmesi fazla zaman alabilmektedir, bu nedenle Sprite Görsel kullanımı bize hız kazandıracaktır. Sprite Görsel sunucu isteklerinin sayısını azaltır ve bant genişliği tasarrufu da sağlar.

İhtiyacınıza göre görselleri alt alta veya yan yana birleştirebilirsiniz.

Aşağıda ki tek parça olan sprite görseli nasıl kullanacağımızı görelim...

CSS kodu:

.spriteBir {
    list-style: none;
    width: 20px;
    height: 23px;
    padding-top: 12px;
    background: url('/images/sprite.jpg') no-repeat 0 0;
}
.spriteIki {
    list-style: none;
    width: 20px;
    height: 20px;
    padding-top: 5px;
    background: url('/images/sprite.jpg') no-repeat 0 -62px;
}
a {
    padding-left: 50px;
}

background özelliği içinde verilmiş olan değişik bir değer görüyoruz ( background: url('/images/sprite.jpg') no-repeat 0 -62px; ). Bu bir kombine CSS kullanımıdır (Sıfır değerlerinde px , % , em vb kullanımlara gerek yoktur.). Aslında orada ki kullanım şu anlama gelmektedir: background-position: 0 -62px;. Bu kullanımı hatırlamak için buraya tıklayabilirsiniz

CSS Saydam Görsel - Image Opacity

Internet Explorer için saydam görsel özelliği filter: alpha(opacity=x) ile sağlanır, 0 ile 100 arası saydamlık değeri verilebilir. Diğer tarayıcılar için ise opacity: x ile sağlanır ve 0.0 ile 1.0 arası saydamlık değeri alabilir. Kodumuzun aşağıdadır.

Örnek olarak görelim...

 

İlk örneğin kodunu görelim...

<img src="test.jpg" width="200" height="150" alt="yuklenemedi" 
style="opacity: 1.0; filter: alpha(opacity=100);" 
onmouseover="this.style.opacity=0.6; this.filters.alpha.opacity=60" 
onmouseout="this.style.opacity=1.0; this.filters.alpha.opacity=100" />

İkinci örneğin kodunu görelim...

<img src="test.jpg" width="200" height="150" alt="yuklenemedi" 
style="opacity: 0.6; filter: alpha(opacity=60);" 
onmouseover="this.style.opacity=1.0; this.filters.alpha.opacity=100" 
onmouseout="this.style.opacity=0.6; this.filters.alpha.opacity=60" />

CSS Kutu Modeli

CSS " Kutu modeli " tasarım amacıyla kullanılmaktadır. Kutuların (div) diğer kutular ile olan mesafesini veya kutu içinde ki içerik ile kutu arasında ki mesafeyi ayarlamak için kullanılır. Ayrıca kutunun kenar kalınlığıda belirleyebiliriz, bu özellikleri ilerleyen konularda ayrıntılı olarak göreceğiz.

" Kutu modeli " HTML/XHMTL etiketlerinin etrafını saran bir kutudur " Kutu modeli " , margin (Dış kenar boşluğu), border (Kenar kalınlığı), padding (İç kenar boşluğu) ve içerikten oluşur.

• margin - Asıl div 'in (Turuncu renklere sahip olan kutunun) diğer kutulara, görsellere, içeriklere vs. olan mesafesini belirler. Yani margin özelliği turuncu kutuya kimsenin yaklaşmamasını sağlar.
• border - Turuncu kutunun kalınlığının ne kadar olacağını, çerçeve stilini ve çerçeve rengini belirtmek için kullanılır.
• padding - Turuncu kutu ile turuncu kutu içerisinde ki içeriğin arasında ki mesafeyi belirlemek için kullanılır.
• İçerik - Bizim tarafımızdan belirtilen metinler, görseller vs. yer alır.

" width " ve " height " 'ın tüm tarayıcılarda doğru çalışması için " Kutu Modeli " nin nasıl çalıştığının bilinmesi gerekmektedir.

CSS Genişlik ve Yükseklik Özelliği - Width & Height of an Element

" width " ve " height " ile sadece içeriğin boyutlarını belirlersiniz. Toplam boyut için padding, border ve margin'i de hesaba katmanız gerekir.

Toplam boyutu 350px (piksel) olan bir örneği görelim...

width: 300px; 
padding: 10px;
border: 5px solid gray;
margin: 10px;

Genişliği Hesaplayalım...

300px (width 'den (Genişlikten) geliyor.)
+ 20px (Sağdan ve Soldan verilen padding'lerden (İç Kenar Boşluğundan) geliyor.)
+ 10px (Sağdan ve Soldan verilen border 'dan (Kenar Kalınlığından) geliyor.)
+ 20px (Sağdan ve Soldan verilen margin'lerden (Dış Kenar Boşluğundan) geliyor.)
= 300px

Yalnızca 250px alanımız olduğunu düşünelim ve 250px toplam genişliğe sahip bir kutu / eleman yapalım.

width: 220px; 
padding: 10px;
border: 5px solid gray;
margin: 0px;

Bir elemanın toplam genişliği hep böyle hesaplanmalıdır;

Toplam eleman genişliği = width + sağ padding + sol padding + sağ border + sol border + sağ margin + sol margin .

Bir elemanın toplam yüksekliği hep böyle hesaplanmalıdır;

Toplam eleman yüksekliği = height + üst padding + alt padding + üst border + alt border + üst margin + alt margin .