CSS3 resize özelliği

10 Ağu

Yazı Fatih HAYRİOĞLU tarafından CSS kategorisine eklendi.

resize özelliği kullanıcıya elementin boyutlarını ayarlama imkanı vermemizi sağlar. Kullanıcı bu elemanın boyutunu istediği gibi değiştirme imkanına kavuşur

Yapısı: resize: <deger>
Aldığı Değerler: both | horizontal | vertical | none | inherit
Başlangıç Değeri: none
Uygulanabilen Elementler: block-level ve replaced elementler, tablo hücreleri ve inline block elementler
Kalıtsallık: yok

both: Her iki yöne boyutlandırmaya izin verir.
horizontal: yatayda boyutlandırmaya izin verir.
vertical: dikeyde boyutlandırmaya izin verir.
none: boyutlandırma seçeneğini kaldırır
inherit: kalıtsal olarak bu değeri üst elementten alır. 

div{
overfloaw:auto; /* bu tanim gerekli */
resize:both;
}

overflow değeri scroll, auto veya hidden değerlerinde etki ederken overflow: visible tanımında ise etki yapmaz.

Bu özellik Chrome ve Safaride textarea alanları için otomatik gelmektedir. Tarayıcı bu eleman için bu değeri otomatik uygulamaktadır. Daha önce ipucu olarak yazdığım gibi bu otomatik tanımı css ile kaldırabiliyoruz.

Bir örnek yapalım

.icerik{
    box-shadow: rgb(136, 136, 136) 5px 5px 5px;
    border-radius: 5px;
    resize: both;
    overflow: auto;
    border: 1px solid #dedede;
    padding:10px;
    width: 300px;
    height: 200px;
}

Sadece bir yöne boyutlandırabiliyoruz

.siir{
    width: 170px;
    height: 200px;
    resize: vertical;
    overflow: hidden;
    position: relative;
    padding: 0 25px;
    border: 1px solid #DDD;
    font-family: georgia, serif;
}

min-height ve min-width değerleri ile boyutlandırmanın minimum değerlerini belirleyebiliyoruz. Anı şekilde max-height ve max-width değerleri ile de maksimum değerleri belirlenebilir. Bu özelliklerle kullanıcının sayfa görünümünü bozmasını engelleyebiliriz. 

.siir{
    width: 170px;
    height: 200px;
    resize: vertical;
    overflow: hidden;
    position: relative;
    padding: 0 25px;
    border: 1px solid #DDD;
    font-family: georgia, serif;
    max-height: 650px;
    min-height: 200px;
}

Resimler için güzel bir uygulama olabilir.

.vasak{
	width: 200px;
	margin: 0 10px;
	height: 150px;
	resize: both;
	overflow: hidden;
	position: relative;
	padding: 15px;
	border: 1px solid #DDD;
}

.vasak img{
	width:100%;
	height:auto;
}

Tarayıcı Desteği
Google Chrome 5+
Safari 5+
Firefox4+
Opera desteklemiyor
İnternet Explorer desteklemiyor
Mobil Tarayıcılar
Android desteklemiyor
Firefox mobile desteklemiyor
IE Phone desteklemiyor
Opera Mobile desteklemiyor
Safari Mobile desteklemiyor

resize özelliği W3C Basic User Interface Module ile önerilen bir özelliğidir. Tarayıcıların destekleme durumuna göre ileride standartlaşıp standartlaşmayacağı belirlenecek bir özellik olarak görünse de Firefox desteği standartlaşması daha olasıdır.

Kaynaklar

Yorum yok

CSS3 Kenar Resimleri (border-image)

8 Ağu

Yazı Fatih HAYRİOĞLU tarafından CSS kategorisine eklendi.

CSS3 ile birlikte gelen yeni özellikleri araştırmaya devam ediyorum. Bunlardan bir tanesi border-image özelliği. border-image, elamanın kenarlarına resim eklemek için kullanabileceğimiz bir özelliktir. Küçük resimlerle dekoratif kenar resimleri, oval şekilli kenarlar ve renk geçişleri uygulayabiliriz. CSS3’ün birçok özelliğinde olduğu gibi border-image özelliğide yeni nesil tarayıcılar tarafından desteklenmektedir, ancak her tarayıcı önek ile desteklemektedir.(ie hiç desteklemiyor)

CSS3 border-image özelliğinin en güzel taraflarından birisi resmi 9 parçaya bölüp istediğimiz gibi esnetmemize olanak sağlamasıdır. Bu sayede küçük resimler ile istediğimiz görüntüleri elde ederiz.

grafik zurb.com sitesinden alınmıştır.

border-image kod yapısı

  • border-image: <resim_kaynagi> <bolum {1,4}> / <genislik {1,4}> <dis_hat> <tekrar{1,2}>;

Firefox, Chrome, Safari ve Opera gibi yeni nesil tarayıcılar destekliyor. Diğer özelliklerde olduğu gibi önek ile destekliyorlar. İnternet Explorer 9 desteklemiyor, şu an geliştirme aşamasında olan 10 da destekleyeceğini düşünüyorum.

Yukarıda yazdığımız tanım bir kısaltmadır. Bu kısaltma

  • border-image-source:
  • border-image-slice:
  • border-image-width:
  • border-image-outset:
  • border-image-repeat;

