Uzun süredir HTML yazanlarınız bu öğeyi hatırlayabilir. Bu, ekran boyunca kayan bir metin başlığı oluşturan tarayıcıya özel bir öğeydi. Bu öğe hiçbir zaman eklenmedi. HTML spesifikasyonu ve desteği, tarayıcılar arasında büyük ölçüde değişiklik gösterdi. İnsanlar genellikle bu öğenin kullanımı hakkında hem olumlu hem de olumsuz olarak çok güçlü fikirlere sahipti. Ama sevseniz de sevmeseniz de, kutu sınırlarını aşan içeriği görünür kılma amacına hizmet etti.
Güçlü kişisel görüşlerin yanı sıra tarayıcılar tarafından hiçbir zaman tam olarak uygulanmamasının bir nedeni de şuydu: görsel bir efekt olarak kabul edilir ve bu nedenle, içeriği tanımlayan HTML tarafından tanımlanmamalıdır. yapı. Bunun yerine görsel veya sunum efektleri CSS tarafından yönetilmelidir. Ve CSS3, tarayıcıların içeriği nasıl eklediğini kontrol etmek için seçim çerçevesi modülünü ekler. seçim çerçevesi efekti elemanlara.
Yeni CSS3 Özellikleri
CSS3 beş ekler yeni mülkler içeriğinizin seçim çerçevesi içinde nasıl görüntülendiğini kontrol etmeye yardımcı olmak için: taşma stili, seçim çerçevesi stili, seçim çerçevesi oynatma sayısı, seçim çerçevesi yönü ve seçim çerçevesi hızı.
taşma tarzı
Taşma stili özelliği (ayrıca CSS Taşması makalesinde tartışmıştık), içerik kutusundan taşan içerikler için tercih edilen stili tanımlar. Değeri kayan yazı çizgisi veya seçim çerçevesi bloğu olarak ayarlarsanız, içeriğiniz sola/sağa (kayan çerçeve) veya yukarı/aşağıya (kayan çerçeve bloğu) kayar.
seçim çerçevesi tarzı
Bu özellik, içeriğin nasıl görünüme (ve dışarı) taşınacağını tanımlar. Seçenekler kaydırma, kaydırın ve değiştirin. Kaydırma, içerik tamamen ekran dışındayken başlar ve ardından tamamen ekran dışına çıkana kadar görünür alan boyunca hareket eder. Slayt, içerik tamamen ekran dışındayken başlar ve ardından içerik tamamen ekrana taşınana ve ekranda kaydırılacak içerik kalmayana kadar ilerler. Son olarak, alternatif, içeriği bir yandan diğer yana kaydırarak ileri geri kaydırır.
marquee-play-count
MARQUEE öğesini kullanmanın dezavantajlarından biri, seçim çerçevesinin asla durmamasıdır. Ancak, seçim çerçevesi-oynatma-sayısı stil özelliğiyle, kayan yazı çerçevesini, içeriği belirli bir sayıda açıp kapatacak şekilde ayarlayabilirsiniz.
seçim çerçevesi
Ayrıca içeriğin ekranda kaydırılacağı yönü de seçebilirsiniz. İleri ve geri değerler, taşma stili kayan yazı çizgisi olduğunda ve taşma stili seçim çerçevesi bloğu olduğunda yukarı veya aşağı metnin yönlülüğünü temel alır.
Seçim Çerçevesi-Yön Ayrıntıları
taşma tarzı |
Dil Yönü | ileri | tersine çevirmek |
|---|---|---|---|
seçim çerçevesi |
litre | ayrıldı | sağ |
| rtl | sağ | ayrıldı | |
kayan yazı bloğu |
yukarı | aşağı |
kayan yazı hızı
Bu özellik, içeriğin ekranda ne kadar hızlı kaydırılacağını belirler. Değerler yavaş, normal ve hızlıdır. Gerçek hız, içeriğe ve onu görüntüleyen tarayıcıya bağlıdır, ancak değerler yavaş olmalıdır, normalden daha yavaştır, bu da hızlıdan daha yavaştır.
Seçim Çerçevesi Özelliklerinin Tarayıcı Desteği
kullanmanız gerekebilir satıcı önekleri CSS seçim çerçevesi öğelerinin çalışmasını sağlamak için. Bunlar aşağıdaki gibidir:
| CSS3 | Satıcı Öneki |
|---|---|
taşma-x: seçim çerçevesi çizgisi; |
taşma-x: -webkit-marquee; |
seçim çerçevesi tarzı |
-webkit-marquee tarzı |
marquee-play-count |
-webkit-marquee-tekrar |
seçim çerçevesi yönü: ileri|geri; |
-webkit-marquee-yön: ileri|geri; |
kayan yazı hızı |
-webkit-marquee-hız |
| eşdeğeri yok | -webkit-marquee-artış |
Son özellik, içerik seçim çerçevesi içinde ekranda kayarken adımların ne kadar büyük veya küçük olması gerektiğini tanımlamanıza olanak tanır.
Seçim çerçevesinin çalışması için, önce satıcı önek değerlerini yerleştirmeli ve ardından bunları CSS3 spesifikasyon değerleriyle takip etmelisiniz. Örneğin, 200x50'lik bir kutunun içinde metni soldan sağa beş kez kaydıran bir seçim çerçevesinin CSS'si burada.
{
genişlik: 200 piksel; yükseklik: 50 piksel; boşluk: nowrap;
taşma: gizli;
taşma-x:-webkit-marquee;
-webkit-marquee-yön: ileri;
-webkit-marquee stili: kaydırma;
-webkit-marquee-hızı: normal;
-webkit-marquee-artış: küçük;
-webkit-marquee-tekrar: 5;
taşma-x: seçim çerçevesi çizgisi;
seçim çerçevesi yönü: ileri;
seçim çerçevesi stili: kaydırma;
seçim çerçevesi hızı: normal;
kayan yazı-oynatma-sayısı: 5;
}