Firefox 3.x'te CSS Hataları ve Tutarsızlıkları

Uyumsuzlukları ya da sadece Firefox'taki CSS farklılıklarını kapsayan pek çok makale yok - ve iyi bir nedenden dolayı.

Firefox, her zaman CSS ve JavaScript'i standartlara uygun bir şekilde çok fazla hataya yol açmadan destekleyen mükemmel bir iş çıkardı.

Bununla birlikte, burada 3.0 sürümünden beri yayımlanan sürümlerden bir veya daha fazlası tarafından desteklenmeyen birkaç CSS özelliği ve seçicisi vardır.

Bu makale, hataları, tutarsızlıkları ve desteklemeyi kapsayacaktır. Dolayısıyla, Firefox'ta bir CSS özelliği veya seçici ile sorun yaşıyorsanız ve burada listelenmiyorsa, muhtemelen düzeninizi yeniden düşünmeniz ve suçluluğun ne olabileceğini tekrar gözden geçirmeniz gerekecektir.

Firefox 2 neredeyse beri varolmayan Bu sürümü özellikle dikkate almayacağım, ancak bu bilgi genellikle bu sürümde varsayılan olarak geçerli olacaktır.

Ve şunu da belirtmeliyim ki bu yazı için materyal esas olarak yeni güncellenmiş SitePoint CSS referansı Her yerde mevcut olan en iyi ve en kapsamlı CSS referansı aşağıda verilmiştir.

Anahat Taşması Hatası

Firefox 3.x'te, bir öğe olan bir üst sınırın taşması durumunda outline özellik kümesi, anahat aşağıdaki ekran yakalamada gösterildiği gibi, içeren öğeye sığacak şekilde genişletilir:

Chrome'dan alınan bir sonraki ekran yakalamada doğru uygulama gösterilir:

Yukarıda gösterildiği gibi, ana hat, özetlenmekte olan öğeyi kapsamalıdır ve taşan elemanlardan etkilenmemelidir. Hiçbir karışıklık olmadığından emin olmak için, bunun uygulamada bir hata olduğunu unutmayın. outline özellik değil border özelliği.

Referans: SitePoint CSS Referansı: anahat Mülk

Çökmüş Sınırlı Tablolar

Firefox'ta, bir tablonun sınırları ayarlandığında collapse kullanmak border-collapse özellik, tablonun en yakın ve sol kenar boşlukları ile ilgili öğelere göre 1 piksel kapalıdır. Bu, aşağıdaki resimde görüntünün yakınlaştırılmış bir görüntüsünde gösterilmektedir; bu, daraltılmış bir tablonun (mavi) üst kenarına temas eden bir blok seviyesi öğenin (kırmızı) alt kenarlığını görüntüler:

Chrome'da gösterildiği gibi, bu özellik / değer çiftinin doğru uygulanması İşte:

Yukarıda gösterildiği gibi, kenarlar “daraltılmış” olduğundan ve tablo bir blok eleman olmadığı için, sol kenarda hafif bir kayma olmalı ve üst kenar boşluğu, üstteki öğenin alt kenarlığıyla bile olmalıdır.

Referans: SitePoint CSS Referansı: border-collapse Özellik

Tablo satırlarındaki boş hücreler

Bu, Firefox dahil, herhangi bir tarayıcı tarafından düzgün şekilde uygulanmayan bir özellik değeridir. Bir tablo satırında görünür içerik bulunmadığında ve tüm hücreleri empty-cells özellik ayarlandı hide tüm satır, hiçbir kenarlık veya arka plan görünmeden "göster: yok" olarak ayarlanmış gibi davranmalıdır.

Hiçbir tarayıcı bunu doğru şekilde işlemez, bu nedenle aşağıdaki tabloda gösterildiği gibi tablo satırı hala görünür durumdadır.

Referans: SitePoint CSS Referansı: boş hücreler Özelliği

Satır öğelerinde Word aralığı