Özelliklerini tek başına ifade eder. Ayrı yazılan bu özellikleri henüz hiç bir tarayıcı ayrı ayrı desteklememektedir. border-image’i destekleyen tüm tarayıcılar önek ile border-image kısaltmasını desteklemektedir.

border-image-source
Resmin kaynağı belirtir. Url, renk geçişi veya data URI olabilir. Background-image için tanımladığımız her değeri içerebilir.

border-image-slice
border-image-slice değeri 1’den 4’e kadar değer alabilir. Yukarıdaki çizimde gösterdiğimiz gibi border-image resmi dokuz alandan oluşur. 4 köşe, 4 kenar ve 1 adet orta kısım. Köşeler sabit boyutunu korur. Diğer bölümler ise sabit, genişleyebilir veya her ikisi tanımlarına göre çeşitli durumlar alabilir. 

.test{
border-image-slice: 5px 5px 5px 5px;
}

Yukarıdaki örnekte görüldüğü gibi köşelerden belli bir mesafe bırakılarak kalan kısımlar uzatılmıştır. Tanımlama diğer css tanımlarında olduğu gibi saat yönünde üst-sağ-alt ve sol şeklindedir. Yüzde değerleri tanımlanırken (%) işareti konulması zorunludur, ancak piksel tanımlarında px koymak zorunlu değildir. Yukarıdaki tanım aşağıdaki gibi de yapılabilir. 

.test{
border-image-slice: 5 5 5 5;
}

Tüm değerler eşit ise tek tanım ile de ifade edilebilir. 

.test{
border-image-slice: 5;
}

Başta belirttiğimiz gibi 9 bölüme ayrılan resmin kenarları ve orta kısmına border-image ile işlev atayabiliyoruz. Orta kısım kenarların içini kapsayan bölümdür. Eğer orta kısmı renk veya başka bir şey ile doldurmayı düşünüyorsanız resim düzenleme aracınız ile resmin orta kısmını saydam bırakarak istediğinizi yapabilirsiniz.

Standartlarda orta kısım tamamen doldurma seçeneği(fill) var ancak doldurma diye bir seçenek(örn no-fill) yok. Umarız ileri bunuda eklerler.

Bu kısmı daha iyi anlamak için çevrimiçi araçları biraz kurcalayın derim. http://border-image.com ve http://www.norabrowndesign.com/css-experiments/border-image-anim.html sitelerini ziyaret ediniz.

border-image-width
border-image-width özelliği elemanın kenar genişliğini belirler. border-image-width tanımlı ise CSS2’den aşina olduğumuz border-width tanımını ezer. 

.test{
border-image-width: 5px 5px 5px 5px
}

tüm değerler aynı ise tek tanım ile kısaltma yapılabilir 

.test{
border-image-width: 5px;
}

Genel tanımda ise taksim ile ayrılarak belirtilir. 

.test{
border-image: url(“images/test.gif”) 5 / 5px;
}

Bu kısaltmayı Opera henüz desteklememektedir. Bu nedenle bunun yerine border-width değerini kullanabiliriz.

.test{
border-image: url(“images/test.gif”) 5 repeat;
}
.test{
border-width:5px;
}

border-image-outset
border-image dış hat çizgisi kutunun dışına taşan kısmı belirtir. Şu an için destekleyen tarayıcılar yoktur. Başlangıç değeri 0’dır.

border-image-repeat
border-image-repeat özelliği köşeler hariç diğer alanların(kenarlar ve orta kısım) tekrarlanacağını ve/veya esnetileceğini belirler.  Bir veya iki değer alır iki tanım yapıldı ise ilk değer üst-alt ikinci değer sol-sağ içindir. Tek değer tüm alanlar içindir.

  • stretch: Resim belirlenen kenar alanını esneyerek doldurur.
  • repeat: Resim boyutunu koruyarak tekrarlı olarak karo şeklinde belirlenen kenar alanı doldurur.
  • round :  repeat değerine benzer. Resimleri tekrar ettirir ve aynı zamanda genişlik veya yüksekliğine uydurmak içinde esnetir. (element buna uyum sağlamak için tekrar boyutlandırlır) Bir nevi hem repeat hemde strecth uygular.
  • space: border-image alanı doldurmak için tekrar eder, bu tekrarlar eşit aralıkta olur, sağlanan genişlik resmin boyutunu tam katı olmadığı durumlarda aradaki beyaz boşluğu gösterir.

Webkit tabanlı tarayıcılar round değerini desteklemiyor, onun yerine repeat kullanmak daha mantıklı. space özelliğini şimdilik hiç bir tarayıcı desteklemiyor.

Bu kısmı daha iyi anlamak için çevirimiçi araçları biraz kurcalayın derim. http://border-image.com ve http://www.norabrowndesign.com/css-experiments/border-image-anim.html sitelerini ziyaret ediniz.

Bu özellikleri tek tek şu an hiç bir tarayıcı desteklememektedir, bundan dolayı şimdilik kaydı ile border-image kısaltması kullanılmalıdır. Yukarıda konu daha iyi anlaşılması için ayrı ayrı gösterilmiştir.

