CSS3 NOTLARIM

#govde #bolum1 p+h3{
margin:20px 0 5px 0;
} //p ve h3 kardeş durumundaki olanları aldık.
-----------------
//cocuk seçici
#govde #bolum1 > ul > li {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #CCC;
list-style-type: none;
padding-left: 30px;
background-image: url(../images/cicek.png);
background-repeat: no-repeat;
line-height: 24px;
background-position: 2px 0px;
}
----------------------
a[href$=".psd"]{
 //.psd uzantılı verdiğimiz linklere css özelliği verebiliri.



}
-----------------
//Alt özelliğinde sıcak geçmeyenlere uygula css özelliklerini
#govde # bolum1 img:not([alt*="Sıcak"]){
border:#33FF99 3px solid;

}
-------------------
//target başlık değiştirildi hedef başlığı(target pseudo-class selectors-hedef seçiciler)
#govde #bolum1 div:target h3{
color:#FFF;
background-color:#666;
font-size:30px;
}
----------------
(ilk ek seçiciler)
a[href^="http://"]{
background:url(../images/ok.png) no-repeat right center;
color:#fc6
}
-------------
//divler içindeki ilk başlığa özellikleri veriyoruz
#govde #bolum1 h3:first-child{
color:red;

}
--------------------------
//divlerin içindeki son elemana uyguladık.
#govde #bolum1 h3:last-of-type{
color:red;

}
-----------------
//liste elemanı seçiciler ikinci elemana bu özeeliiği uygula
#govde #bolum1 ul li:nth-child(2){
color:red;

}
--------------------
//tablo seçiciler
#govde #bolum1 table tr:first-child{ //tablonunu ilk satırına özellikler verdik

}
--------------
//özel eleman seçiciler
#govde #bolum1  img[alt*="Sıcak"]{
border:#FF6600 2px dashed;

}
---------------
//renkler
rgba(250,150,100,0.5)  ;   0.5 dersek saydamlık ayarlıyoruz.(opacity)
--------------------
duz(linear)gradient
background:gradient(linear,left top,left bottom,color-stop(0.25,rgb(76,80,105)),color-stop(0.55,rgb(208,163,202))));
radial gradient
  background: radial-gradient(radial,500,500,25,500,500,300,from(rgb(76,80,105)),to(rgb(208,163,202)));
----------------
//font kullanımı
@font-face{

font-family:"Chalk-Duster";
src:url(../_font/Chalk-Duster/chalkduster-webfont.ttf);
}
#govde #bolum1 p {
font-family:'Chalk-Duster',"Trebuchet MS", Arial, Helvetica, sans-serif;
color: #CCC;
padding: 0px;
margin: 0px;
}
-------------
//yazılara gölge verme(text shadow)
text-shadow:2px 2px 2px #fff;   //x,y,blur,renk

//yazılarda üst üste gölge kullanımı
text-shadow:0px 0px 5px #999999,0px 0px #F90 ,0px 0px 5px #669933 ;
----------------------
//kolon uygulaması (divleri kolon yapma)
#govde #bolum1 h3+div{
-moz-column-count:2;
-webkit-column-count:2; // kaç sutun olacağını söylüyoruz
column-count:2;
-moz-column-width:100px;
-webkit-column-width:100px;
column-width:100px;
-moz-column-gap:40px;// iki sutun arasındaki boşluk
-webkit-column-gap:40px;
column-gap:40px;

//kolonlar arasındaki çizgi yaptık stil özellikleri verdik
-moz-column-rule:1px;
-moz-column-rule-color:#fff;
-moz-column-rule-width:2px;
-moz-column-rule-style:solid;


column-rule:1px;
column-rule-color:#fff;
column-rule-width:2px;
column-rule-style:solid;

text-align:justify;
}

---------------------------
//div yerleştirme modeli
#govde #kutular{
width:100%;
height:1000px;
//divi kutu yaptık.
display:-moz-box;
display:-webkit-box;
display:box;
-webkit-box-orient:horizontal;//divleri yatay olarak yerleştirdik.
-moz-box-orient:horizontal;
box-orient:horizontal;
-moz-box-align:end;
-webkit-box-align:end;
box-align:end;
-moz-box-pack:start;
-webkit-box-pack:start;
box-pack:start;

}
-------------------------------
//divleri ters yerleştirme(reverse box)
#govde #kutular{
width:100%;

//divi kutu yaptık.
display:-moz-box;
display:-webkit-box;
display:box;
-webkit-box-orient:horizontal;//divleri yatay olarak yerleştirdik.
-moz-box-orient:horizontal;
box-orient:horizontal;
     -moz-box-direction:reverse;
