Sizlere faydalı olabilecek 10 adet CSS snippets kodu ve açıklaması.
1)
Websitenizi veya diÄŸer elementleri ortalama.
Html kodu;
http://pastebin.com/f1173f78d
CSS kodu;
.wrap { width:960px; margin:0 auto;}
2)
Yapışık footer.
HTML kodu;
http://pastebin.com/m191682d8
CSS kodu;
* { margin:0; padding:0; } html, body, #wrap { height: 100%; } body > #wrap {height: auto; min-height: 100%;} #main { padding-bottom: 150px; } /* must be same height as the footer */ #footer { position: relative; margin-top: -150px; /* negative value of footer height */ height: 150px; clear:both;} /* CLEAR FIX*/ .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac */ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */
3)
css kodu;
.element { min-height:600px; height:auto !important; height:600px; }
4)
Kutu gölgeleme.
css kodu; (ccs3)
.box { box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; }
5)
Metin gölgeleme IE ile kesme.
css kodu;
.text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }
bu teknik tüm tarayıcılar için harika, IE da çalışıyor fakat kaliteli değil.
6)
Çapraz tarayıcı | CSS saydamlık
css kodu;
.transparent { /* Modern Browsers */ opacity: 0.7; /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE 5-7 */ filter: alpha(opacity=70); /* Netscape */ -moz-opacity: 0.7; /* Safari 1 */ -khtml-opacity: 0.7; }
7)
Köşeleri yuvarlatılmış stil (ie hariç)
css kodu;
.element { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; /* future proofing */ } .element-top-left-corner { -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; }
faydalınılan kaynak.