.test{
    width:300px;
    height:300px;
    border-width: 33px;
    -moz-border-image: url(border_image_desen.png) 33 stretch;
    -webkit-border-image: url(border_image_desen.png) 33 stretch;
    -o-border-image: url(border_image_desen.png) 33 stretch;
    border-image: url(border_image_desen.png) 33 stretch;
}


strech

.test{
    width:300px;
    height:300px;
    border-width: 33px;
    -moz-border-image: url(border_image_desen.png) 33 repeat;
    -webkit-border-image: url(border_image_desen.png) 33 repeat;
    -o-border-image: url(border_image_desen.png) 33 repeat;
    border-image: url(border_image_desen.png) 33 repeat;
}


repeat

.test{
    width:300px;
    height:300px;
    border-width: 33px;
    -moz-border-image: url(border_image_desen.png) 33 round;
    -webkit-border-image: url(/border_image_desen.png) 33 round;
    -o-border-image: url(border_image_desen.png) 33 round;
    border-image: url(border_image_desen.png) 33 round;
}


round

iPhone geri butonu standardını border-image ile çok kolay bir şekilde yapabiliriz.

Kullandığımız buton

Resim küçük ve biz köşelerini sabit bırakıp orta kısımları uzatalım.

Esneme sadece üst ve alttan olduğu için sadece sağ ve sol değerlerini tanımladık. Aynı şekilde genişlikleri(border-width) tanımladık. Ortaya esnek bir buton çıktık.

a.backButton{
	-webkit-border-image:url(backButton.png) 0 5 0 14 stretch;
	-moz-border-image:url(backButton.png) 0 5 0 14 stretch;
	-o-border-image:url(backButton.png) 0 5 0 14 stretch;
	border-image:url(backButton.png) 0 5 0 14 stretch;
	border-width:0 5px 0 14px;
}

Yukarıdaki örnekte görüldüğü gibi basit bir kod ile(siz bakmayın öneklerin kalabalığına) ensek bir buton elde etmiş oluyoruz. Kullandığımız resimde boyut olarak küçük.

Tarayıcı Destekleme Listesi
Firefox3.5+ (-moz- öneki ile ) kısmen
Chrome2.0+ (-webkit- öneki ile) kısmen
Safari3.1+ (-webkit- öneki ile) kısmen
Opera10.5(-o- ön eki ile) kısmen
İnternet Explorer 9 desteklemiyor 10 belli değil
Mobil Tarayıcılar
iOS Safari 3.2+ (-webkit ön eki ile)
Opera Mini desteklemiyor
Opera Mobile11.0+ (-o- ön eki ile)
Android Browser 2.1+ (-webkit- ön eki ile)

Sonuç

border-image özelliği gayet kullanışlı bir özellik. Birçok konuda elimiz rahatlatacak bir özellik. Uyguladıkça daha güzel örneklerin çıkacağına inanıyorum. Standartlar tam oturmasa da zamanla daha iyi olacaktır. Bu özellikte bazı şimdilik eksik kalan yerler olsa da mobil uygulamalarda uygulanabilirliği var.

Kaynaklar

2 yorum

Sayfa Zeminini Tamamen Kaplayan Resimler Tanımlamak

25 Tem

Yazı Fatih HAYRİOĞLU tarafından CSS kategorisine eklendi.

Sitem üzerinden birçok mesaj aldım bu konuda. Sonunda yazmaya karar verdim, bir önceki makalemde CSS3’ün background-size özelliğini anlattım, orada da bahsettiğim gibi background-size özelliğini kullanarak bu işi çok kolay bir şekilde yapabiliriz. Buradaki problemimiz bu özelliği desteklemeyen tarayıcılar için nasıl bir çözüm bulmalıyız.

Bu makalede farklı tarayıcılar için sayfamızın zeminini tam kaplayan ardalan resimlerini nasıl tanımlayacağımızı anlatmaya çalışacağım.

CSS3 background-size ile basit şekilde yapalım

Bir önceki makalede de anlattığım gibi background-size özelliği bu iş için biçilmiş kaftandır. Çok basit bir kod ile istediğimize ulaşırız.

html {
       background: url(images/bg.jpg) no-repeat center center fixed;
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
}

Bir örnek yapalım

html{
    background:url("zemin_resmi.jpg") 0 0 no-repeat fixed;
    background-size:cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
}

Örneği görmek için tıklayınız.

Ardalan resmini http://interfacelift.com/wallpaper/details/2421/empty_bottles.html aldım.

html elementine vermemizin nedeni body tanımlamalarında bazı tarayıcılarda sorun yaşamamızdır. Kaydırma çubuğunun hareketi ile zemin resmi kaymaması için resmi sabitledik(fixed). cover özelliği ile resmi zemine yaydık. Daha detaylı bilgi için tıklayınız.

Browser Uyumu:
Internet Explorer 9+
Firefox 3.6+(-moz-), 4+(standart)
Chrome1 (-webkit-),3+(standart)
Safari3+(-webkit-), 4.1(standart)
Opera 9.5+(-o-), 10+(standart)

İnternet Explorer 9 sürümünden önceki sürümlerinin bu özelliği desteklememesidir. İnternet Explorer için filter ile bir çözüm üretebiliriz. 

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.zemin_resmi.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='zemin_resmi.jpg', sizingMethod='scale')";