-webkit-box-direction:reverse;
box-direction:reverse;

}
---------------------------------
//divleri numaralandırarak yerleştirme
#govde #kutular #birinci {
-moz-box-ordinal-group:5;
-webkit-box-ordinal-group:5;
box-ordinal-group:5;

}
#govde #kutular #ikinci {
-moz-box-ordinal-group:4;
-webkit-box-ordinal-group:4;
box-ordinal-group:4;

}
#govde #kutular #ucuncu {
-moz-box-ordinal-group:3;
-webkit-box-ordinal-group:3;
box-ordinal-group:3;
}
#govde #kutular #dorduncu {
-moz-box-ordinal-group:1;
-webkit-box-ordinal-group:1;
box-ordinal-group:1;
}
#govde #kutular #besinci {
-moz-box-ordinal-group:2;
-webkit-box-ordinal-group:2;
box-ordinal-group:2;


}
-------------------------------
//divleri dikeyde ortalama(vertical align)
#govde #kutular{
width:100%;
height:1000px;
//divi kutu yaptık.
display:-moz-box;
display:-webkit-box;
display:box;
-webkit-box-orient:horizontal;//divleri yatay olarak yerleştirdik.
-moz-box-orient:horizontal;
box-orient:horizontal;
-moz-box-align:start;    //start,end,center özelliklerini alabilir.
-webkit-box-align:start;
box-align:start;
}
---------------
//divleri yatayda ortalama(horizantal)
#govde #kutular{
width:100%;
height:1000px;
//divi kutu yaptık.
display:-moz-box;
display:-webkit-box;
display:box;
-webkit-box-orient:horizontal;//divleri yatay olarak yerleştirdik.
-moz-box-orient:horizontal;
box-orient:horizontal;
-moz-box-align:center;
-webkit-box-align:center;
box-align:center;

//yatayda sona atıyoruz.
-moz-box-pack:end;   //justify dersek divler arası mesafe bırakır.
-webkit-box-pack:end;
pack-align:end;
}
---------------
//köşe yuvarlaama(border radius)
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
---------------
//çerçeve fotograf verme(border image)
#govde #sol_bolum01 {
float: left;
height: 400px;
width: 240px;
position: relative;
background-color: #666;
margin-bottom: 10px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
border:10px #666 solid ;
-webkit-border-image:url(../images/border.png) 27 27 27 27 round round ;
-moz-border-image:url(../images/border.png) 27 27 27 27 round round ;
border-image:url(../images/border.png) 27 27 27 27 round round ;      //border image
}
------------------
//div gölge uygulama(box shadow)
box-shadow:3px 3px 5px #ff0; //x,y,blur,yellow    blur:bulanıklık
-----------------
//background image akıllı ölçeklendirme(cover,content)
background-size:contain;   //resmi yatayda sığdırma
background-size:cover;        //resmi dikeyde sığdırma
--------------------
//çoklu background(ardalan) kullanımı
background:url(../images/border.png) no-repeat,url(../images/background.png);
background-repeat:no-repeat;
background-position:top left,bottom left;
background-size:20px 20px , 20px 20px;
------------------------------
//background-konumlama
background-origin:content-box;
background-origin:border-box;
--------------------
//basit animasyonlar
#govde #bolum1 img:hover {
transform:scale(1.5);   /*resmi 1.5 katı kadar büyütür.*/

}

#govde #bolum1 img:hover {
transform:rotate(45deg);   /*resmi 45 derece kadar döndürür..*/

}

#govde #bolum1 img:hover {
transform:skew(10deg);   /*resmi 10 derece  kadar büker.*/

}
#govde #bolum1 img:hover {
transform:translate(10px,10px);   /*resmi 10px kadar konumu değiştirir x ve y de */

}

----------------
//hareket merkez noktası değiştirme
#govde #bolum1 img:hover {
transform: rotate(45deg);
transform-origin:bottom right;//sağ alt köşeden

}
---------------
//geçiş efektleri(transition effects)
#govde #bolum1 img {
margin: 15px;
transition-property:scale();  //scale komutunda geçiş efekti yap
transition-duration:1s;    //1sn sürsün

/*transition:all 3s;  üsttekiler yerine bunu yazarsak daha kısa olur*/

}
#govde #bolum1 img:hover {
transform-origin:center-top;
transform:scale(1.5);

}
---------------------
//ivme etkileri
#govde #bolum1 img {
margin: 15px;
transition:all 1.5s ease-out; //ease:ivmelendirme(yumuşatma) ,ease-in:başta yavaş sonra hızlı ,ease-out:başta hızlı sonra yavaş geliyor.

}
#govde #bolum1 img:hover {
transform-origin:center-top;
transform:scale(1.5);
background:#999;
padding:0px 0px 40px 0px;
border-radius:0px 0px 10px 10px;
box-shadow:#000 2px 2px 3px ;
}
--------------------