bildirgec.org

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ıkcss 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.