Bu kod ile ie içinde çözüm üretilmiş olacaktır. Linklerde ve içerik seçmede bazı orunlar olabiliyor.

Tüm Tarayıcılar İçin Çözüm

<div id="tamEkranArdAlan"><img src="http://www.fatihhayrioglu.com/images/emptybottles.jpg" width="100%" height="100%" /></div>
<div id="icerik">
...
</div>

Sayfamızı içerik ve ardalan resmi olarak ikiye ayırıyoruz.

html, body {height:100%; margin:0; padding:0;}

Sayfanın boşluklarını sıfırlıyoruz.

#tamEkranArdAlan {position:fixed; top:0; left:0; width:100%; height:100%;}

Zemine yerleştirilecek resmi sabitleyip üstten ve soldan başlangıç noktasına yerleştiriyoruz ve genişlik ve yükseklik değerini %100 veriyoruz.

#icerik {position:relative; z-index:1; width:650px; padding:20px; font:14px/1.8em Arial; margin:40px auto; border-radius:10px; color:#333; background-color:#fff}

İçerik alanını postion:relative; z-index:1 değeri atayarak içerikteki seçilme ve linklerde sorun olmasını engelliyoruz. Diğer tanımlar içerik alanının görselliğini ayarlamak içindir.

Bu kodlar ie6 hariç çalışırken ie6’da çalışmıyor ie6’da çalışması için 

*html {overflow-y:hidden;}
*html body {overflow-y:auto;}
*html #tamEkranArdAlan {position:absolute; z-index:-1;}
*html #icerik {position:static;padding:20px;}

ie6 postipon:fixed desteklemediği için postion:absolute değeri tanımlıyoruz. İçerik alanınıda postion:static tanımlıyoruz. Kaydırma çubuğu sorunlarını halletmek için body ve html tanımlarımızı yapıyoruz.

Sonuç olarak tüm tarayıcılarda çalışan sayfa zeminini kapsayan zemin resmi tanımlamış olduk.

Sonuç

Sonuç olarak CSS3 ile birlikte gelen background-size özelliği tam işimizi görsede İnternet Explorer’un desteklememesi projelerimizde uygulamak için bizi düşündürüyor.

Tüm tarayıcıların desteklediği ikinci yöntem sadece CSS ile çözüm ürettiği için tercih edilebilir. Ayrıca javascript ile bazı çözümler olsa da ben css ile çözümü olan bir kodu javascript ile çözme taraftarı değilim. Javascript uygulamaları için http://css-tricks.com/3458-perfect-full-page-background-image/ linkindeki örnekleri incelemenizi öneriyorum.

Baktığım sitelerdeki uygulanabilir bu iki yöntemi sizlerle paylaştım uyguladıkça ve diğer yöntemleri gördükçe buraya ekleme yapabilirim. Birazda ihtiyaca göre yöntem uygulamak gerekiyor bu işte.

Kalın sağlıcakla

Kaynaklar

4 yorum

CSS3 background-size özelliği

21 Tem

Yazı Fatih HAYRİOĞLU tarafından CSS kategorisine eklendi.

background-size özelliği background-image ile tanımlanan resmin boyutlarını tanımlamamıza yarar.

