, içinde belirli bir içerik ve yalnızca css aracılığıyla oluşturulan bir "Kapat" düğmesi ile.

1. pencereyi aç 2. pencereyi aç 3. pencerede video 4. pencerede fotoğraf

Yukarıdaki kod örneğinde, anlaşılır olması için modal pencerelerin kaplarına kısa açıklamalar yazdım. Benzetme yoluyla sizin için kalır, div kapsayıcı herhangi bir üçüncü taraf kaynaktan, YouTube, Vimeo, vb. basit metin, resim veya video olsun, herhangi bir içeriğinizi yerleştirin. Modal pencereleri aramak için bağlantılar, metin yapabilir veya bunları örnekte olduğu gibi harika, degrade düğmeler şeklinde tasarlayabilirsiniz.

Adım 2. CSS

Bir sonraki adım, bu en ilginç olanı, modal penceremiz için gerekli tüm stilleri hazırlamak önemlidir, dış görünüş ve işlevsellik ekleyin. Kafa karıştırmamak için sayfanın temel stillerini çıkardım ve daha fazla netlik için bazı kuralları yorumlarla sulandırdım:

/ * Temel karartma ve modal katman stilleri * / .overlay (üst: 0; sağ: 0; alt: 0; sol: 0; z-endeksi: 1; görünürlük: gizli; / * karartma arka planı * / arka plan rengi: rgba (0, 0, 0, 0.7); opaklık: 0; konum: sabit; / * sabit konumlandırma * / imleç: varsayılan; / * imleç türü * / -webkit-transition: opacity .5s; -moz-transition: opaklık . 5s; -ms-geçişi: opaklık .5s; -o-geçişi: opaklık .5s; geçiş: opaklık .5s;) .overlay: hedef (görünürlük: görünür; opaklık: 1;) .is-image (üst: 0 ; sağ: 0; alt: 0; sol: 0; ekran: blok; kenar boşluğu: otomatik; genişlik: %100; yükseklik: otomatik; / * satır içi görüntülerin köşelerini yuvarlama * / -webkit-border-radius: 4px; -moz - border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px;) / * gömülü m-medya öğeleri, çerçeveler * / embed, iframe (üst: 0; sağ: 0; alt: 0; sol : 0; ekran: blok; kenar boşluğu: otomatik; minimum genişlik: 320 piksel; maksimum genişlik: 600 piksel; genişlik: %100;) .popup h1 (/ * başlık 1 * / renk: # 008000; metin hizalama: sol ; metin gölgesi: 0 1p x 3px rgba (0,0,0, .3); yazı tipi: 24px "Trebuchet MS", Helvetica, sans-serif; yazı tipi ağırlığı: kalın; ) .popup h2 (/ * başlık 2 * / renk: # 008000; metin hizalama: sol; metin gölgesi: 0 1 piksel 3 piksel rgba (0,0,0, .3); yazı tipi: 22 piksel "Trebuchet MS", Helvetica , sans-serif;) / *** Kalıcı pencere stilleri oluştur *** / .popup (üst: 0; sağ: 0; sol: 0; yazı tipi boyutu: 14 piksel; z-endeksi: 10; ekran: blok; görünürlük : gizli; kenar boşluğu: 0 otomatik; genişlik: %90; minimum genişlik: 320 piksel; maksimum genişlik: 600 piksel; / * sabit konumlandırma, pencere kaydırma sırasında sabittir * / konum: sabit; dolgu: 15 piksel; kenarlık: 1 piksel katı # 383838 ; / * köşeleri yuvarlama * / -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; arka plan rengi: #FFFFFF; / * dış kutu gölgesi * / -webkit-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); -moz-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); - ms-box -shadow: 0 0 6px rgba (0, 0, 0, 0.8); -o-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); box-shadow: 0px 0px 6px rgba ( 0, 0 , 0, 0.8); / * tıklamada görünen pencerenin tam şeffaflığı * / opacity: 0; / * geçiş efekti (görünür) * / -webkit-transiti açık: tüm kolaylık .5s; -moz-geçiş: tüm kolaylık .5s; -ms-geçiş: tüm kolaylık .5s; -o-geçiş: tüm kolaylık .5s; geçiş: tüm kolaylık .5s; ) / * pencerenin görünmesini ve arka planı koyulaştırmasını etkinleştir * / .overlay: target + .popup (üst: %20; / * pencerenin göründüğünde sayfanın üst kısmından itibaren konumu * / görünürlük: görünür; opaklık: 1; / * saydamlığı kaldır * /) / * kapat düğmesini oluşturur * / .close (konum: mutlak; üst: -10 piksel; sağ: -10 piksel; dolgu: 0; genişlik: 20 piksel; yükseklik: 20 piksel; kenarlık: düz 2 piksel #ccc; -webkit-border-radius: 15px ; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; arka plan rengi: rgba (61, 61, 61, 0. sekiz); -webkit-box-shadow: 0px 0px 10px # 000; -moz-box-shadow: 0px 0px 10px # 000; kutu gölgesi: 0px 0px 10px # 000; metin hizalama: merkez; metin-dekorasyon: yok; yazı tipi ağırlığı: kalın; satır yüksekliği: 20 piksel; / * üzerine gelindiğinde değerleri ve geçiş efektini ayarlayın * / -webkit-geçiş: tüm kolaylıklar .8s; -moz-geçiş: tüm kolaylık .8s; -ms-geçiş: tüm kolaylık .8s; -o-geçiş: tüm kolaylık .8s; geçiş: tüm kolaylık .8s; ) .close: önce (renk: rgba (255, 255, 255, 0.9); içerik: "X"; metin gölgesi: 0 -1 piksel rgba (0, 0, 0, 0.9); yazı tipi boyutu: 12 piksel;) .close: üzerine gelin (arka plan rengi: rgba (252, 20, 0, 0.8); / * üzerine gelindiğinde düğmeyi döndürün * / -webkit-transform: döndür (360 derece); -moz-dönüşümü: döndür (360 derece); - ms -dönüşüm: döndürme (360 derece); -o-dönüşüm: döndürme (360 derece); dönüştürme: döndürme (360 derece);) / * ek eklerken isteğe bağlı * / .popup p, .popup div (alt kenar boşluğu: 10px;)

Gördüğün gibi sevgili arkadaşlar, her şey oldukça basit ve gereksiz bir karışıklık yok. Her şeyi doğru yaparsanız, cephaneliğinize, metin içeriği, fotoğraflar, çeşitli kayıt formları ve herhangi bir içeriği yerleştirebileceğiniz harika bir kalıcı açılır pencere alacaksınız. geri bildirim veya herhangi bir üçüncü taraf kaynaktan video. Parametrelerle denemeler yapın, pencereyi istediğiniz gibi değiştirin ve mümkünse en iyi uygulamalarınızı ve aniden ortaya çıkan sorunları yorumlarda paylaşın.

Günümüzde çeşitli siteler için her türlü pop-up modal pencereler - pop-up'lar - kayıt, yetkilendirme, bilgi pencereleri, - her türlü şekil ve boyut norm haline geldi. basit ve uygun oluşturma bu tür açılır pencereler - örneğin aynı Shadowbox.

Bu tür açılır pencerelerin görünümü, boyutu ve tasarımı tamamen çeşitlidir - bindirmeler, gölgeler, animasyonlar ile - sayılacak çok şey var. Onları birleştiren şey, belki de, genellikle sayfanın tam ortasında hem yatay hem de dikey olarak görüntülenmeleridir. Ve merkezleme JS ile yapılır. Bu hesaplamaların ayrıntılarına girmeyeceğim, sadece kısaca anlatacağım:

Popup HTML kodu genellikle aşağıdaki yapıya sahiptir:

- İçerikli açılır pencere ->

Ve CSS ( burada ve aşağıda, yalnızca bazı tarayıcılar ve sürümleri için gerekli olan bazı özelliklerin yazılmasını kasıtlı olarak atlayacağım, yalnızca en temel olanı bırakacağım.):

Popup__overlay (
pozisyon: sabit;
sol: 0;
üst: 0;
arka plan: # 000;
opaklık: .5;
filtre: alfa (opaklık = 50);
z-endeksi: 999
}
.açılır (
pozisyon: mutlak;
genişlik: %20;
z-endeksi: 1000;
kenarlık: 1px düz #ccc;
arka plan: #fff
}

JS, tarayıcı ve tarayıcı sürümünü belirler ve buna dayanarak, çalışma alanının boyutunu ve açılır pencerenin boyutunu (belirtilmemişse) hesaplar ve ardından sol üst köşesinin konumunun basit hesaplamaları yapılır. (.popup için sol ve üst css özellikleri). Pek çok eklenti, sayfanın yeniden boyutlandırılmasına da tepki vererek, açılır pencerenin tam olarak çalışma alanının ortasına yerleştirilmesi için her şeyi her seferinde yeniden hesaplar.

Ben doğası gereği mükemmeliyetçiyim (biliyorum, bazen kötü oluyor) ve çoğu zaman küçük ayrıntılarla bile uğraşıyorum, bu ayrıntıları geliştirmeye ve bu ayrıntılara mümkün olan maksimum genişletilebilirliği eklemeye çalışıyorum ve bu ana bağımlı olmaktan kendimi alamadım. tüm bu eklentilerin çalışmasında. Açılır pencereyi konumlandırma konusundaki tüm çalışmaların JS'nin omuzlarından tarayıcının omuzlarına kaydırılabileceği, yani bu işin CSS kullanılarak yapılabileceği düşüncesi ortaya çıktı.

Yapacağımız şey bu.

Aşağıda, büyük tarayıcıların tüm ana sürümlerinde çalışan bir açılır pencere örneği vereceğim. IE'de düzgün çalışması için<9 необходима некоторая экстра-разметка и хаки, потому детальное описание написания такого метода я опущу, а для интересующихся выложу полную версию.

Yani, tıklandığında açılması gereken düğmeli bir sayfamız var. kalıcı pencere bazı bilgilerle ve diğer tüm içerik bir kaplama ile gölgelendirilmelidir.

HTML koduyla başlayalım. Yapısı yukarıda belirtilen koddan biraz farklı olacaktır, neden - bu konuda daha fazlası makalede; eleman sınıfları aynı kalacaktır:

< div class ="popup__overlay">
< div class ="popup">

Ve biraz CSS:

Popup__overlay (
pozisyon: sabit;
sol: 0;
üst: 0;
genişlik: %100;
yükseklik: %100;
z-endeksi: 999
}
.açılır (
}

Sabit boyutlar

En kolay seçenek. Yeni bir şey icat etmenize gerek yok:

Açılır (
sol: %50;
üst: %50;
genişlik: 400 piksel;
yükseklik: 200 piksel;
sol kenar boşluğu: -200 piksel;
üst kenar boşluğu: -100 piksel
}

Genişlik ve yüksekliğin yarısındaki negatif kenar boşlukları önemsiz ve sıkıcı, bu konuda orijinal bir şey değil.

Pop-up boyutları içeriğe bağlıdır

İlk olarak, yatay hizalama daha kolay görünüyor. Açılır pencere sabit bir genişliğe sahipse, aşağıdakiler yeterli olacaktır:

Açılır (
kenar boşluğu: otomatik
}

Bu, dikey hizalamayı hiçbir şekilde etkilemeyecektir ve bu arada, yalnızca yatay hizalamaya ihtiyacınız varsa, açılır pencerenin başka bir üst kenar boşluğunu belirterek orada durabilirsiniz. Ama bu bizim için yeterli değil! Devam et.

Dikey hizalama. İşte burası ilginçleşiyor. Tabii ki, display: table & display: table-cell kullanan bir tablo veya tablo öykünmesi böyle bir görevle sorunsuz bir şekilde başa çıkabilir, ancak bu işi eski IE'de yapmak daha pahalıdır. Tablo da kaybolur - bariz nedenlerden dolayı.

Yani, marj zaten eksik - boyutları bilmiyoruz. Benzer etkilere sahip özelliklerin neler olduğunu hatırlayalım. Evet, metin hizalama. Ancak yalnızca satır içi öğeler için. TAMAM. Görünüşe göre Tanrı'nın kendisi display: inline-block - satır içi öğeler için özelliklerin uygulanabileceği bir blok öğesi kullanımını emretti. Bu özelliğin tüm tarayıcılarda da desteklenmesiyle, söylenebilecek her şey yolunda. Kod şöyle bir şey olur:

Popup__overlay (
pozisyon: sabit;
sol: 0;
üst: 0;
genişlik: %100;
yükseklik: %100;
z-endeksi: 999;
metin hizalama: orta
}
.açılır (
ekran: satır içi -blok;
dikey hizalama: orta
}

Dikey hizalama kalır - dikey hizalama bizim için iyidir. Başka herhangi bir durumda line-height kullanmak da uygun olacaktır, ancak sabit bir sayfa yüksekliğimiz olmadığı için (bu bağlamda line-height) burada kullanılamaz. Bilinmeyen boyutlardaki öğelerin dikey olarak hizalanmasıyla bir numara kurtarmaya gelir. Habré'de bu yöntemi bulduğumu tam olarak hatırlıyorum ama ne yazık ki o konuyla ilgili bir bağlantı bulamadım. Bu yöntem aşağıdakilerden oluşur: satır yüksekliğini ebeveynin yüksekliğinin %100'üne, yani çalışma alanının yüksekliğine "genişleten", sıfır genişlikte ve ebeveynin %100 yüksekliğinde bir satır içi blok öğesi eklenir. sayfanın. Hadi daha zarif yapalım - gereksiz işaretlemeler yerine sözde öğeler kullanacağız:

Popup__overlay: sonra (
ekran: satır içi -blok;
genişlik: 0;
yükseklik: %100;
dikey hizalama: orta;
içerik: ""
}

Yarı saydam bir kaplama koyulaştırma eklemeye devam ediyor - rgba bunu halledecek. Her şey! Artık açılır pencerenin konumu yalnızca tarayıcı aracılığıyla CSS düzeyinde kontrol edilir.

Bu derste, deneyimli mizanpaj tasarımcıları ve css guruları için bir sır vermeyeceğim, ancak bu makale yeni başlayanlar için faydalı olacaktır. Burası, sitenizin tamamında pop-up'ları nasıl oluşturacağınızı öğrenebileceğiniz yerdir.

Çoğu zaman, bu tür pencereler sitede belirli eylemleri gerçekleştirdikten sonra görünür, örneğin, kullanıcı "Geri arama talep et" bağlantısını tıklar ve önünde bir sipariş formu açılır.

PopUp pencerelerini ajax ile birlikte kullanmak çok uygundur, ancak bu başka bir dersin konusu.

PopUp açılır pencerelerini kullanan web'de giderek daha fazla web kaynağı görünmeye başlıyor. Örnek olarak herkes biliyor. sosyal ağlar... Ekran görüntülerindeki tüm gereksiz veriler kaldırıldı.

Temas halinde

Facebook

heyecan

Şu soruyu incelemeye başlamak için yeterli neden olduğunu düşünüyorum: sitenizde bir PopUp pop-up'ı nasıl yapılır.

Sorun bildirimi (TOR)

Tüm sitenin üstünde karartma ekranı olan bir açılır pencere oluşturmak gerekir.

Çözüm

Yöntem 1

html

css

* (font-family: Areal;) .b-container (genişlik: 200 piksel; yükseklik: 150 piksel; arka plan rengi: #ccc; kenar boşluğu: 0 piksel otomatik; dolgu: 10 piksel; yazı tipi boyutu: 30 piksel; renk: #fff;) .b-popup (genişlik: %100; yükseklik: 2000 piksel; arka plan rengi: rgba (0,0,0,0.5); taşma: gizli; konum: sabit; üst: 0 piksel;) .b-popup .b-popup -içerik (kenar boşluğu: 40 piksel otomatik 0 piksel otomatik; genişlik: 100 piksel; yükseklik: 40 piksel; dolgu: 10 piksel; arka plan rengi: # c5c5c5; kenarlık yarıçapı: 5 piksel; kutu gölgesi: 0 piksel 0 piksel 10 piksel # 000;)

Sonuç:

Çok sık kullanılması önerilir:

pozisyon: mutlak;
Evet, sonuç aynı, ancak "gölgeleme" bloğunun yüksekliğini ayarladığımız için kaydırma çubukları çıkıyor. Bu nedenle bu yöntem uygun değildir.

Yöntem 2

Bu yöntem, Yöntem 1'den önemli ölçüde farklı değil, ancak daha uygun buluyorum.

HTML (değişmedi)

Css

* (font-family: Areal;) .b-container (genişlik: 200 piksel; yükseklik: 150 piksel; arka plan rengi: #ccc; kenar boşluğu: 0 piksel otomatik; dolgu: 10 piksel; yazı tipi boyutu: 30 piksel; renk: #fff;) .b-popup (genişlik: %100; minimum yükseklik: %100; arka plan rengi: rgba (0,0,0,0.5); taşma: gizli; konum: sabit; üst: 0px;) .b-popup. b-popup içeriği (kenar boşluğu: 40px otomatik 0px otomatik; genişlik: 100px; yükseklik: 40px; dolgu: 10px; arka plan rengi: # c5c5c5; kenarlık yarıçapı: 5px; kutu gölgesi: 0px 0px 10px # 000;)

Sonuç benzer

Mülk sayesinde: min-yükseklik: %100;"karartma" bloğumuz %100 genişlik kazandı ve Minimum yükseklik ekranın %100'ünde.

tek dezavantajı Bu method bu mu Internet Explorer bu özelliği yalnızca 8.0 sürümünden beri destekler.

Jquery'ye sihir eklemek

Şimdi açılır penceremizi gizlemek / göstermek için bağlantılar ekleyelim.

Bunu yapmak için JQuery kitaplığını ve küçük bir komut dosyasını bağlamanız gerekir:

Ayrıca Html'nin güncellenmesi gerekiyor:

Sonuç

Şimdi, sayfa yüklendiğinde PopUp kaybolacak.

Sonucu burada görebilirsiniz.

Bu derste, deneyimli mizanpaj tasarımcıları ve css guruları için bir sır vermeyeceğim, ancak bu makale yeni başlayanlar için faydalı olacaktır. Burası, sitenizin tamamında pop-up'ları nasıl oluşturacağınızı öğrenebileceğiniz yerdir.

Çoğu zaman, bu tür pencereler sitede belirli eylemleri gerçekleştirdikten sonra görünür, örneğin, kullanıcı "Geri arama talep et" bağlantısını tıklar ve önünde bir sipariş formu açılır.

PopUp pencerelerini ajax ile birlikte kullanmak çok uygundur, ancak bu başka bir dersin konusu.

PopUp açılır pencerelerini kullanan web'de giderek daha fazla web kaynağı görünmeye başlıyor. Bir örnek, tanıdık sosyal ağlardır. Ekran görüntülerindeki tüm gereksiz veriler kaldırıldı.

Temas halinde

Facebook

heyecan

Şu soruyu incelemeye başlamak için yeterli neden olduğunu düşünüyorum: sitenizde bir PopUp pop-up'ı nasıl yapılır.

Sorun bildirimi (TOR)

Tüm sitenin üstünde karartma ekranı olan bir açılır pencere oluşturmak gerekir.

Çözüm

Yöntem 1

html

css

* (font-family: Areal;) .b-container (genişlik: 200 piksel; yükseklik: 150 piksel; arka plan rengi: #ccc; kenar boşluğu: 0 piksel otomatik; dolgu: 10 piksel; yazı tipi boyutu: 30 piksel; renk: #fff;) .b-popup (genişlik: %100; yükseklik: 2000 piksel; arka plan rengi: rgba (0,0,0,0.5); taşma: gizli; konum: sabit; üst: 0 piksel;) .b-popup .b-popup -içerik (kenar boşluğu: 40 piksel otomatik 0 piksel otomatik; genişlik: 100 piksel; yükseklik: 40 piksel; dolgu: 10 piksel; arka plan rengi: # c5c5c5; kenarlık yarıçapı: 5 piksel; kutu gölgesi: 0 piksel 0 piksel 10 piksel # 000;)

Sonuç:

Çok sık kullanılması önerilir:

pozisyon: mutlak;
Evet, sonuç aynı, ancak "gölgeleme" bloğunun yüksekliğini ayarladığımız için kaydırma çubukları çıkıyor. Bu nedenle bu yöntem uygun değildir.

Yöntem 2

Bu yöntem, Yöntem 1'den önemli ölçüde farklı değil, ancak daha uygun buluyorum.

HTML (değişmedi)

Css

* (font-family: Areal;) .b-container (genişlik: 200 piksel; yükseklik: 150 piksel; arka plan rengi: #ccc; kenar boşluğu: 0 piksel otomatik; dolgu: 10 piksel; yazı tipi boyutu: 30 piksel; renk: #fff;) .b-popup (genişlik: %100; minimum yükseklik: %100; arka plan rengi: rgba (0,0,0,0.5); taşma: gizli; konum: sabit; üst: 0px;) .b-popup. b-popup içeriği (kenar boşluğu: 40px otomatik 0px otomatik; genişlik: 100px; yükseklik: 40px; dolgu: 10px; arka plan rengi: # c5c5c5; kenarlık yarıçapı: 5px; kutu gölgesi: 0px 0px 10px # 000;)

Sonuç benzer

Mülk sayesinde: min-yükseklik: %100;"karartma" bloğumuz %100 genişlik kazandı ve Minimum yükseklik ekranın %100'ünde.

Bu yöntemin tek dezavantajı, Internet Explorer'ın bu özelliği yalnızca 8.0 sürümünden itibaren desteklemesidir.

Jquery'ye sihir eklemek

Şimdi açılır penceremizi gizlemek / göstermek için bağlantılar ekleyelim.

Bunu yapmak için JQuery kitaplığını ve küçük bir komut dosyasını bağlamanız gerekir:

Ayrıca Html'nin güncellenmesi gerekiyor:

Sonuç

Şimdi, sayfa yüklendiğinde PopUp kaybolacak.

Sonucu burada görebilirsiniz.

Sitede çağrılacak farklı işlevlerin altına koyabileceğiniz, tamamen saf CSS'de yürütülen, işlevler açısından basit bir modal pencere. Bu muhtemelen prostat ayarları açısından değil, aynı zamanda kurulum için modal pencere seçiminden tanıştığım birçok kişiden biridir. Ancak asıl şey, diğerlerinden daha düşük olmayacak olan işlevselliğidir. Ayrıca, varsayılan olarak, sağda olduğu yerde hafif bir gölgede yapılır. üst köşe düğme, bir çarpı şeklinde ayarlanır.

Hangi devre dışı bırakma işlevine gidecek veya sadece çerçeveyi ortadan kaldırmak için, bu küçük öğede bile renk paletini değiştirmenin bir etkisi var. Artık web yöneticisi onu siteye koyabilir ve içine istatistikler veya bilgilendiriciler gibi farklı kategorileri görüntüleyebilen bir açıklama veya operatörler yerleştirebilir.

Ancak gerçek şu ki, kaynağın karanlık bir stiline sahipseniz, stilde ölçeği hızlı bir şekilde değiştirebilir veya daha doğrusu orijinal tasarıma göre ayarlayabilirsiniz. İşte bunlardan biri standart yöntemler nasıl yapılır saf css HTML bağlantısına sahip bağlantının altındaki düğme tıklandığında açılacak olan kalıcı pencereye. Düğmenin kendisi, stillerde, bir sınıfın kaldırılmasının ve adın kalacağı, navigasyona veya ana işlevselliğin veya site navigasyonunun bulunduğu kontrol paneline yerleştirilebilecek görünürlük için daha fazla gider.

Bu, her şeyin yolunda gittiğini kontrol ederken:

Kuruluma başlarken:

Bir düğme ile pencere

CSS

Butksaton-satokavate (
ekran: satır içi blok;
metin-dekorasyon: yok;
sağ kenar boşluğu: 7px;
sınır yarıçapı: 5 piksel;
dolgu: 7px 9px;
arka plan: # 199a36;
renk: #fbf7f7!önemli;
}

anelümen (
ekran: esnek;
pozisyon: sabit;
sol: 0;
en iyi 100%;
genişlik: %100;
yükseklik: %100;
hizalama öğeleri: merkez;
haklı içerik: merkez;
opaklık: 0;
-webkit-geçiş: ilk 0s .7s, opaklık .7s 0s;
geçiş: ilk 0s .7s, opaklık .7s 0s;
}

Anelümen: hedef (
üst: 0;
opaklık: 1;
-webkit-geçiş: yok;
geçiş: yok;
}

Anelümen figürü (
genişlik: %100;
maksimum genişlik: 530 piksel;
pozisyon: göreceli;
dolgu: 1.8em;
opaklık: 0;
arka plan rengi: beyaz;
-webkit-geçiş: opaklık .7s;
geçiş: opaklık .7s;
}

Anelumen.lowingnuska figürü (
arka plan: # f9f5f5;
sınır yarıçapı: 7 piksel;
üst dolgu: 8px;
sınır: 3px düz #aaaabad;
}

Anelumen.lowingnuska şekil h2 (
üst kenar boşluğu: 0;
alt dolgu: 3 piksel;
sınır-alt: 1 piksel katı # dcd7d7;
}

Anelümen: hedef rakam (
opaklık: 1;
}

Anelumen.lowingnuska .compatibg-ukastywise (
metin-dekorasyon: yok;
pozisyon: mutlak;
sağ: 8 piksel;
üst: 0 piksel;
yazı tipi boyutu: 41 piksel;
}

Anelumen .nedismiseg (
sol: 0;
üst: 0;
genişlik: %100;
yükseklik: %100;
pozisyon: sabit;
arka plan rengi: rgba (10, 10, 10, 0.87);
içerik: "";
imleç: varsayılan;
görünürlük: gizli;
-webkit-geçiş: tüm .7'ler;
geçiş: tüm .7'ler;
}

Anelumen: hedef .nedismiseg (
görünürlük: görünür;
}

Ayrıca, CSS stilinin ve sözde sınıfın, birçok ilginç potansiyel uygulamaya sahip CSS özellikleri tarafından tam olarak kullanılmayanlardan biri olduğunun da farkında olmalısınız.

ne zaman başlar URL sayfa, öğesinin tanımlayıcısıyla eşleşir veya bunu farklı bir şekilde ifade edebilirsiniz; bu, kullanıcının sayfadaki belirli bir öğeye atlamasıdır.