Vlad Merjeviç

Kısmi şeffaflık, doğru kullanıldığında web sitesi tasarımında çok etkileyici görünüyor. Ana şey, yarı saydam blokların altında tek renkli bir desen değil, bir görüntü olmasıdır, bu durumda şeffaflık fark edilir hale gelir. Bu efekt farklı şekillerde elde edilir ve eski moda yöntemler de dahil olmak üzere her şeyi hatırlarsanız, arka plan olarak bir PNG görüntüsünü kullanarak kareli bir görüntü ve opacity özelliği oluşturur. Ancak bir blokta yarı saydam bir arka plan yapmak gerektiğinde, bu yöntemlerin hoş olmayan bir dezavantajı vardır. Neyin tehlikede olduğunu netleştirmek için küçük bir genel bakış yapacağım ve ayrıca yarı saydamlık efekti yaratmak için alışılmadık seçeneklere aşina olmayan okuyucular için.

arka plan olarak PNG

PNG-24 formatında kaydedilen bir grafik düzenleyicide ön olarak tek renkli yarı saydam bir çizim hazırlanır (Şekil 1). Bu formatın bir özelliği, 256 şeffaflık seviyesini desteklemesidir veya basitçe söylemek gerekirse, yarı saydam görüntüleri gösterebilir.

Pirinç. 1. Arka plan oluşturma için resim

Ardından, örnek 1'de gösterildiği gibi arka plan özelliği aracılığıyla resmi arka plan olarak ekliyoruz.

Örnek 1. Yarı saydam bir desen kullanma

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Bu örneğin sonucu Şekil 2'de gösterilmektedir. 3.

Pirinç. 2. Duvar kağıdı uygulama

Eski Internet Explorer 6 tarayıcısı PNG-24'te yarı saydamlıkla çalışmıyor, herhangi bir nedenle bu tarayıcıyı desteklemeniz gerekiyorsa, bunun için komut dosyaları kullanmanız gerekecek.

Bu yöntemin bir takım sınırlamaları vardır. Bu nedenle, tarayıcıdaki görüntüleri kapattığınızda arka plan tamamen kaybolacaktır. Ayrıca arka plan rengini ve şeffaflık değerini değiştirmek o kadar kolay değil, bunun için görüntüyü tekrar düzenlemeniz gerekecek.

damalı görüntü

Bu yöntem, tarayıcıların "hiçbir şey yapamadığı" ve alışılmadık çözümler araması gerektiğinde, yarı saydamlığı uygulamanın çok eski yollarına aittir. İşin püf noktası, saydam ve opak pikseller arasında değişen bir görüntü oluşturmaktır (Şekil 3). Bu düzenli yapı, esasen onu taklit eden yarı saydam bir etki yaratır.

Pirinç. 3. Büyütülmüş damalı desen

Sonunda böyle görünüyor (Şekil 4).

Pirinç. 4. Yarı saydamlık simülasyonu

Bu yöntemin dezavantajları öncekiyle karşılaştırılabilir; bir hareli desen de oluşabilir ve metin bozulabilir.

Opaklık özelliği

Opaklık CSS 3 özelliği, opaklık değerini ayarlar ve 0 ile 1 arasında değişir; burada sıfır, öğenin tam şeffaflığı ve bir opaktır. Opaklık özelliğinin özel bir özelliği vardır - şeffaflık tüm çocukları kapsar ve ebeveynlerinin şeffaflık değerini aşamaz. Yarı saydam bir arka plan üzerinde opak metin olamayacağı ortaya çıktı (örnek 2).

Örnek 2. Opaklığı kullanma

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

Örneğin sonucu Şekil 1'de gösterilmektedir. 5.

Pirinç. 5. Metin ve arka planın yarı saydamlığı

8.0 dahil olmak üzere Internet Explorer'da opaklık çalışmaz, bu nedenle tarayıcıya özel filtre özelliğini kullanır. Doğal olarak, geçersiz CSS ile sonuçlanır.

RGBA

