CSS3 gerçekten Firefox, Safari ve Google Chrome tarafından desteklenen CSS3 çalışma taslağında belirtilen komutlar birçok ivme başlıyor. Biz bazı favorilerimden bir araya koymak istiyorum düşündüm. Başlamadan önce CSS3 komutları çalışması için tarayıcı belirli bir sözdizimi gerektirir.

: Mozilla Firefox için biz örneğin-moz-öneki, kullanmanız gerekir

-Moz-border-radius:

Safari-webkit-öneki, örneğin:

-Webkit-border-radius:

1. Sınır yarıçapı

CSS3 sınır yarıçapı komut bir öğe üzerinde yuvarlak köşeler oluşturur. Yuvarlak köşeler yerine 4 veya daha fazla görüntü oluşturmak için aşağıdaki komutları kullanın:

Mozilla Firefox için / * * /
-Moz-border-radius: 20px;

Safari ve Google Chrome için / * * /
-Webkit-border-radius: 20px;
}

2. Kutu gölge

CSS3 kutu gölge komutunu kullanarak elemanları bir gölge uygulanabilir. Kutu gölgesi, üç sayısal değerler artı bu etkiyi uygulamak için bir renk kabul eder. Bu numaralar:

1. Gölge ofset yatay mesafe pozitif bir değer gölge sağ ve sol bir negatif değer döküm anlamına gelir
2. Gölge ofset dikey mesafe pozitif bir değer gölge aşağıda döküm ve negatif bir değerin üzerinde gelir
3. Nasıl bulanık gölge istiyorum

Renk değerinin eklenmesi ile gölge:

Mozilla Firefox için / * * /
-Moz-box-shadow: 5px 5px 5px # b6ebf7;

Safari ve Google Chrome için / * * /
-Webkit-box-shadow: # b6ebf7 5x 5px 5px;

3. Şeffaflık veya RGBA

Saydamlık her zaman zor olmuştur. Farklı tarayıcılar tarihsel olarak farklı komutlar kullanarak saydamlık uyguladık. Bu çapraz tarayıcı tutarsızlık Sürekli yeni CSS3 RGBA arka plan özelliği yanı sıra, ancak ilke olarak bu komutu daha mantıklı. Birinci, ikinci ve üçüncü alfa kanalı veya asetat (0-1) tarafından takip sırasıyla kırmızı, yeşil ve mavi değerleri (0-255) komutu 4 değerleri oluşur

RGBA komut için tarayıcı belirli kodu (-moz-,-webkit-) gerekli değildir:

# Box3 {
background-color: rgba (110, 142, 185, 0,5);
}

Arka plan rengini komutu bir 0,5 güzel mavi-gri bir arka plan veya CSS3 RGBA özelliği anlamak tarayıcılarda% 50 opaklık ekler.

Ne yazık ki Internet Explorer de arka plan rengini komutu işlemek için çalışır ama RGBA anlamıyorum. Arka plan rengi de IE ayarlanmış olduğundan emin olmak için bir IE sadece kesmek gereklidir. Aşağıdaki örnekte: last-child sözde seçici Explorer anlamıyor İnternet dışlamak için kullanılır.

gövde: last-child # box3 {
/ * IE tarayıcıları kullanarak dışlayın: last-child * /
background-color: rgba (110, 142, 185, 0,5) önemli;
}

4. Sütunlar

Sütunlar eklemek için CSS3 yeteneği eklenmiştir. Aksine kaplar içinde yüzen elemanlar çok sütun sayısı, genişliği ve kural ayarlayabilirsiniz:

Mozilla Firefox için / * * /
-Moz-sütun sayısı: 2;
-Moz-sütun boşluğu: 20px;
-Moz-sütun kural: 1px solid # 6e8eb9;

Safari ve Google Chrome için / * * /
-Webkit-sütun sayısı: 2;
-Webkit-sütun boşluğu: 20px;
-Webkit-sütun kural: 1px solid # 6e8eb9;
}

5. Birden fazla arka plan resimleri

Arka plan görüntüleri, aslında sadece elemanı başına bir arka plan resmi uygulayabilirsiniz nedeniyle CSS geldiğinde her zaman kısıtlayıcı olmuştur. Bu sadece onları virgülle ayırma elemanı başına birden fazla görüntü sağlar CSS3 ile durum değildir.

Küçük bir stil ile, aşağıdaki komutları kullanabilirsiniz bir elemanın sol hem sağ hem de bir resim yerleştirmek için:

padding: 0 20px;
}

Bu komut, yanlış hale tek bir öğe üzerinde 2 adet arka plan resimleri kabul etmiyor Internet Explorer tarafından. Bir tüm IE kesmek gereklidir hariç.

# Box5 blockquote {
/ * Tüm tarayıcılar için, sadece açık bir alıntı * /
background: url (/ i / quotel.gif) 0 0 no-repeat;
padding: 0 20px;
}

vücut: last-child # box5 blockquote {
/ * IE tarayıcıları kullanarak dışlayın: last-child * /
/ * Daha sonra iki görüntü * /
background: url (/ i / quotel.gif) no-repeat 0 0, url (/ i / quoter.gif) 100% 0 no-repeat;
}

6. Arkaplan gradyanlar

CSS3 arka plan gradyanlar son derece esnek ve karmaşık desenleri oluşturmak için de kullanılabilir. CSS basit doğrusal bir degrade bir degrade, yukarıdan aşağıya doğru bir elemanın uygulanan ve soldan sağa sağlar.

Mozilla Firefox CSS3 degrade Bu örnek kutuları yüksekliği sadece% 20 için bir çerçevenin alt kısmında hafif bir mavi degrade geçerlidir

Safari rengi durağı değerleri kullanarak daha az sezgisel ama daha esnek bir yaklaşım kullanır. Safari özgü kod (lineer dışında yerine parantez içinde yer) bir örneği aşağıdaki gibidir:

# Box8 {
Arka plan:-webkit-gradiyenti (doğrusal, sol alt, sol üst, renk stop (0 # b6ebf7), renk-stop (0.20 # fff));
}

7. Rotasyon

CSS3 derece döndürme özelliği, bir parametre olarak kabul dönüşüm komutunu kullanarak elemanların dönme sağlar.

<code> # Box9 {
-Moz-transform: döndürmek (2deg);
-Webkit-transform: döndürmek (2deg);
} </ Code>

8. Anahatları

Outilines CSS3 şartnamede yer alan ve tek bir eleman için uygulanacak bir sınır ve bir taslak sağlar.

Anahat özelliği, sınır komut aynıdır. Ancak ek ofset mülkiyet sınır daha içinde veya elemanın dışında taşınacak sağlar.

Filed under: Css Admin