Skip to main content

HTML5 ve CSS3 yaşlarında MARQUEE

HTML5 - Bir Website Projesine Başlangıç - 02 | HTML Dersleri (Mart 2024)

HTML5 - Bir Website Projesine Başlangıç - 02 | HTML Dersleri (Mart 2024)
Anonim

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ı, bunun görsel bir etki olarak görülmesi ve yapıyı tanımlayan HTML tarafından tanımlanmaması gerektiğiydi. 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üntülendiğini kontrol etmek için beş yeni özellik ekler: taşma tarzı, kayan yazı tarzı, kayan yazı-play-sayımı, çerçevesi-yönü ve çerçevesi hızlı.

taşma tarzı taşma tarzı (CSS Overflow makalesinde de tartıştığım) özellik, içerik kutusundan taşan içerikler için tercih edilen stili tanımlar. Değeri çerçevesi satırı veya kayan blok içeriğiniz sola ve sağa kayacaktır (çerçevesi satırı) veya yukarı / aşağı (kayan blok).

kayan yazı tarzıBu özellik içeriğin nasıl görüneceğini (ve çıkardığını) tanımlar.

Seçenekler kaydırma, kaymak ve alternatif. 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ıKullanmanın dezavantajlarından biri MARQUEE eleman, seçim çerçevesinin hiç durmamasıdır. Ama stil özelliği ile kayan yazı-play-sayımı İçeriği belirli bir süre boyunca 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. Değerler ileri ve ters ne zaman metin yönünü temel alır taşma tarzı olduğu çerçevesi satırı ve yukarı veya aşağı taşma tarzı olduğu kayan blok.

Seçim Çerçevesi Detayları

taşma tarzıDil Yönüileriters
çerçevesi satırıltrayrıldısağ
rtlsağ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ı. Gerçek hız, içeriğe ve onu görüntüleyen tarayıcıya bağlıdır, ancak değerler yavaş daha yavaş normal hangisi daha yavaş hızlı.

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:

CSS3Satı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;}