Yapısı : background-size: [<bg-size>[, <bg-size> ]
Aldığı Değerler : [ <yuzde_deger> | <uzunluk> | auto ] | contain | cover
Başlangıç değeri: auto
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

İki değer tanımlandığında ilk değer genişlik için ikinci değer yükseklik için uygulanır, tek değer atanmış ise hem genişlik hemde yükseklik için bu değer geçerlidir demektir.

Uzunluk olarak standart değerleri alabilir. Yüzde değerler tanımlandığında kapsayıcı elemana göre konumlanır, ardalan resmine göre değil. Örneğin genişlik ve yükseklik tanımı olarak 100% tanımlandığında ardalan resmi kapsayıcı elemanın zeminini dolduracak şekilde yayılır. Resmi gerçek boyutlarında kullanmak için auto değeri atanır.

Standart değerlerden başka iki farklı değer daha alır:  cover ve container değerleri. Her ikiside tarayıcı boyutuna göre orantılı olarak ardalan resmini boyutlandırır.

cover: Resmin genişlik veya yükseklik değerinden en küçük olanına göre kapsayıcı elemanın ardalanını tamamen kaplar. Ardalan resmi tüm kapsayıcı elemanın zeminini kaplayacak şekilde ayarlanır ve resmin kalan kısmı kesik görünür.

contain: Ardalan resminin genişlik veya yüksekliğinden en büyük olanına göre ardalan alanın içine uydurur. Resmi herhangi bir yerini kesmeden tamamını gösterir, ancak bazı bölgeler ardalan resmi olmadan görünür.

Yukarıdaki grafikte görüldüğü gibi gerçek resmin genişliği büyük, yüksekliği küçüktür.
contain tanımlandığında genişlik ve yükseklikten büyük olanı yani burada genişliğin uzunluğu kapsayıcı genişliğine sığıncaya kadar orantılı şekilde küçültülerek atanmış. Kapsayıcı elemanın üst ve at kısmı boş kaldı.  

cover tanımlandığında genişlik ve yükseklikten küçük olanı yani burada yüksekliğin uzunluğu kapsayıcı genişliğine sığıncaya kadar orantılı şekilde büyütülerek atanmış. Ardalan resminin sağ ve soldan taşan kısımları kesik görünecektir.

gif, jpeg ve png gibi resim formatları yeniden boyutlandırıldığında pek hoş görüntüler ortaya çıkmıyor. Vektörel resimler(svg) desteği ile daha güzel görüntüler elde edeceğiz. Negatif değerlere izin vermemektedir. background-size:0 değeri resmin görünmemesini sağlar.

CSS3 diğer özelliklerinde olduğu gibi background-size özelliğini destekleyen farklı tarayıcılar kendi öneklerini kullanmaktadır. 

.deneme {
background-image: url(bg-image.png);
-moz-background-size: 100% 100%;           /* Firefox 3.6 */
-o-background-size: 100% 100%;           /* Opera 9.5 */
-webkit-background-size: 100% 100%;           /* Safari 3.0, Chrome */
background-size: 100% 100%;           /* w3c, Firefox 4.0, ie9  */
}
Browser Uyumu:
Internet Explorer 9+
Firefox 3.6+(-moz-), 4+(standart)
Chrome1 (-webkit-),3+(standart)
Safari3+(-webkit-), 4.1(standart)
Opera 9.5+(-o-), 10+(standart)
W3C’s CSS Level 3+

Daha detaylı örnekler için http://whereswalden.com/files/mozilla/background-size/more-examples.html sitesine bakınız.

Sonuç

Birçok yerde kullanabileceğimiz bu özellik yardımı ile ardalandaki resimlerimizi daha iyi organize edebileceğiz. Sayfa zeminini tam kaplayan alanlar oluşturmak için, css sprite resimlerini daha iyi kullanabilme imkanı, esnek yapılı sayfa planlarında ardalan resimlerini yayma konularında vd. konularda bizlerin elini sağlamlaştıran güzel bir özellik.  IE9 ve sonrasında desteklediği için şimdi uygulamak zor gibi, ancak mobil araçlar için hazırlanan sayfalarda uygulanabilir.

Sayfa Zeminini Tamamen Kaplayan Resimler Tanımlamak diye bir makale yazmak şart oldu.

Kalın sağlıcakla

Kaynaklar

1 yorum

CSS Renk Geçişleri (Gradients)

16 Tem

Yazı Fatih HAYRİOĞLU tarafından CSS kategorisine eklendi.

CSS ile renk geçişi CSS3 ile birlikte gelen güzel bir özelliktir. Resim kullanmadan bir renkten diğerine geçiş yapmayı sağlayan css3 gradients özelliği bize tasarımsal anlamda çok büyük avantaj sağlar. Ayrıca resim kullanmadığımız için HTTP isteği yapmamış oluruz ve böylelikle hız kazanmış oluruz. Renk geçişi resimleri genelde jpeg olarak kaydedilir, resimde fazla renk olduğu için, bazen bu renk geçişi resimleri yüksek boyutlara erişebiliyor. CSS3’ün bu özelliği ile resim yerini kod blokları alır ve buda bize hız kazandırır.

Esneklik açısından da avantajlıdır. Renk geçişi resimleri esnek değildir, ancak CSS3 renk geçişi özelliği bize istediğimiz esnekliği sağlar. Böylece revizelerdeki birçok iş yükünden kurtarır. Genişleyebilir alanlarda renk geçişi kullanmamızı sağlar.

CSS renk geçişi özelliği resim tanımlanan her özelliğe atanabilir; background-image, list-style-image, border-image vd. Teoride böyle olmasına karşı pratikte şu an tarayıcılar sadece background-image yani background özelliğine eklemeyi desteklemektedir.

Tüm tarayıcılar için üretilen çözüm için 8 satırlık bir kod yazmamız gerekiyor. CSS3 renk geçişi özelliğini ilk webkit çıkardı, daha sonra Firefox desteklemeye başladı, ancak kodun karışıklığını Firefox azalttı. Webkit kodu daha karışık ve detaylı iken Firefox kodu daha sadeleştirdi ve w3c sonrasında diğer yeni nesil tarayıcılar aynı yolu izledi.

CSS3 renk geçişi özelliğini Firefox 3.6+, Safari4+, Chrome2+, Opera 11.10(sadece doğrusal renk geçişini) ve son olarakta İnternet Explorer 10 desteklemektedir. Her tarayıcı kendi öneki ile bu özelliği destekler. Chrome ve Safari -webkit- ön eki ile, Firefox -moz- ön eki ile, Opera -o- ön eki ile, İnternet Explorer ise -ms- ön eki ile destekler. İnternet Explorer 6-9 sürümleri arası için filter: progid:DXImageTransform.Microsoft.gradient özelliğini kullanarak çözüm üretebiliyoruz. Makale boyunca w3c kodu şablonu gösterilecek, hemen peşinden jsfiddle’deki örneklerde ise tüm tarayıcıların kodları verilecektir.

IE 6-9 arası için üretilen çözüm CSS3 ile gelen renk geçişinin yeniliklerini kapsamasa da işimizi görecek kadar bir sonuç vermektedir.

Farklı tarayıcıları için kod yazma sorununu CSS renk geçişi çevrim için araçları yardımı ile çözüyoruz. Ümit ediyorum ki editörlere benzer araçlar eklenirse bu iş sorun olmaktan çıkacak, tabi isteğimiz en kısa zamanda  w3c standartlarına tüm tarayıcıların geçmesi.

CSS3 renk geçişi iki çeşittir. Doğrusal(Linear) ve Radyal(Radial) Şimdi bu çeşitleri inceleyelim.

Doğrusal Renk Geçişleri

Doğrusal renk geçişleri soldan sağa, yukarıdan aşağı veya istediğimiz doğrusal yönler arası geçiş yapmamızı sağlar. Phoshop ve Fireworks gibi editörleri kullananların alışık olduğu bir kullanımı vardır.

CSS3 renk geçişinin dezavantajlarından birisi farklı tarayıcılar için farklı kod yazma gereksinimidir. 

background-image: linear-gradient(<point> || <angle>,]? <stop>, <stop> [, <stop>]* )</stop></stop></stop></angle></point>