Firefox 3.x'te, negatif bir değer word-spacing mülkiyet bitişik satır içi elemanlarda sıfır olarak ele alınacaktır. Negatif değer, metin içinde olduğu gibi satır içi öğelerin birbiriyle çakışmasına neden olmalıdır, ancak bu gerçekleşmez. Bunun yerine, öğelere, hiçbir çakışma olmadan sıfır beyaz boşluk ayrımı verilir.

Aşağıdaki görüntü hem doğru hem de yanlış uygulamaları gösterir:

Yukarıda gösterilen örneklerde “Meyveler”, “Sebzeler” ve “Diğer Gıdalar” sözcükleri ayrı ayrı sarılmıştır. öğelerini, onları saran paragraf word-spacing özellik negatif bir değere ayarlanmış.

İkinci örnek (Firefox), son iki kelime dışında, negatif kelime aralığını uygulamada başarısız olur, çünkü bu kelimeler tek tek değil, doğal metin öğeleridir.

Bir yan nokta olarak, bu hata IE8'de benzer şekilde gerçekleşir, ancak IE'nin önceki sürümlerinde olmaz.

Referans: SitePoint CSS Referansı: kelime aralığı Özelliği

Yüzen Torunları Üzerinde Metin Süsleme

Bir öğe bir metin dekorasyon değeri ayarlandığında, bu değerin yüzer torunlar tarafından miras alınmaması gerekir. Firefox 3.x'te, kayan soyunlara ebeveynleri ile aynı metin-dekorasyon değerleri verilir, ancak bu durum böyle olmamalıdır.

Yukarıdaki resimde, ilk satır IE8'den bir ekran görüntüsüdür. eleman bir ankrajın içinde yüzer. İçindeki metin Görüntülemenin doğru yolu olan görünür bir metin süslemesi yoktur. Firefox'ta (ikinci örnekte gösterilmiştir), metin dekorasyonu yüzer yüzeye yanlış şekilde uygulanır. .

Bu hatayı Firefox'ta, çapaların içindeki süzülmüş görüntülerden metin dekorasyonunu kaldırmaya çalışırken fark etmiş olabilirsiniz.

Referans: SitePoint CSS Referansı: metin dekorasyon özelliği

FF 3.0'teki beyaz alan için ön-satır ve ön-sarma