Modern yaklaşım, yukarıdaki yöntemlerden çok daha basit ve nettir ve renk ve arka plan için RGBA formatının kullanılmasından oluşur. İlk üç harf birçok kişiye tanıdık gelir ve kırmızı, yeşil, mavi (kırmızı, yeşil, mavi) anlamına gelir, ikincisi alfa kanalını sembolize eder ve öğenin şeffaflığını ayarlar. Kayıt formatı aşağıdaki gibidir.

arka plan rengi: rgba (r, g, b, a);

Renk bileşeninin değeri harfler yerine parantez içine alınır, herhangi bir grafik düzenleyicide görüntülenebilir, son değer saydamlığı ayarlar ve opacity özelliğinin değeriyle çakışır.

Tüm tarayıcılar bu biçimi desteklemez: Sürüm 9'dan Internet Explorer, sürüm 10'dan Opera, 3'ten Firefox, 3.2'den Safari. Ancak genel olarak, modern tarayıcılar şeffaflığı doğru bir şekilde sunar. IE'nin eski sürümleri için, rengi normal biçimde ayrı ayrı belirleyebilirsiniz, ancak elbette şeffaflık olmayacaktır. Veya yine filter özelliğini kullanın, ancak daha sonra metnin şeffaflığına da katlanmak zorundasınız (örnek 3). Geçerli CSS'yi korumak için koşullu yorumlar kullandım.

Örnek 3. RGBA'yı Kullanma

HTML5 CSS3 IE Cr Op Sa Fx

Örneğin sonucu Şekil 1'de görülebilir. 6.

Pirinç. 6. Opak metin içeren yarı saydam arka plan

Resmi öncekiyle karşılaştırın, harfler daha parlak ve net.

Internet Explorer 7'de, arka plan rengini farklı değerlerle birleştirirken bir hata bulundu. Örneğin, aşağıda gösterildiği gibi arka plan rengini kırmızıya ayarlarsanız, IE7'deki arka plan hiç görüntülenmez.

