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, HTML spesifikasyonuna hiçbir zaman eklenmedi ve buna yönelik destek, tarayıcılar arasında çok çeşitliydi. İ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, görsel bir efekt olarak kabul edilmesi ve bu nedenle 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 öğelere seçim çerçevesi efektini nasıl eklediğini kontrol etmek için seçim çerçevesi modülünü ekler.
Yeni CSS3 Özellikleri
CSS3, içeriğinizin seçim çerçevesi içinde nasıl görüntüleneceğini kontrol etmeye yardımcı olmak için beş yeni özellik ekler: 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 kayan yazı bloğu olarak ayarlarsanız, içeriğiniz sola/sağa (kayan çerçeve) veya yukarı/aşağıya (kayan çerçeve bloğu) girip çıkar.
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ırma ve alternatiftir. 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 seçim çerçevesi ç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ı
overflow-style |
Dil Yönü | ileri | tersine çevirmek |
|---|---|---|---|
marquee-line |
litre | ayrıldı | sağ |
| rtl | sağ | ayrıldı | |
marquee-block |
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
CSS seçim çerçevesi öğelerinin çalışması için satıcı öneklerini kullanmanız gerekebilir. Bunlar aşağıdaki gibidir:
| CSS3 | Satıcı Öneki |
|---|---|
overflow-x: marquee-line; |
overflow-x: -webkit-marquee; |
marquee-style |
-webkit-marquee-style |
marquee-play-count |
-webkit-marquee-repetition |
marquee-direction: forward|reverse; |
-webkit-marquee-direction: forwards|backwards; |
marquee-speed |
-webkit-marquee-speed |
| eşdeğeri yok | -webkit-marquee-increment |
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, 200×50’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;
}
type=”kod”>
mla apa chicago Alıntınızı Biçimlendirin
Kyrin, Jennifer. “ÇARKI Olmadan HTML5 ve CSS3’te Kaydırılabilir İçerik Oluşturma.” Düşünce Şirketi, Mayıs. 14, 2021, Thoughtco.com/scrollable-content-html5-css3-without-marquee-3467007.
Kyrin, Jennifer. (2021, 14 Mayıs). MARQUEE olmadan HTML5 ve CSS3’te Kaydırılabilir İçerik Oluşturma. https://www.thinktco.com/scrollable-content-html5-css3-without-marquee-3467007 adresinden alındı
Kyrin, Jennifer. “ÇARKI Olmadan HTML5 ve CSS3’te Kaydırılabilir İçerik Oluşturma.” Düşünce Şirketi https://www.thinktco.com/scrollable-content-html5-css3-without-marquee-3467007 (3 Haziran 2021’de erişildi).
-
IFrame’leri CSS ile Stillendirme
-
Görüntüleri ve Diğer HTML Nesnelerini Ortalamak İçin CSS Nasıl Kullanılır
-
Web Tasarımında Seçim Çerçevesi
-
HR Etiketi ile HTML’ye Satır Ekleme
-
CSS3 ile Web Sayfası Öğelerini Soldurun
-
Bir Web Sayfasına Sığdırmak İçin Arka Plan Resmini Uzatma
-
İşaretleme Dilleri Nelerdir?
-
CSS2 ve CSS3 Arasındaki Fark
-
HTML Kaydırma Kutusu
-
CSS’de 3 Sütunlu Düzen Nasıl Oluşturulur
-
Videoyu Mevcut Tarayıcılarda Görüntülemek için HTML5 Kullanma
-
HTML TABLE Öğe Niteliklerini Kullanma
-
Kullanıcı Stil Sayfası Nedir?
-
Bir Web Sayfasında Metnin Solundaki Bir Görüntü Nasıl Kaydırılır
-
HTML5 Canvas: Nedir ve Neden Kullanılır?
-
Ev
Bizi takip edin
-
Facebook
Facebook -
Flipboard
Flipboard
- Hakkımızda
- reklam
- Gizlilik Politikası
- Çerez politikası
- kariyer
- İçerik Yönergeleri
- İletişim
- Kullanım Şartları
- Kaliforniya Gizlilik Bildirimi
- AB Gizliliği
Gizlilik Haklarınız
ThoughtCo ve üçüncü taraf ortaklarımız, bir cihazda bilgi depolamak ve/veya bilgilere erişmek, kişiselleştirilmiş reklamlar görüntülemek ve içerik ölçümü, hedef kitle içgörüsü ve ürün geliştirme için verdiğiniz rızaya dayalı olarak çerezleri kullanır ve benzersiz tanımlayıcılar gibi kişisel verileri işler. Meşru menfaatin kullanıldığı durumlarda itiraz etme hakkınız da dahil olmak üzere, ThoughtCo.com için onay tercihlerinizi değiştirmek veya geri çekmek için aşağıya tıklayın. İstediğiniz zaman, herhangi bir sayfanın altındaki “AB Gizliliği” bağlantısı aracılığıyla ayarlarınızı güncelleyebilirsiniz. Bu seçimler, küresel olarak ortaklarımıza bildirilecek ve tarama verilerini etkilemeyecektir. Ortakların Listesi (satıcılar)
Biz ve ortaklarımız verileri şu amaçlarla işliyoruz:
Tanımlama için cihaz özelliklerini aktif olarak tarayın. Kesin coğrafi konum verilerini kullanın. Bilgileri bir cihazda saklayın ve/veya bilgilere erişin. Kişiselleştirilmiş içerik seçin. Kişiselleştirilmiş bir içerik profili oluşturun. Reklam performansını ölçün. Temel reklamları seçin. Kişiselleştirilmiş bir reklam profili oluşturun. Kişiselleştirilmiş reklamları seçin. Kitle içgörüleri oluşturmak için pazar araştırması uygulayın. İçerik performansını ölçün. Ürünleri geliştirin ve iyileştirin. Ortakların Listesi (satıcılar)
-