Kullanmak white-space Firefox 3.5'daki özellikte, birden çok boşluk karakterinin tek bir alana kadar daraltılıp küçültülmeyeceğini belirtebilirsiniz. Varsayılan olarak, HTML belgeleri birden fazla alanı tek bir alana indirir. Bazı durumlarda, uygulayabilirsiniz white-space: pre beyaz alanın çökmesini önlemek için,

  HTML etiketi  Daha sonra, bu ayarı kullanarak kaldırmak isteyebilirsiniz. white-space:  pre-line  (beyaz alanı daraltmak için). 
  Firefox 3.0 bu değeri desteklemediğinden, beyaz alan korunacaktır.  Firefox 3.5 alanı doğru bir şekilde çöker.  Aşağıdaki resim her iki örneği de göstermektedir: 
  Benzer şekilde, bir metin paragrafı ayarlandığında white-space:  pre-wrap  Bu, kelimeler arasındaki beyaz boşlukları korumalı, ancak doğal olarak satır sonlarını içermelidir.  Firefox 3.0 bunu doğru bir şekilde uygulayamazken, sonraki sürümler (ve diğer tüm tarayıcılar) doğal satır sonlarını içerir.  Her iki örnek aşağıda gösterilmiştir. 
  Dış elemanın verildiğini unutmayın white-space: pre  bir iç   kullanarak satır sonları eksikliğini geçersiz kılmaya çalışıyor pre-wrap  .  Kendi başına, pre-wrap  herhangi bir etkisi olmazdı. 
  Firefox 3.x ayrıca bazı white-space  Bu değerler diğer tarayıcılardan farklı değerler uygulandığında </code>  öğesi.  Örneğin, uygulama <code>white-space:  nowrap</code>  tüm yazılan metin bir <code><textarea></code>  bir satır oluşturmak için, ancak Firefox 3.x bunu yapmaz. </p><p>  <strong>Referans:</strong> <a href="http://reference.sitepoint.com/css/white-space" class=external rel=nofollow>SitePoint CSS Referansı: beyaz boşluk Özellik</a></p><ul></ul><p class=clearrow></p><h2>  Sayfa Arası Özellikler </h2><p>  CSS, geliştiricilerin, üç özellik kullanarak sayfa sonlarının nerede gerçekleşmesi gerektiğini veya oluşmaması gerektiğini belirleme olanağı sağlar. <code>page-break-before</code>  , <code>page-break-inside</code>  , ve <code>page-break-after</code>  .  Opera, bu özellikleri tam olarak destekleyen tek tarayıcıdır, diğer tarayıcılar ise kısmi destek veya destek sunmaz. </p><p> </span> <code>page-break-inside</code> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">property specifies whether or not a page break can occur inside a single block-level element. özellik, tek bir blok düzeyi öğenin içinde bir sayfa sonu oluşup oluşmayacağını belirler.</span>  Firefox bu özellik için destek sağlamıyor.  Sözdizimini kullanma <code>page-break-inside:  avoid</code>  yazdırma sırasında bir öğenin bölünmesini engelleyebilirsiniz.  Aşağıdaki resim, Opera 10'daki bir baskı önizlemesinden, bu özelliğin sıralanmamış bir listenin iki sayfaya bölünmesini nasıl önleyebileceğini gösterir: </p><div class=article-large-block><img src="https://odwebdesign.net/uploads/c/d1/22/css-bugs-and-inconsistencies-in-firefox-3-x_10.gif" alt="" width=615 height=293 /></div><p>  Bunun aksine, Firefox 3.5'daki baskı önizleme seçeneğinden alınan aşağıdaki resme bakın: </p><div class=article-large-block><img src="https://odwebdesign.net/uploads/9/18/ac/css-bugs-and-inconsistencies-in-firefox-3-x_11.gif" alt="" width=615 height=278 /></div><p>  <strong>Referans:</strong> <a href="http://reference.sitepoint.com/css/pagedmedia" class=external rel=nofollow>SitePoint CSS Referansı: Paged Medya Özellikleri</a></p><ul></ul><p class=clearrow></p><h2>  Yazdırılabilir Sayfalarda Yetimler ve Dullar </h2><p> </span> <code>orphans</code> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">and ve</span> <code>widows</code>  CSS özellikleri, sürüm 9'dan bu yana yalnızca Internet Explorer 8 ve Opera tarafından desteklenir. Bu özellik, yazdırılan sayfada, altta (yetimler) veya üstte (dul) oluşabilecek tek bir paragraftan en az satır sayısını belirtmek için kullanılır. ).  Seçilen numaraya bağlı olarak, bir sayfanın en üstünde veya altında tek bir satırın yazdırılmasını önlemek için çizgiler bir sayfadan diğerine (veya önceki) taşınacaktır. </p><p>  İle bile <code>orphans</code>  Aşağıdaki resimde gösterildiği gibi, “3” değerine ayarlanan özellik, Firefox'un baskı önizlemesi yazdırılabilir sayfalardan birinin altında tek bir satır gösterir: </p><div class=article-large-block><img src="https://odwebdesign.net/uploads/e/d0/f4/css-bugs-and-inconsistencies-in-firefox-3-x_12.gif" alt="" width=615 height=162 /></div><p>  Benzer <code>page-break-inside</code>  mülkiyet, Firefox da değerleri desteklemek için başarısız <code>avoid</code>  , <code>left</code>  , ve <code>right</code>  her ikisi için <code>page-break-before</code>  ve <code>page-break-after</code>  özellikleri. </p><p>  <strong>Referanslar:</strong> <a href="http://reference.sitepoint.com/css/orphans" class=external rel=nofollow>SitePoint CSS Referansı: yetim mülkü</a>  | <a href="http://reference.sitepoint.com/css/widows" class=external rel=nofollow>SitePoint CSS Referansı: dullar Mülkiyet</a></p><ul></ul><p class=clearrow></p><h2>  : Birinci satır Pseudo-Element Bug </h2><p> </span> <code>:first-line</code> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">pseudo-element allows the first line of any given text block to have different formatting from the rest of the text. Sözde öğe, herhangi bir metin bloğunun ilk satırının metnin geri kalanından farklı biçimlendirmeye sahip olmasını sağlar.</span>  Örneğin, bir metin paragrafının ilk satırı büyük harfe veya başka bir renge dönüştürülebilir.  Bu CSS elemanının pratik bir şekilde çalışması için, yuvalanmış blok seviyesi elemanların olasılığına izin vermelidir.  Örneğin, <code><div></code>  içeren bir öğe <code><p></code>  eleman izin vermelidir <code>:first-line</code>  metin içindeki ilk satırın stilini değiştirmek için sözde öğe <code><div></code>  .  Firefox'ta (ve diğer birçok tarayıcıda), sözde öğe özellikle çocuk paragrafını hedeflemedikçe bu mümkün değildir. </p><p>  Internet Explorer 8, Chrome ve Safari, bu özelliği doğru bir şekilde uygular ve aşağıdaki resimde gösterildiği gibi, blok öğelerinin şekillendirmeyi engellemesini önler: </p><div class=article-large-block><img src="https://odwebdesign.net/uploads/1/82/8f/css-bugs-and-inconsistencies-in-firefox-3-x_13.gif" alt="" width=615 height=249 /></div><p>  Yukarıdaki paragrafta, metin bir <code><p></code>  içinde bulunan element, <code><div></code>  . </span> <code><p></code> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">has the var</span> <code>:first-line</code>  sözde öğe <code>color:  blue</code>  Firefox'ta paragrafın iç içe yerleştirilmesinden dolayı başarısız olur. <code><div></code>  . </p><p>  <strong>Referans:</strong> <a href="http://reference.sitepoint.com/css/pseudoelement-firstline" class=external rel=nofollow>SitePoint CSS Referansı: birinci satır Sözde Öğe</a></p><ul></ul><p class=clearrow></p><h2>  Firefox 3.x CSS3 Desteği </h2><p>  Firefox, sürüm 3.0 sürümünden bu yana CSS3 için aşamalı olarak daha fazla destek ekledi.  Aşağıda, Firefox'un CSS3'ün farklı özelliklerini nasıl ele aldığı açıklanmaktadır.  Bunlardan bazıları hala içinde olabilir <a href="http://www.w3.org/Consortium/Process/Process-19991111/tr.html#RecsWD" class=external rel=nofollow>çalışma taslağı</a>  veya <a href="http://www.w3.org/Consortium/Process/Process-19991111/tr.html#RecsCR" class=external rel=nofollow>aday önerisi</a>  Bu nedenle, ne zamana kadar <a href="http://www.w3.org/Consortium/Process/Process-19991111/tr.html#RecsW3C" class=external rel=nofollow>tavsiye</a>  sahne. </p><ul><li>  Firefox 3.0 desteklemiyor <code>text-shadow</code>  özellik </li><li>  Firefox 3.x desteklemiyor <code>box-shadow</code>  mülkiyet, özel öneki kullanıldığında hariç <code>-moz-</code></li><li>  Firefox 3.x desteklemiyor <code>box-sizing</code>  mülkiyet, özel öneki kullanıldığında hariç <code>-moz-</code></li><li>  Firefox 3.x, özel önek olmadığı sürece birden çok sütunu desteklemiyor <code>-moz-</code>  kullanıldı </li><li>  Firefox 3.0 ve 3.5, CSS3 gradyanlarını ve çoklu arka planları desteklemez (her ikisi de 3.6'da son zamanlarda eklenmiştir) </li><li>  Firefox 3.0 desteklemiyor <code>border-image</code>  özellik, ancak 3.5 bunu kullanarak destekler <code>-moz-</code>  özel önek </li><li>  Firefox 3.0, bir dizi CSS3 sözde sınıfını desteklemez (: nth-child,:--son-çocuk,: -dosyası, vb.) </li><li>  Firefox 3.0 CSS dönüşümlerini desteklemiyor </li><li>  Firefox 3.x, CSS geçişlerini desteklemiyor </li><li>  Firefox 3.x, CSS animasyonlarını desteklemiyor </li></ul><p class=clearrow></p><h2>  Diğer CSS Özellikleri Desteklenmiyor </h2><p>  Daha önemli hataların ve uyumsuzlukların bazıları yukarıda tartışıldı, ancak dikkat edilmesi gereken birkaç şey daha var. </p><ul><li>  Firefox 3.5 sürümüne kadar değer desteklemiyor <code>run-in</code>  için <code>display</code>  özellik </li><li>  Firefox desteklemiyor <code>::selection</code>  sözde eleman </li><li>  @Page at-kuralları Firefox tarafından desteklenmiyor </li><li>  @ Font-face at-kuralı Firefox 3.0 tarafından desteklenmiyor </li></ul><p class=clearrow></p><h2>  Sonuç </h2><p>  Bu materyalden geçtikten sonra <strong>, Firefox'ta CSS özelliklerinin desteklenmediğinin minimal olduğunu ve</strong> burada tartışılan özelliklerin birçoğunun çok yaygın kullanılmadığından pek <strong>alakasız</strong> olduğunu açıkça görebilirsiniz. </p><p>  Yine de, bu, Firefox'taki en önemli hatalar ve tutarsızlıklar için iyi bir referans sağlayacaktır.  Burada listelenmeyen Firefox'ta CSS'nin belirli bir özelliği ile ilgili sorun yaşıyorsanız, yanlış bir şey yapıyorsunuz veya bazı CSS kavramlarını ve ilkelerini tam olarak anlayamıyor olabilirsiniz. </p><p>  Dolayısıyla, bu bağlamda, bu referans <strong>, bir ters referans olarak iyi çalışmalıdır</strong> , çünkü burada listelenmeyenler, doğru sözdizimi ile doğru şekilde uygulandıklarında iyi çalışacaklarına güvenilebilirler. </p><p>  Elbette, kaçırdığım bir şey varsa veya herhangi bir hata varsa lütfen yorum yapın ve gerekli düzeltmeleri ve eklemeleri yapmak için elimden gelenin en iyisini yapacağım. </p><p class=clearrow></p><h2>  Diğer Referanslar </h2><ul class=tight_list><li><a href="https://developer.mozilla.org/En/CSS_improvements_in_Firefox_3" class=external rel=nofollow>Firefox 3'te CSS geliştirmeleri</a></li><li><a href="https://developer.mozilla.org/En/Firefox_3.5_for_developers#Newly-supported_CSS_features" class=external rel=nofollow>Firefox 3.5'da yeni desteklenen CSS Özellikleri</a></li></ul><p><br class=spacer_ /></p><p>  <em>Tarafından sağlanan Firefox Image</em> <em><a rel=nofollow href="http://rakaz.nl/2004/10/firefox-wallpapers.html" class=external></em>  <em>Rakaz</em></a> <em><br class=spacer_ /></em> </p><p>  <em>Bu yazı serbest yazar ve web geliştiricisi Louis Lazaris tarafından Webdesigner Deposu için özel olarak yazılmıştır.</em>  <em>Louis koşuyor</em> <em><a rel=nofollow href="http://www.impressivewebs.com/" class=external></em>  <em>Etkileyici Webler</em></a>  <em>Web tasarımında makaleler ve eğitimler yayınlar.</em>  <em>Louis'i takip edebilirsin</em> <em><a rel=nofollow href="http://twitter.com/ImpressiveWebs" class=external></em>  <em>Twitter'dan</em></a>  <em>ya da onunla temasa geç</em> <em><a rel=nofollow href="http://www.impressivewebs.com/contact" class=external></em>  <em>web sitesi aracılığıyla</em></a>  <em>.</em> </p><p><br class=spacer_ /></p>


        <div class="bootstrap-tagsinput">
                        <span class="tag label label-info"><a href="https://tr.odwebdesign.net/tag/css/">css</a> </span>
                        <span class="tag label label-info"><a href="https://tr.odwebdesign.net/tag/firefox/">firefox</a> </span>
                        <span class="tag label label-info"><a href="https://tr.odwebdesign.net/tag/boecek/">böcek</a> </span>
                        <span class="tag label label-info"><a href="https://tr.odwebdesign.net/tag/css-hatalari/">css hataları</a> </span>
                        <span class="tag label label-info"><a href="https://tr.odwebdesign.net/tag/firefox-3/">firefox 3</a> </span>
                        <span class="tag label label-info"><a href="https://tr.odwebdesign.net/tag/firefox-hatalari/">firefox hataları</a> </span>
                        <span class="tag label label-info"><a href="https://tr.odwebdesign.net/tag/inconsitencies/">inconsitencies</a> </span>
                    </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <ul class="pager">
            
            <li class="previous"><a href="https://tr.odwebdesign.net/fight-div-itis-and-class-itis-with-the-960-grid-system/">← 960 Izgara Sistemiyle Div-Itis ve Class-Itis ile Savaşın</a></li>            
            <li class="next"><a href="https://tr.odwebdesign.net/wordpress-vs-expressionengine-apples-and-oranges/">WordPress Vs.  ExpressionEngine: Elmalar ve Portakallar? →</a></li>        </ul>
    </div>