Kod yukarıdaki gibi standartlaşsa da farklı tarayıcılar için farklı kod yazmamız gerekir. Doğrusal renk geçişi kodunun en basit hali.

background: linear-gradient(#fff,#f8b500);

Renk geçişi en basit hali ile iki renk arasındaki geçiştir. Yukarıdaki kod ile en basit renk geçişi sağlanmış olur.

Browser Uyumu:
Internet Explorer 6+(filter ile),10+ (-ms ön eki ile)
Firefox 3.6+(-moz ön eki ile)
Chrome(-webkit ön eki ile*)
Opera 11.10+(-o ön eki ile)
Safari4+ (-webkit ön eki ile)

Renk Geçişine Yön Verelim

Yukarıdaki basit kodlamada renkleri yazdık ama açısını, yönünü belirlemedik. Yukarıdan aşağı, sağdan sola vd. gibi yönleri açı ile belirleyebiliriz. Yukarıdaki örnek için kodumuz şu şekilde değişecek 

background-image: linear-gradient(top,#fff,#f8b500);

İlk rengin nereden başlayacağını belirledik ve virgül ile diğer tanımlardan ayırdık. Bu tanım ile yukarıdan beyaz renk(#fff) ile başlayacağız ve en altta turuncu(#f8b500) ile bitiriyoruz. Benzer şekilde yönlerin İngilizce karşılıkları ile diğer yönleri tanımlayabiliriz. Diğer tanımlar top, bottom, left, right. Benzer tanımları açı ile de yapabiliriz. 0deg(sol); 90deg(alt); 180deg(sağ); 270deg(üst) ve 360deg(sol) iki sol değeri var.

Yukarıdaki tanımı birde dereceli yapalım.

background-image: linear-gradient(270deg,#fff,#f8b500);

Tabi açı olarak istediğimiz değeri vererek farklı renk geçişlerini de elde edebiliriz.

Browser Uyumu:
Internet Explorer10+ (-ms ön eki ile)
Firefox 3.6+(-moz ön eki ile)
Chrome(-webkit ön eki ile*)
Opera 11.10+(-o ön eki ile)
Safari4+ (-webkit ön eki ile)

Renk Durma Noktaları Oluşturmak

Her ne kadar basit bir tanım ile iki renk arasında geçiş olarak tanımlasakta, aslında renk geçişi kullanımında daha farklı yöntemlerde vardır. Araya özel bir renk atamak için kullanırız bu yöntemi ve çok güzel renk geçişleri oluşturmamıza yardımcı olur.

Durma noktalarınıda eklersek yukarıdaki kodumuz aşağıdaki gibi olacaktır.

background-image: linear-gradient(top,#fff 0%,#f8b500 100%);

Renk sıfır noktasından(0%) başlıyor ve son noktada(100%) geçiş bitiyor.

Benzer şekilde araya renk ekleyebilir ve orta noktalardan başlayıp bitirebiliriz. 

background: linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%);

Görüldüğü gibi uygulanan renk geçişine ortada başka renkler eklenerek farklı bir ardalana rengi elde edilmiştir. Yüzde değer kullanmak zorunda değiliz, piksel ve css’in diğer değerlerinide kullanılabiliriz.

Browser Uyumu:
Internet Explorer10+ (-ms ön eki ile)
Firefox 3.6+(-moz ön eki ile)
Chrome(-webkit ön eki ile*)
Opera 11.10+(-o ön eki ile)
Safari4+ (-webkit ön eki ile)

Renk Geçişinde Saydamlık Kullanımı

CSS3 ile birlikte renk tanımlarına alfa kanallarıda eklenmiştir bu sayede renk tanımladığımız her yerde saydamlık özelliğinide kullanabilmemize olanak sağlıyor. Tabi bizde burada renkler ile çalıştığımız için alfa kanalı yardımı ile renk geçişlerinde saydamlıktan da yararlanabiliriz.

Daha önce anlattığımız gibi rgba tanımlarında alfa kanalı 0 ile 1 arasında değer alır, 0 etkisiz kılarken 1 değeri bize katı bir renk verir.

background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);

Renk Geçişi Tekrarı

Tanımladığımız renk geçişinin belli aralıklarla tekrarını sağlar. Bunun için ayrı bir kod yazarız, ancak mantık doğrusal renk geçişi ile aynıdır.

background-image: repeating-linear-gradient(0deg,#f8b500,#FEF4B6 20px, #f8b500 40px);

repeating-linear-gradient özelliği linear-gradient ile benzer kullanıma sahiptir. Başta 0deg ile renk geçişinin yönünü belirliyoruz, sonra tekrar edecek renkleri virgül ile ayırarak yazıyoruz, burada piksel değeri verildiği gibi css’in diğer değer seçenekleride kullanılabileceğini unutmayalım.

Browser Uyumu:
Internet Explorer10+ (-ms ön eki ile)
Firefox 3.6+(-moz ön eki ile)
Chrome(-webkit ön eki ile*)
Opera 11.10+(-o ön eki ile)
Safari4+ (-webkit ön eki ile)

Çoklu Doğrusal Renk Geçişi Kullanımı

Renk geçişi background-images özelliğine atanıyor, background-images özelliği CSS3 ile birlikte çoklu kullanıma izin vermektedir. Aynı şekilde bir elamana birden fazla renk geçişi eklememizede izin veriyor.

background-image: linear-gradient(left top, #FF9900, #FF0000, transparent), -moz-linear-gradient(right top, #FF9900, #FF0000, transparent);

Yapmamız gerek sadece iki tanım arasını virgül ile ayırmak. Üst üste binmelerde saydam özelliğini kullanarak farklı resimler elde edilebilir.

Tüm bu özellikleri birleştirerek çok güzel ardalanlar elde edebiliriz.

http://leaverou.me/demos/css3-patterns.html ve http://leaverou.me/css3patterns/ sitesindeki örnekler bu özelliğin gelecek açısından ne kadar ümitli olacağımızı gösteriyor. Bu sitede artı olarak background-size özelliği kullanılmıştır. http://leaverou.me sitesi css renk geçişi konusunda geniş bilgi ve örneğe sahip incelemekte yarar var. Komşu kızının sitesini takibe almakta yarar var.

Browser Uyumu:
Internet Explorer10+ (-ms ön eki ile)
Firefox 3.6+(-moz ön eki ile)
Chrome(-webkit ön eki ile*)
Opera 11.10+(-o ön eki ile)
Safari4+ (-webkit ön eki ile)

Radyal Renk Geçişleri

Diğer bir renk geçiş türüde radyal renk geçişleridir. Radyal renk geçişi, merkezi bir noktadan tüm yönlere renk geçişi olarak tanımlanabilir. Yukarıdaki kullanıma yakın bir kullanımı vardır. Radyal renk geçişi bize özel şekil(daire ve elips) oluşturma imkanı verir. İnternet Explorer 10’nuncu sürümü hariç desteklemediği için uygulanabilirliği azalıyor. Uygulamak için beklememiz gerekiyor 

radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

position(konum): background-position ile aynı şekilde yorumlanır. Başlangıç değeri center dir.

angel(açı): Başlangıç noktası ile renk geçişi hattının açısını gösterir. Başlangıç değeri 0deg dir

shape(şekil): İki değer alır. circle ve ellipse. circle(dair) yarıçapı belli olan bir daire şeklinde renk geçişi uygulanır. ellipse(elips) bir elips şeklinde renk geçişi uygulanır. Başlangıç değeri ellipse’dir.

size(boyut): Renk geçişinin boyutunu belirler. Belli değerler alır. Aşağıda açıklanacaktır.

stop(durak): Renk geçişlerinde araya farklı renk atamak için belli durak noktaları oluşturmak için kullanılır. 0% ile 100% arasındaki değerleri alabilir.  

Radyal renk geçişinin doğrusal renk geçişinden farklı olarak size(boyut) tanımları vardır. Boyut değerlerini tek tek inceleyelim.

Boyut Değerleri

closest-side: Dairelerde, merkezden kutunun kenarına kadar anlamındadır. Elipslerde ise merkezden yatay ve dikey kenarlarının yakınına kadar anlamındadır.

closest-corner: Renk geçişi yapılan elemanın merkezinden tam köşelere kadar uygulanmasıdır.

farthest-side: closest-side ile benzer anlamdadır, yakın kenara değil uzak kenara kadar uygulanır. Elips şekillerde dikey ve yatay uzak kenarlara kadar uygulanır.

farthest-corner: Renk geçişi yapılan elemanın merkezinden uzak köşeye kadar uygulanır.

contain: closest-side ile eş anlamlı.

cover: farthest-corner ile eş anlamlı

Bu terimleri uygulayarak daha iyi öğreneceğimizi düşünüyorum.

En basit radyal renk geçişi 

radial-gradient(circle farthest-side, #ff9900, #ff0000)

Browser Uyumu:
Internet Explorer10+ (tam -ms ön eki ile)
Firefox 3.6+(-moz ön eki ile)
Chrome10+(-webkit ön eki ile*)
Opera desteklemiyor
Safari4+ (-webkit ön eki ile)

Radyal Renk Geçişlerinde Durma Noktaları Oluşturmak

Doğrusal renk geçişinde olduğu gibi radyal renk geçişinde de birden fazla renk eklemek için durma noktaları oluşturabiliyoruz.

radial-gradient(circle farthest-side, #FF9900, #FF0000, #FF9900);

Browser Uyumu:
Internet Explorer10+ (tam -ms ön eki ile)
Firefox 3.6+(-moz ön eki ile)
Chrome10+(-webkit ön eki ile*)
Opera desteklemiyor
Safari4+ (-webkit ön eki ile)

Radyal Renk Geçişi Tekrarı

Doğrusal renk geçişinde olduğu gibi tanımladığımız renk geçişlerini ufak bir özellik ismi değişimi ile tekrarını sağlayabiliyoruz. 

repeating-radial-gradient(#FF9900, #FF9900 5px, #FF0000 5px, #FF0000 10px);

Firefox3.6 ile birlikte gelen bu özelliği webkit desteklemeye başladı Chrome 10’dan itibaren destekliyor, Safari’nin bir sonraki sürümünde muhtemelen gelecektir.

Browser Uyumu:
Internet Explorer10+ (tam -ms ön eki ile)
Firefox 3.6+(-moz ön eki ile)
Chrome10+(-webkit ön eki ile*)
Opera desteklemiyor
Safari4+ (-webkit ön eki ile)

Çoklu Radyal Renk Geçişi Kullanımı

Doğrusal renk geçişinde olduğu gibi kullanımı vardır. İki tanım arasına virgül konularak uygulanır. 

  background-image: radial-gradient(20% 50%, circle contain, #FF0000, #FF9900 95%, transparent),
  radial-gradient(50% 50%, circle contain, #FF0000, #FF9900 95%, transparent),
  radial-gradient(80% 50%,circle contain, #FF0000, #FF9900 95%,transparent);

Browser Uyumu:
Internet Explorer10+ (tam -ms ön eki ile)
Firefox 3.6+(-moz ön eki ile)
Chrome10+(-webkit ön eki ile*)
Opera desteklemiyor
Safari4+ (-webkit ön eki ile)

Sonuç

Webkit ilk olarak bulduğu renk geçişi özelliğinde Firefox’un daha basite indirgediği kod w3c tarafından da kabul gördü ve webkit’de yeni nesil kodlarını Firefox’un tanımlarına göre yapıyor. Fazla kod kalabalığı gözümüzü korksa da ileride ortak bir standart bulunacağı görülüyor.

Kod kalabalığını çevrimiçi araçlar yardımı ile aşabiliyoruz.

Bu araçları kullanarak renk geçişlerimizi kolayca oluşturabiliyoruz. Umarım ileride bu ve daha iyi araçlar editörlere gelir.

Hala gelişimini tamamlamış olan renk geçişi özelliği ileride bize daha avantajlı yenilikler sunabilir. Konik Renk Geçişi özelliği eklenebileceği konusunda yazılar var.

Uzun bir yazı oldu ama konuyu bölmek istemedim. Eksik ve aksaklıklarım oldu ise af ola.

Kalın sağlıcakla

Kaynaklar

* webkit için iki farklı tanım vardır eski tanımda iki tür için tek özellik adı var iken yeni nesil tanımlarda w3c ile aynı tanııma geçilmiştir.

7 yorum

Chrome Geliştirici Aracı(Developer Tool) Hesaplanmış Stiller Özelliği

15 Tem

Yazı Fatih HAYRİOĞLU tarafından CSS kategorisine eklendi.

Firefox kullanmamdaki en büyük sebeplerden birisi tabiki Firebug, Firebug dışında diğer geliştirici araçlarınıda arasıra kullansam da pek Firebug kolaylığı sağlamadığı için tercih etmiyorum. Bugün(yarım saat önce) Chrome geliştirici aracı ile çalışırken Firebug’da olmasını istediğim bir özelliği gördüm ve ilk defa Firebug’a bir konuda eksi puan verdim. Hesaplanmış stiller olarak Türkçe’ye çevirebileceğimiz Computed Styled özelliği, bu özellik şu işimize yarıyor; Bir elemana uygulanmış veya kalıtsal olarak(inherit) gelen atamaları tarayıcının hesabından(yorumlamasından) sonra uygulanan değerlerin listesini bize sunuyor. Böylece biz elemanın o an hangi değeri aldığını görebiliyoruz. Benim Firebug’da eksik gördüğüm kısım bu hesaplanan sonuç değerinin nerede atandığını göstermemesi idi. Chrome işte bu noktada tam benim düşündüğüm şeyi yapmış.


Firebug


Chrome Geliştirici Aracı(Developer Tool)

Chrome Geliştirici Aracı ekran görüntüsünde görüldüğü gibi tarayıcının son gösterdiği değerin hangi css dosyasında olduğunu ve satır numarasını bize veriyor. Tamda benim istediğim şey.

Ayrıca kalıtsal tanımları göster-gizle yapmak için sağ üstteki “Show inherited” işaret kutucuğuda güzel bir özellik olmuş.

Rekabet her zaman güzeldir umarım yakında Firebug’a da eklenir.

7 yorum

Sayfa 4 - 101« İlk...23456...102030...Son »

Son yazılar

Kategoriler


Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.