Uzun süre HTML yazmış olanlarınız öğeyi hatırlayabilir. Bu, ekran boyunca kaydırma metni banner'ı oluşturan tarayıcıya özel bir öğeydi. Bu öğe, HTML spesifikasyonuna hiçbir zaman eklenmedi ve tarayıcılar arasında geniş çapta çeşitli değişiklikler destekledi. İnsanlar genellikle bu unsurun kullanımı hakkında çok güçlü fikirlere sahipti - hem olumlu hem de olumsuz. Ama sevdiğin ya da ondan nefret edip etmediğiniz, kutu kutularının görünürde taşan içerik yaratma amacına hizmet etti.
Güçlü kişisel görüşün yanı sıra, tarayıcılar tarafından hiçbir zaman tam olarak uygulanma nedeninin bir kısmı, görsel bir etki olarak görülmesi ve yapıyı tanımlayan HTML tarafından tanımlanmamasıydı. Bunun yerine görsel veya sunum efektleri CSS tarafından yönetilmelidir. Ve CSS3 tarayıcıların marquee efektini elemanlara nasıl eklediğini kontrol etmek için seçim çerçevesini ekler.
Yeni CSS3 Özellikleri
CSS3, içeriğinizin seçim çerçevesinde nasıl görüneceğini kontrol etmeye yardımcı olmak için beş yeni özellik ekler: taşma stili, kayan yazı stili, kayan çalma sayısı, kayan yazı yönü ve seçim hızı.
taşma tarzı
Taşma stili özelliği (CSS Overflow makalesinde de tartıştığım), içerik kutusundan taşan içerikler için tercih edilen stili tanımlar. Değeri, seçim çizgisi veya seçim çerçevesi bloğu olarak belirlerseniz içeriğiniz sol / sağ (marquee satırı) veya yukarı / aşağı (kayan yazı bloğu) içeri ve dışarı kayar.
kayan yazı tarzı
Bu özellik içeriğin nasıl görüneceğini (ve çıkardığını) tanımlar.
Seçenekler kaydırma, slayt ve alternatiftir. Kaydırma içeriği tamamen ekrandan başlar ve ardından tümüyle tekrar ekrana gelene kadar görünür alan boyunca hareket eder. Slayt, içerik tamamen ekrandan başlar ve ardından içerik ekrana tamamen taşınana kadar hareket eder ve ekranda kayması için daha fazla içerik kalmaz.
Son olarak, alternatif, içeriği bir taraftan diğerine geri, ileri geri kayar.
kayan yazı-play-sayımı
MARQUEE elemanını kullanmanın sakıncalarından biri, seçim çerçevesinin asla durmamasıdır. Ancak, stil özelliği seçim çerçevesiyle birlikte, belirli bir süre boyunca içeriği açıp kapatmak için seçim çerçevesini ayarlayabilirsiniz.
çerçevesi-yönü
İçeriğin ekranda kaydırılması gereken yönü de seçebilirsiniz. Taşma-stili marquee-line olduğunda ve taşma-stili marquee-blok olduğunda yukarı veya aşağı olduğunda, ileri ve geri değerleri metnin yönelimini temel alır.
Seçim Çerçevesi Detayları
| taşma tarzı | Dil Yönü | ileri | ters |
|---|---|---|---|
| çerçevesi satırı | ltr | ayrıldı | sağ |
| rtl | sağ | ayrıldı | |
| kayan blok | yukarı | aşağı |
çerçevesi hızlı
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, hızlıdan daha yavaş olan normalden yavaştır.
Marquee Özelliklerinin Tarayıcı Desteği
CSS seçim çerçevesi öğelerinin çalışmasını sağlamak için satıcı öneklerini kullanmanız gerekebilir. Onlar aşağıdaki gibidir:
| CSS3 | Satıcı Öneki |
|---|---|
| taşma-x: marquee-line; | taşma-x: -webkit-marquee; |
| kayan yazı tarzı | -webkit-kayan yazı tarzı |
| kayan yazı-play-sayımı | -webkit-kayan-tekrarlama |
| çerçeve yönü: ileri | geri; | -webkit-marquee-direction: ileriye doğru | |
| çerçevesi hızlı | -webkit-kayan hızlı |
| eşdeğer değil | -webkit-kayan arttırma |
Son özellik, kayan çerçevede içeriğin 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çevenizin çalışmasını sağlamak için önce satıcı öneki değerleri yerleştirmeli ve ardından bunları CSS3 belirtim değerleri ile izlemelisiniz. Örneğin, metni 200x50 kutunun içinde soldan sağa beş kez kaydıran bir seçim çerçevesinin CSS'si.
{
genişlik: 200px; yükseklik: 50px; beyaz boşluk: nowrap;
taşma: gizli;
taşma-X: -webkit-çerçevesi;
-webkit-marquee yönü: ileriye doğru;
-webkit-marquee tarzı: kaydırma;
-webkit-marquee-speed: normal;
-webkit-marquee-increment: küçük;
-webkit-marquee-tekrarı: 5;
taşma-x: marquee-line;
marquee yönü: ileriye doğru;
seçim çerçevesi stili: kaydırma;
marquee-speed: normal;
Seçim oyun sayısı: 5;
}