</div>



                                                                
            </div>
                <div class="col-md-3">
                                        <aside class="col-lg-12 side-bar col-md-12">
    <ul class="nav nav-tabs">
        <li class="active"> <a data-toggle="tab" href="#latest" role="tab">Son</a> </li>
        <li> <a data-toggle="tab" href="#popular" role="tab">En iyisi</a> </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content sidebar-tabing" id="nav-tabContent">
        <div class="tab-pane active" id="latest" role="tabpanel">
            
                        <div class="media"> <a href="https://tr.odwebdesign.net/supercharge-your-site-with-a-cdn/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//titles/d/ad/1d/supercharge-your-site-with-a-cdn_ors.jpg" alt=""></a>
                <div class="media-body">
                    <div class="title-small-sidebar">
                        <a href="https://tr.odwebdesign.net/supercharge-your-site-with-a-cdn/">Sitenizi bir CDN ile Supercharge</a>
                    </div>
                </div>
            </div>
                        <div class="media"> <a href="https://tr.odwebdesign.net/getting-started-with-vue-js/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//titles/d/9f/40/getting-started-with-vue-js_ors.png" alt=""></a>
                <div class="media-body">
                    <div class="title-small-sidebar">
                        <a href="https://tr.odwebdesign.net/getting-started-with-vue-js/">Vue.Js ile Başlarken</a>
                    </div>
                </div>
            </div>
                        <div class="media"> <a href="https://tr.odwebdesign.net/how-to-create-and-manage-svg-sprites/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//titles/2/f2/da/how-to-create-and-manage-svg-sprites_ors.jpg" alt=""></a>
                <div class="media-body">
                    <div class="title-small-sidebar">
                        <a href="https://tr.odwebdesign.net/how-to-create-and-manage-svg-sprites/">SVG Sprite nasıl oluşturulur ve yönetilir</a>
                    </div>
                </div>
            </div>
                        <div class="media"> <a href="https://tr.odwebdesign.net/how-to-build-a-custom-email-with-foundation-for-emails/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//titles/d/9f/45/how-to-build-a-custom-email-with-foundation-for-emails_ors.jpg" alt=""></a>
                <div class="media-body">
                    <div class="title-small-sidebar">
                        <a href="https://tr.odwebdesign.net/how-to-build-a-custom-email-with-foundation-for-emails/">E-postalar için Temel ile Özel Bir E-posta Nasıl Yapılır?</a>
                    </div>
                </div>
            </div>
                    </div>
        <div class="tab-pane" id="popular" role="tabpanel">
            
                            <div class="media"> <a href="https://tr.odwebdesign.net/how-to-drive-ux-with-ajax/"> <img class="pull-left" src="https://odwebdesign.net/uploads//titles/7/f6/75/how-to-drive-ux-with-ajax_ors.jpg" alt=""></a>
                    <div class="media-body">
                        <div class="title-small-sidebar">
                            <a href="https://tr.odwebdesign.net/how-to-drive-ux-with-ajax/">AJAX ile UX nasıl kullanılır</a>
                        </div>
                    </div>
                </div>
                            <div class="media"> <a href="https://tr.odwebdesign.net/how-to-use-html-css-style-tiles-to-kickstart-your-design/"> <img class="pull-left" src="https://odwebdesign.net/uploads//titles/7/ab/9e/how-to-use-html-css-style-tiles-to-kickstart-your-design_ors.jpg" alt=""></a>
                    <div class="media-body">
                        <div class="title-small-sidebar">
                            <a href="https://tr.odwebdesign.net/how-to-use-html-css-style-tiles-to-kickstart-your-design/">Tasarımınızı başlatmak için HTML & CSS stil karoları nasıl kullanılır?</a>
                        </div>
                    </div>
                </div>
                            <div class="media"> <a href="https://tr.odwebdesign.net/how-to-get-started-with-css-shapes/"> <img class="pull-left" src="https://odwebdesign.net/uploads//titles/4/78/da/how-to-get-started-with-css-shapes_ors.jpg" alt=""></a>
                    <div class="media-body">
                        <div class="title-small-sidebar">
                            <a href="https://tr.odwebdesign.net/how-to-get-started-with-css-shapes/">CSS Şekillerine nasıl başlanır?</a>
                        </div>
                    </div>
                </div>
                            <div class="media"> <a href="https://tr.odwebdesign.net/3-cool-css3-image-hover-effects/"> <img class="pull-left" src="https://odwebdesign.net/uploads//titles/f/6d/c6/3-cool-css3-image-hover-effects_ors.jpg" alt=""></a>
                    <div class="media-body">
                        <div class="title-small-sidebar">
                            <a href="https://tr.odwebdesign.net/3-cool-css3-image-hover-effects/">3 serin CSS3 görüntü vurgulu efekti</a>
                        </div>
                    </div>
                </div>
                    </div>
    </div>
</aside>
    
                                        
                                    </div>

            
        </div>
                <footer class="footer-bs">
            <div class="row">
                <div class="col-md-3 footer-brand animated fadeInLeft">
                    <img src="https://tr.odwebdesign.net/img/logo1n.png">
                                                        </div>


                <div class="col-md-9 footer-nav animated fadeInRight">
                    <ul class="list">
                        <li><a href="https://tr.odwebdesign.net/category/freebies/">Freebies</a></li>
                        <li><a href="https://tr.odwebdesign.net/category/interactive-design/">İnteraktif Tasarım</a></li>
                        <li><a href="https://tr.odwebdesign.net/contact_us/">Bizimle iletişime geçin</a> </li>
                    </ul>
                    <br>
                    <h4>OdWebDesign.Net</h4>
                </div>
            </div>

            
                <!-- Piwik -->
                <script type="text/javascript">
                    var _paq = _paq || [];
                    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
                    _paq.push(['trackPageView']);
                    _paq.push(['enableLinkTracking']);
                    (function() {
                        var u="//odwebdesign.net/";
                        _paq.push(["setTrackerUrl", u+"piwik.php"]);
                        _paq.push(["setSiteId", "470"]);
                        var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0];
                        g.type="text/javascript"; g.async=true; g.defer=true; g.src=u+"piwik.php"; s.parentNode.insertBefore(g,s);
                    })();
                </script>
                <!-- End Piwik Code -->
            

        </footer>
    </div><!-- /.container -->

      
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="/dist/js/bootstrap.min.js"></script>
  </body>
</html>