Div (arka plan rengi: kırmızı; / * IE7'de geçerli değildir * / arka plan rengi: rgba (255, 0, 0, 0,5);)

Bu, arka plan rengi özelliğinin arka plan ile değiştirilmesiyle çözülür.

Div (background: red; / * Ve bu işe yarar * / background: rgba (255, 0, 0, 0.5);) Ancak bir uyarı var. CSS doğrulayıcı, RGBA biçiminde bir değer verilirse arka planda "yemin eder". Ancak aynı zamanda arka plan rengine de doğru bir şekilde atıfta bulunur. Genel olarak, her zaman olduğu gibi, tarayıcılar ve geçerlilik arasında seçim yapmanız gerekir.

Şeffaflığı iki şekilde ayarlamak için CSS'yi kullanabilirsiniz. opaklık veya özellikleri rgba.

opaklık- Web sayfası öğesinin şeffaflık düzeyini belirler. Kısmi veya tam şeffaflıkta, arka plan görüntüsü veya yarı saydam nesnenin altındaki diğer öğeler, öğenin içinden görünür.

Sözdizimi opaklık: değer

Opaklık 0 (tamamen şeffaf) ile 1 (tamamen opak) arasında ayarlanabilir.

Örneğin, resmimizin yarı saydam olmasına ihtiyacımız var.

Stil Ekleme

Img1 (Opaklık: 0,5; / * Eleman yarı saydamlığı * /)

Ne yazık ki, henüz tüm tarayıcılar opaklığı desteklememektedir. Tam tarayıcılar arası uyumluluk için şunları kullanırız:

filtre: progid: DXImageTransform.Microsoft.Alpha (opaklık = 50); - 5.5-7'nin üzerindeki IE sürümleri için, Alpha DirectX filtresi kullanılarak şeffaflık uygulanır. Değer 0 ile 100 arasında ayarlanır. Kısaltılmış (önerilmez) seçenek filtredir: alpha (opaklık = 50);

-moz-opacity - Mozilla'nın (1.6 ve altı) ve Firefox'un (1.6'ya kadar) eski sürümleri için

Safari 1.1 ve Konqueror 3.1 için -khtml-opaklık

Img1 (filtre: progid: DXImageTransform.Microsoft.Alpha (opaklık = 50); / * IE 5.5 + * / -moz-opacity: 0.5; / * Mozilla 1.6 ve altı * / -khtml-opacity: 0.5; / * Konqueror 3.1 , Safari 1.1 * / opaklık: 0.5; / * CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ * /)

Ayrıca belirtilmemişse IE'de çalışmayabilir Genişlik(genişlik) veya boy uzunluğu(boy uzunluğu).

RGBA özelliği, bir alfa kanalıyla bir arka plan rengi ayarlamanıza olanak tanır. Alfa kanalı, öğenin şeffaflığını belirler.

0 değeri tam şeffaflığa, 1 opaklığa ve 0,5 ila yarı şeffaflık gibi bir ara değere karşılık gelir.

Sözdizimi rgba: değer

Diyelim ki şeffaf bir arka plana sahip metin istiyoruz.

bizim metin

Gövde (arka plan resmi: url (http://g.io.ua/img_aa/large/3228/01/32280132.jpg)) .rgba (yazı tipi boyutu: 50px; renk: rgb (0, 0, 0) ; arka plan rengi: rgba (256,256,256, 0,5); genişlik: 300 piksel;)

Opaklık ve rgba arasındaki farklar

opaklık metin dahil tüm bloğu etkiler. Yeni bir kaplama bağlamı oluşturur. Alt etiketler, ana öğeden daha parlak olamaz.

rgba yalnızca belirli bir özelliği etkiler. Bu durumda arka planı görmenizi sağlar ve metni şeffaf hale getirmez.

opacity CSS özelliği, sayfa öğelerinin opaklığını kontrol etmek için kullanılır. Spesifikasyona göre, herhangi bir düğüm türü için geçerlidir ve tüm modern tarayıcılarda desteklenir. Yardımı ile ilginç bir tasarım oluşturabilir veya kullanıcıyla uygun bir etkileşimli etkileşim uygulayabilirsiniz.

Olası değerler

css'deki opaklık özelliğinin sözdizimi şöyle görünür:

Seçici (opaklık: 1;) seçici (opaklık: 0;) seçici (opaklık: 0.4;)

0 ile 1 aralığındaki sayısal değerler girdi olarak kabul edilir.Parametre birin kesri olabilir, CSS'de tamsayı ve kesirli kısımlar için nokta ayırıcı olarak kullanılır.

Saydamlığı sıfır olan bir öğe görünmez hale gelir, ancak yine de sayfadaki yerini almaya devam eder ve kullanıcı ile etkileşim kurma yeteneğini korur.

Özellik değeri sıfırdan farklıysa, gerçek şeffaflık bir üst limitin yüzdesi olarak hesaplanacaktır. Normalde, opaklık: 1, öğenin tam opaklığını belirler.

Alt düğümlerin şeffaflığı

Ancak, öğenin saydamlığı birden farklı olan bir üst öğesi varsa, hesaplama değişir. Bir torun, atalarından herhangi birinden "daha az şeffaf" olamaz. Ana bloğun opaklık değeri, çocuğun opaklığının üst sınırı olur.

Ebeveyn (opaklık: 0.7;) alt (opaklık: 1;)

Bu durumda, opaklık bir olarak ayarlanmış olsa bile, alt öğe %30 şeffaf olacaktır.

kullanım örnekleri

Örnek 1. Yarı Saydamlık. Bloğun ana arka planının hedef elemanın altında görünmesi gerekir.

Hedef (arka plan: siyah; opaklık: 0,5;)

Yalnızca hedef bloğun arka planı değil, aynı zamanda metin de yarı saydam hale gelir.

Örnek 2. Dinamik şeffaflık kontrolü. Hedef bloğun CSS opaklık özelliğinin değeri, üzerine geldiğinizde değişir.

Hedef (opaklık: 0.2;) .target: üzerine gelin (opaklık: 1;)

Dinamik şeffaflık

Son örnek, şeffaf öğelerin üzerine gelme gibi sayfa olaylarına yanıt vermeye devam ettiğini göstermektedir. Bu, CSS opaklık özelliğini kontrol etmek için javascript kullanmanıza ve görüntüleme modunu sorunsuz bir şekilde değiştirmek için geçiş ve animasyon mekanizmalarını kullanmanıza olanak tanır.

Komut dosyasından şeffaflığa erişmek için belirli bir öğenin stil nesnesine başvurmanız gerekir.

// mevcut opaklığı al var opacity = element.style.opacity; // yeni değeri ayarla element.style.opacity = 0,4;

Bir bloğun karartılması, geçiş CSS özelliği kullanılarak uygulanabilir:

Öğe (opaklık: 0.1; geçiş: opaklık 1000ms;) öğe: vurgulu (opaklık: 0.8; geçiş: opaklık 2000ms;)

Şimdi, öğe düğümü, bir saniye içinde fareyle üzerine gelindiğinde opaklığı %10'dan %80'e değiştirecek ve imleç ayrıldığında, iki saniye içinde orijinal değerine kaybolacaktır.

Geçiş mekanizmasıyla birlikte opaklık CSS özelliği, güzel efektler oluşturmanıza olanak tanır.

Opaklık yerine alfa kanalı

CSS'deki opaklık mekanizmasının ana incelikleri:

• etkisi yalnızca bloğun arka planına değil, aynı zamanda açık bırakılması tercih edilen metin içeriğine de uzanır;
• alt öğeler, üst öğelerden daha az şeffaf olamaz.

Bu efektler mizanpaj tasarımcısı için hayatı zorlaştırıyorsa, opaklık yerine değerini RGBA veya HSLA formatında belirterek şeffaf bir arka plan kullanmanız yeterlidir.

1. Sınıf 2. Sınıf 3. Sınıf 4. Sınıf 5. Sınıf

Ayrıntılar Kategori: Web Tasarımcısı Yazar: SEO & WEB - KELL4

HTML ve CSS'de şeffaf arka plan oluşturun (opaklık ve RGBA efektleri)

yarı saydamlık etkisi eleman arka plan görüntüsünde açıkça görülüyor ve şık ve güzel göründüğü için farklı işletim sistemlerinde yaygınlaştı. Ana şey, yarı saydam blokların altında tek renkli bir desene sahip olmak değil, bir görüntüdür, bu durumda şeffaflık fark edilir hale gelir.

Bu efekt, PNG görüntüsünü arka plan olarak kullanmak, kareli bir görüntü oluşturmak ve opaklık özelliği gibi eski moda teknikler de dahil olmak üzere çeşitli yollarla elde edilir. Ancak bir blokta yarı saydam bir arka plan yapmak gerektiğinde, bu yöntemlerin hoş olmayan dezavantajları vardır.

Metin ve arka planın yarı saydamlığını düşünün - web sitesi tasarımında nasıl doğru şekilde kullanılır:

Bu özelliğin ana özelliği şeffaflık değerinin sadece arka planı değil içerideki tüm çocukları etkilemesidir. Bu, hem arka planın hem de metnin yarı saydam olacağı anlamına gelir. Opaklık komutunu 0.1'den 1'e değiştirerek şeffaflık seviyesini artırabilirsiniz.

HTML 5 CSS 3 IE 9

Web tasarımında kısmi saydamlık da uygulanır ve yalnızca bir öğenin arka planı için ayarlanan RGBA renk formatı aracılığıyla elde edilir.

Tipik olarak tasarımlarda, bir öğenin yalnızca arka planı yarı saydam olmalı ve okunabilirliği korumak için metin opak olmalıdır. Opaklık özelliği burada uygun değildir çünkü öğenin içindeki metin de kısmen saydam olacaktır. Alfa kanalının bir parçası olduğu RGBA biçimini veya başka bir deyişle saydamlık değerini kullanmak en iyisidir. Değer rgba yazılır, ardından kırmızı, mavi ve yeşil renk bileşenlerinin değerleri virgülle ayrılmış parantez içinde listelenir. Sonuncusu, rgba sözdizimi için 0 tam şeffaflık ve 1 opak renk olmak üzere 0'dan 1'e ayarlanan şeffaflıktır.

Yarı saydam arka plan HTML 5 CSS 3 IE 9

Arka Plan Opaklığı %90 olarak ayarlanmıştır - Yarı saydam arka plan ve opak metin.

CSS şeffaflığı, tarayıcılar arası bir çözümdür - 5 oy üzerinden 5 üzerinden 3,6

Bu derste, CSS şeffaflığına bakacağız, sayfanın çeşitli öğelerini nasıl şeffaf hale getireceğimizi öğreneceğiz ve tarayıcılar arası tam uyumluluğu, yani bu efektin farklı tarayıcılarda aynı işlemini gerçekleştireceğiz.

Herhangi bir öğenin şeffaflığı nasıl ayarlanır?

CSS3'te opacity özelliği, herhangi bir öğeye uygulanabilen şeffaf öğeler oluşturmaktan sorumludur. Bu özellik, şeffaflık derecesini belirleyen 0 ile 1 arasında değerlere sahiptir. 0'ın tam şeffaflık (tüm öğeler için varsayılan) ve 1'in tam opaklık olduğu yerde. Değerler kesirlerle yazılmıştır: 0.1, 0.2, 0.3, vb.

Kullanım örneği:

Tarayıcılar arası şeffaflık

Tüm tarayıcılar, yukarıdaki opaklık özelliği hakkında aynı anlayışa ve uygulamaya sahip değildir. Bazı durumlarda, farklı bir mülk adı veya filtreler kullanmanız gerekir.

CSS3 opaklık özelliği, aşağıdaki tarayıcı türleri Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+ tarafından desteklenir.

Böyle iyi :) Internet Explorer gibi 9.0 sürümüne kadar bir tarayıcı opacity özelliğini desteklemez ve bu tarayıcı için şeffaflık oluşturmak için filter özelliğini ve X'in bir tamsayı olduğu alfa değerini (Opacity = X) kullanmanız gerekir. şeffaflık seviyesinin belirlendiği 0 ila 100 aralığında. 0 tamamen saydamdır ve 100 tamamen opaktır.

3.5'ten önceki Firefox tarayıcısından itibaren, opacity yerine -moz-opacity özelliğini destekler.

KHTML motoru üzerine kurulu Safari 1.1 ve Konqueror 3.1 gibi tarayıcılar, şeffaflığı kontrol etmek için -khtml-opacity özelliğini kullanır.

Tüm tarayıcılarda aynı görünmesi için CSS'de şeffaflığı nasıl ayarlarsınız? Öğelerin şeffaflığı için tarayıcılar arası bir çözüm oluşturmak için, yalnızca bir opaklık özelliğini değil, aşağıdaki özellikler kümesini de kaydetmeleri gerekir:

filtre: alfa (Opaklık = 50); / * IE için Şeffaflık * / -moz-opacity: 0,5; / * Mozilla 3.5 ve altı için destek * / -khtml-opacity: 0.5; / * Konqueror 3.1 ve Safari 1.1 desteği * / opaklık: 0.5; / * Diğer tüm tarayıcılar için destek * /

Çeşitli unsurların şeffaflığı

Bir sayfada en sık kullanılan belirli öğeler için saydamlık ayarına ilişkin bazı örneklere bakalım.

Resmin CSS şeffaflığı.

Yarı saydam bir resim oluşturmak için birkaç seçeneği ele alalım. Aşağıdaki örnekte, ilk görüntüde opaklık yok, ikinci görüntüde %50 opaklık ve üçüncü görüntüde %30 opaklık var.

Sonuç:

Resmin üzerine gelindiğinde CSS'de şeffaflık.

İmleç üzerine geldiği anda bir resmi veya başka herhangi bir öğeyi saydam yapmak genellikle gereklidir. Bu, CSS sözde sınıfı kullanılarak yapılabilir: hover. Bunu yapmak için, resmimize biri normal olmak üzere iki sınıf atanması gerekiyor - bu, resmin etkin olmayan durumu ve ikinci sınıf olacak: vurgulu sözde sınıf, burada şu anda resmin şeffaflığını belirtmeniz gerekiyor imleci gezdirmek.

Sonucu demoda görebilirsiniz.

CSS'ye arka plan şeffaflığı.

Burada saydamlığın tüm iç içe öğeler için geçerli olduğu ve bunların iç içe geçmiş öğelerden daha saydam olamayacağı unutulmamalıdır.

Örnek olarak, bir resim kullanılarak oluşturulan bir sayfa arka planı ve renk kullanılarak oluşturulan ve şeffaflığı %50 olan bir arka planı olan bir blok içeren bir varyant vereceğiz.

Basit kod:

İşte yukarıdaki kodun çıktısı: