‘rgba’ etiketi için sonuçlar
CSS3 RGBA Renk Tanımı
Eylül 22nd, 2010 • 5 yorum CSS, Web Standartları
Etiketler: alfa kanalı, css3, renk tanımı, renk-birimleri, rgba, saydamlık
CSS ile renk değeri ataması yapılırken çeşitli yöntemler kullanıyoruz. Daha önce CSS Birimleri makalemizde anlatmıştık. İki tip renk tanımı var. Renk isimleri ile tanımlama(İngilizce renk isimleri)
background-color:red
tanımı kırmızı renkli bir ardalan elde etmemizi sağlar
RGB(Red-Green-Blue) yani Kırmızı-Yeşil-Mavi renklerin baz alındığı renk standardı. Açıkçası ben projelerimde her zaman rgb standardını kullanmaktayım.
background-color:#ff0000
Tanımı kırmızı renkte ardalanlar elde etmemizi sağlar. Bu tanımı birde kısaltması mevcuttur. Eğer bir birine benzer 2’li elemanlardan oluşan bir renk tanımı varsa yukarıdaki gibi benzer değerleri bir kere yazarakta aynı sonucu elde edebiliriz.
background-color:#f00
Yukarıdaki tanımda bize kırmızı rengi verecektir.
Buraya kadar mevcut durumu özetlemeye çalıştım. Şimdi ise CSS3 ile gelen renk tanımı yeniliğine göz atalım. RGBA ve HSLA tanımları yukarıdaki renk tanımlarına ek olarak gelmiştir. Benzer kullanıma sahip olduğu için ben sadece RGBA tanımı hakkında bilgi vereceğim sizlere, HSLA tanımıda standart olarak farklı ama işlevsel olarak RGBA ile etkiyi vereceği için RGBA tanımı anlatmak ile yetineceğim.
Renk değerlerini genelde web sitelerini kodlarken resim işleme araçları(örn. Adobe Phoshop, Adobe Fireworks) aracılığı ile alırız. Bu araçlar bize renk paleti olarak RGB, HSL değerlerini verir.
CSS3 ile birlikte RGBA renk tanımıda eklenmiştir. Buradaki A harfi Alfa’ya karşılık gelen bir karşılıktır. Alfa değeri renk tanımımıza saydamlık etkisi katmaktadır. 0.0 ile 1 arasında değer alır. 0 değeri etkisiz kılarken 1 değeri de katı bir renk ortaya çıkaracaktır. Ara değerler bize saydamlık etkisi tanımlamamızı sağlayacaktır.
RGBA Tanımı
Normalde css ile renk tanımı yaparken
background-color:#1259C7
tanımı kullanıyorum. Benzer şekilde
<li>background-color:rgb(18,89,199)</li>
Tanımıda bize aynı sonucu verir. RGBA ile dördüncü değer olarak alfa saydamlık derecesini ekleriz.
background-color:rgba(18,89,199,0.4)
Şeklinde bir tanım yapıyoruz. 0.4 değeri bize % 40’lık bir saydamlık sağlayacaktır.
Durumu daha iyi anlamak için bir örnek yapalım
p.renk1{ background-color:rgba(18,89,199,0.2); width:70px; height:70px}
p.renk2{ background-color:rgba(18,89,199,0.4); width:70px; height:70px}
p.renk3{ background-color:rgba(18,89,199,0.6); width:70px; height:70px}
p.renk4{ background-color:rgba(18,89,199,0.8); width:70px; height:70px}
p.renk5{ background-color:rgba(18,89,199,1); width:70px; height:70px}
HTML kodu
<p class="renk1"></p>
<p class="renk2"></p>
<p class="renk3"></p>
<p class="renk4"></p>
<p class="renk5"></p>
Örneği görmek için tıklayınız.
RGBA ve opacity arasındaki fark; opacity tanımı yapılan bir eleman ve tüm alt elemanlarına saydamlık uygulanırken, rgba ile tanımlanan ardalanlarda sadece uygulanan elemanın ardalanı saydam olur içindeki elemanlar saydam olmaz. Önceden bu gibi durumlarda 1×1 px değerinde saydam bir png hazırlayıp ardalan resmi olarak tanımlardık.
Farklı kullanım alanları ve birçok avantajı vardır bizim için bu tanımın. Örneği Facebook lightbox’ı olarak nitelendirilen bir görüntüyü elde etmek çok basit bir hal alıyor bu özelliği kullanarak.
...
border:10px solid rgba(0, 0, 0, 0.2);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
...
Örneği görmek için tıklayınız.
CSS3 bize birçok avantaj sağlamaktadır. Bir nevi bize resim düzenleme araçlarındaki esnekliği sağlamaktadır.
Örneğin text-shadow özelliğindeki renk tanımında rgba kullanılırsa çok güzel görüntüler elde ederiz. Örnek için http://nicewebtype.com/notes/2009/07/12/rgba-text-shadow-in-safari-firefox/ sitesini ziyaret ediniz.
Benzer bir şekilde box-shadow özelliğindeki renk tanımında rgba kullanılarak daha gerçekçi gölgeler elde ederiz.
Bu özelliğinde tek sorunu diğer CSS3 özelliklerindeki sorunumuz olan İnternet Explorer desteğinin olmaması sorunu var. Henüz betası çıkmış olan ie9 hariç hiç bir İnternet Explorer sürümü bu özelliği desteklememektedir, ne yazıkki ie8 dahil hiç bir ie sürümü bu özelliği desteklemiyor.
Tarayıcı Uyumu:
Internet Explorer desteklemiyor (İE9 destekliyor)
Firefox 3+
Safari 3+
Opera 10+
W3C’s CSS Level 3+
CSS Profile 3.0
İnternet Explorer için Çözüm Önerileri
Çözüm için CSS-Tricks’te bir çözüm önerisi var
p.renk1{
background: rgb(200, 54, 54); /* desteklemeyenler icin */
background: rgba(200, 54, 54, 0.5);
}
Bu çözüm önerisinde desteklemeyen tarayıcılarda katı renk hali görüntülenirken destekleyen tarayıcılar için saydam hali görüntülenecektir.
Diğer bir yöntem;
<!--[if IE]>
<style type="text/css">
.color-block {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
zoom: 1;
}
</style>
<![endif]-->
Şeklinde sadece ie için üretilen bir kod ile çözüm sağlanır destekleyen tarayıcılar için standart kod kullanılır.
Kaynaklar
- http://24ways.org/2009/working-with-rgba-colour
- http://www.w3.org/TR/css3-color/#rgba-color
- http://css-tricks.com/rgba-browser-support/
- http://www.gograybox.com/blog/qt-css3-rgba/
- http://forabeautifulweb.com/blog/about/is_css3_rgba_ready_to_rock
- http://dev.opera.com/articles/view/color-in-opera-10-hsl-rgb-and-alpha-transparency/
- http://www.css3.info/introduction-opacity-rgba/
- http://dorward.me.uk/www/css/alpha-colour/
- http://www.robertnyman.com/css3/rgba/rgba.html
- http://nicewebtype.com/notes/2009/07/12/rgba-text-shadow-in-safari-firefox/
Çift çizgili ayraç kullanımı
Temmuz 30th, 2010 • 8 yorum CSS, XHTML
Etiketler: çift çizgi, grove, menü, rgba
Genelde menülerde kullanılan bir durumdur bu. Menü öğelerini ayırmak için araya çizilen çizgilerin iki farklı renkte olması durumunda nasıl bir çözüm üretmek gerektiğine dair bir ipucu. Bazen resim olarak kullanıyorum, ama bazende soldaki öğenin sağ kenar çizgisine bir renk, sağdaki öğenin sol kenar çizgisine farklı bir renk atayarak çözüm üretmeyi deniyorum.
/* clearfix */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
ul{ margin:0 auto; padding:10px; background-color:#008bc6; width:450px;}
ul li{ list-style:none; float:left; border-right:1px solid #046e9b; border-left:1px solid #05a3e6;}
ul li a{ display:block; text-decoration:none; color:#fff; font:bold 12px Arial, Helvetica, sans-serif; margin-right:10px; padding:0 10px}
HTML
<ul class="clearfix">
<li><a href="">Bak postacı</a></li>
<li><a href="">geliyor</a></li>
<li><a href="">selam veriyor</a></li>
<li><a href="">her kes ona bakıyor</a></li>
</ul>
Örneği görmek için tıklayınız.
İlk öğenin solundaki kenar çizgisi ile son öğenin sağ kenar çizgisini kaldırmak için bu öğelere sınıf atamalıyız ve bu kenar çizgilerini sıfırlamalıyız.
ul li.ilkOge{ border-left:0;}
ul li.sonOge{ border-right:0;}
Örneği görmek için tıklayınız.
Bu uygulamayı dikey menü olarakta yapabiliriz.
ul{ margin:0 auto; padding:10px; background-color:#008bc6; width:200px;}
ul li{ list-style:none; border-top:1px solid #046e9b; border-bottom:1px solid #05a3e6;}
ul li.ilkOge{ border-top:0;}
ul li.sonOge{ border-bottom:0;}
ul li a{ display:block; text-decoration:none; color:#fff; font:bold 12px Arial, Helvetica, sans-serif; margin-right:10px; padding:10px 0}
Örneği görmek için tıklayınız.
Bu yazıyı yazmaya karar verdiğimde “css ile buton yapmak” adlı yazının hazırlıkları da devam ediyordu, oradada butonları araştırırken Firefox’un sitesinde uyguladığı bir metot bu konuyu ilgilendiren bir metot olduğunu gördüm. Onuda buraya yazayım. Ancak bu metot İnternet Explorer’da çalışmayacaktır.
HTML kodu
<a href="">+ <span>Çizgili buton</span></a>
CSS kodu
a{
background-color:#ed145b;
padding:5px 10px;
color:#fff;
text-decoration:none;
font-weight:bold;
font-size:16px;
}
a span{
border-left:2px groove rgba(144, 71, 95, 0.55);
display:inline-block;
padding-left:6px
}
Koda biraz açıklama getirelim. border’a verilen groove özelliği bizim istediğimiz etkiyi yapan bir özelliktir. Bu özellik ile eklenen çizgiler gri renklidir. Biz bu çizgiye biraz saydamlık kazandırıp zemin rengine uyum sağlamasına yarar.
Örneği görmek için tıklayınız.
