BT ifade

Başka çabuk tut. Burada basit ve CSS GÜÇ kullanarak güzel bir şey ... ama başlamak zor kavrayabilme (ve kesinlikle ben değildim) idi. Dropshadow ekleme, Photoshop ANF Fireworks vb düzenleme araçları gibi bazı görüntü kullanarak, bir çoğumuz için kek bir peice olabilir
Ben CSS kullanarak gölge için tercih nedeni genellikle bir uygulama bir sayfa tasarımı / html oluştururken, gereksinimleri yineleme tutmak olmasıdır. Ben freinds listesinde veya bir resim galerisi gösteren olanlar gibi birçok görüntü ile var olan bir web sitesi olarak, ne demek, bunun için, işleyemeyiz zaten eklemek veya gölgeleri kaldırmak için boş olmuştu görüntüleri tüm yükünü zor olacak olsun.
Bu ekstra bölümler veya eklemek için htmls oluştururken biraz ileri görüşlü yapmış Eğer öyleyse, genellikle durum XSL, PHP bu simgeleri / küçük üreten bir döngü Mantık olması. JAVA veya başka herhangi bir programlama / betik dili, istediğiniz zaman ekleyebilirsiniz, sonra sadece gösteri ve sürekli değişen müşteri gereksinimleri uyarınca, CSS Display özelliğini kullanarak bu gölgeler gizleme meselesi ... Ben ileri düşünerek bu tür yapılan havn't Bu daha önce ... ama ahev şimdi başladı!

Aşağıdaki örnekte, orijinal resim gölge serbesttir ve dropshadows gerektiği gibi uygulanır! AYRICA, ben hakkında benim önceki Tut hileler (Well! bu muhtemelen Rehberler kısa çeşitli vardır, bu yüzden sadece onlara "Tut" çağırıyor haklıdır) kullanarak, biraz fazladan gitti CSS Klip özelliğini kullanarak göstermek için sadece

Orijinal Görüntü

CSS DropShadow Sonuçlar

Demo bilgileri | İndir Kaynak Kodlarını

En azından Stil koyun

Aşamalı olarak yüklemek için bir sayfa istiyorsanız;, bunu en kısa sürede ne varsa, içeriğini görüntülemek için tarayıcı istiyorsanız olduğunu, belgenin HEAD içindeki sayfanın üst kısmında CSS koydu. Bu sayfa Bu sayfanın aşamalı oluşturmada kolaylaştırır olarak, daha hızlı yükleme gibi görünür yapar. Bu içerik bir çok daha yavaş internet bağlantıları kullanıcılar için sayfaları için özellikle önemlidir.

Bu genel kullanıcı deneyimini geliştirmek için bir belgelenmiş bir gerçektir, bu ilerleme göstergelerini ve görsel geri bildirimler sağlamak için önemlidir. , Sayfa öğeleri yeniden çizmek zorunda kalmamak için durumda IE, sayfanın blok oluşturma dahil olmak üzere kendi stillerini değişikliği, bazı tarayıcılar, CSS tamamen yüklenene kadar eğer. Bu nedenle, kullanıcı olduğunu görmek için alır Boş beyaz bir sayfa.

W3 HTML tanımlamalarına 'da CSS, HTML sayfasının HEAD bölümüne beni içermesi gerektiğini belirtiyor. at the bottom of the page, so it's best not to use it. Ayrıca IE'de, dikkat @import kullanarak aynı şekilde davranır <link> sayfanın alt kısmında, bu yüzden kullanmak en iyi değil.

Tarayıcı Özgül özelliklerini kullanma kaçının

Filtreler: Kullanım filtre Bellek tüketimini artırır ve element başına uygulanır değil, görüntü başına, sorun çarpılır öyle. Ayrıca, Filtreler IE Tescilli olup, dolayısıyla diğer tarayıcılarda beklendiği gibi çalışmaz. Eğer şeffaf ya da degrade arka istiyorsanız, görüntüleri ile 1Pixel kullanın.
İfadeler: CSS ifadeler CSS için de hoş bir özellik, ama hala IE özgü bir özelliktir. Ayrıca, bu ifadeler olduğuna dikkat etmek önemlidir sayfa işlenmiş ve yeniden boyutlandırıldığında değerlendirilir, kaydırılan ve kullanıcı sayfa üzerinde fare hareket bile. Bu sayfanızın performansı etkileyebilecek söylemeye gerek yok. Eğer lehte 'da eksileri daha fazla ağırlığa sahip' hissi sürece Dolayısıyla basit bir deyişle, CSS ifadeler kullanmaktan kaçının

CSS Externalise

Harici CSS kullanarak daha hızlı yükleme neden olacaktır sayfalarında JavaScript ve CSS dosyaları tarayıcı tarafından önbelleğe çünkü. HTML belgelerinde Inline CSS HTML belgesi talep her zaman indirilir. Bu aslında yapılan HTTP istekleri sayısını azaltabilir ama daha sonra HTML belgesinin boyutunu artırır. Harici CSS tarayıcı tarafından önbelleğe alınır; HTML belgenin boyutunu HTTP istek sayısını artırmadan düşer.

Sitenizde kullanıcıların oturum başına birden fazla sayfa görünümü var ve sayfaları yeniden kullanmak aynı komut dosyalarını ve stil birçok varsa, önbelleğe harici dosyalardan daha büyük bir potansiyel faydası var, unutmayın.

Sizin CSS Dosya Paketi

Paketleme veya CSS çatırdayan yük kere iyileştirilmesi böylece onun boyutunu azaltmak için kod gereksiz karakterleri kaldırma uygulamadır.

CSS bana satırsonu vb, beyaz boşluk gibi tüm yorum ve herhangi bir istenmeyen karakterleri kaldırarak darlığı olabilir

Bir CSS Reset / CSS çeşitli tarayıcılar arasında tutarlılık oluşturur belirli bir başlangıca eleman stilleri bir dizi yapacaklarmış edilir.

Hepimiz çapraz tarayıcı CSS Kullanıcı yazma kabuslar yoluyla olmuştur. Yani bizim CSS yazmaya başladığınızda, herhangi bir çapraz tarayıcı tutarsızlıkları / kaldırmak sıfırlamak için ilk sıfırlamak için bir uygulamadır. CSS sıfırlar, sen üzerinde bina başlatmak için temiz bir temel vererek, ile CSS başlaması CSS basit birkaç satır vardır.

Normalde kullanma eğiliminde CSS sıfırlar bu gibi görünüyor

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

ol, ul {
list-style: none;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}

Tarayıcı yazı tipi boyutunu sıfırlayın
Ayrıca aşağıdaki satırı tarayıcı yazı tipi boyutunu uygulanmış reset dikkat ...

html {font-size: 76%;}

Yukarıdaki CSS sıfırlar tarayıcı yazı tipi boyutunu 10 piksel, ve bu da göreceli yazı tipi boyutunu (imkanlar SES bir WAI uyum her önemli olan) çalışmayı kolaylaştırır
Örneğin, aşağıdaki tanımı, bir span içinde font-size 10 piksel ve paragarph 14 piksel olarak ayarlanır ayarlanır ...

span {font-size: 1em;}
p {font-size: 1.4em;}

Örn.
Böyle bir CSS özelliğini belirtme,

margin: 5px 0;

aslında şu anlama gelir,

margin: 5px 5px 0px 0px;

O ilk marjı mülkiyeti anlamına gelir:

üst ve alt kenar = 5px | | sol ve sağ kenar = 0px

böylece 'uzun kestirme' olurdu

margin: 5px 5px 0px 0px; (T, R, B, L)

hatta 3 değerlerini kullanabilirsiniz

margin: 5px 5px 0;

bunun anlamı,

top = 5px | | Sağ ve sol = 0px | | alt = 5px

Internet Explorer otomatik olarak HTML formları düğmeleri için doldurma ekler.
Bu boşluk düğmenin metin uzunluğuna göre uzanır.

Çözümü kendi tarzı taşma ekleyin .... yani

. Düğmeye {
overflow: görünür;
padding-left: 10px önemlidir;
padding-right: 10px önemlidir;
... Bu düğme için diğer stil ...
}

YA

< input type="submit" value="Internet explorer respects my padding" style="overflow:visible; padding-left:10px !important; padding-right:10px !important;" >;