Fatih Hayrioğlu'nun not defteri

CSS3 Geçiş Efektleri(Transitions)

Fatih Hayrioglu — Tue, 15 Jan 2013 01:37:00 PST

Genel Tanım

CSS anlık geçişleri bünyesinde barındırıyordu. Birçok uygulamamızda bir bağlantının üzerine geldiğinde bağlantının rengi değiştiriyor, düğmemizin ardalan rengini değiştiriyorduk.

CSS3 ile birlikte ani geçişlere artı olarak yeni merhale merhale geçişler eklenmiştir. Geçişler yavaş yavaş olduğu gibi uzun uzadıya geçişlerde mevcuttur. Durumu daha iyi anlayabilmek için yukarıda bahsettiğimiz gibi bir fare imlecinin bağlantı üzerine geldiğinde renk değişmesini anlık değil merhale merhale değiştirelim.

Renk geçişi belli bir zaman aralığına yayılacaktır ve iki renk arasındaki geçişte ara renkler görünecektir. Bu geçişe bazı efektlerde ekleyebiliyoruz. Geçişin merhale merhale olması göze daha hoş gelecektir.

Bu işleri daha önce flash veya javascript yapıyorken artık CSS3 yardımı ile yapabilecek olmamız çok güzel bir gelişme. Basit tek satır kod(farklı tarayıcılar için yazılan önekler zamanla teke inecektir.) ile bu işi yapmak ayrı bir kolaylık tabi.

transition: property duration timing-function delay;

Transtion Özellikleri

Geçiş efektlerini uygulamak için aşağıdaki özelliklerden yararlanacağız.

transition-property
transition-duration
transition-delay
transition-timing-function
transition

Şimdi bu özellikleri tek tek inceleyelim.

Geçiş Efekti Hangi Özellik İle Yapılacağını Belirleme(transition-property)

Uygulanan geçiş efektinin elemanın hangi özelliği üzerinden yapılacağını belirlemek için transition-property özelliğini kullanırız.

Yapısı: transition-property: none | all | [ \<IDENT> ] [ ',’ \<IDENT>]*
Aldığı Değerler: none | all | [ \<IDENT> ] [ ',’ \<IDENT> ]*
Başlangıç değeri: all
Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine
Kalıtsallık: Yok

Örneğin color değeri geçiş uygulanacak elemanın başlangıç ve son rengi arasında bir geçiş olacağını gösterir.

all değeri tüm tanımlarda geçiş yapılacağı anlamındadır.

a{
    color:red;
    transition-property: color;
}

a:hover {
    color:blue;
}

Geçiş Efekti Uzunluğunu Belirleme (transition-duration)

Geçiş efektlerini uygularken verdiğimiz efektin ne kadar süre ile devam edeceğini ayarlayabiliyoruz. Bu ayarlamayı transition-duration özelliği yapıyoruz.

Yapısı : transition-duration: \<zaman> [, \<zaman>]*
Aldığı Değerler : \<zaman> [, \<zaman>]*
Başlangıç değeri: 0
Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine
Kalıtsallık: Yok

0 değeri geçişin hemen olacağı anlamına gelir. Eksi değerler 0 olarak yorumlanır.

a{
    color:red;
    transition-property: color;
    transition-duration:0.5s;
}
a:hover {
    color:blue;
}

transition-delay

Uygulanan geçiş efektinin ne kadar zaman sonra başlayacağını belirler. Belirlenen zamana kadar animasyonu durdurur ve sonra animasyon başlar.

a{
    color:red;
    transition-property: color;
    transition-duration:0.5s;
    transition-delay: 0.5s;
}
a:hover {
    color:blue;
}

Animasyonumuz 0.5 saniye sonra başlayacaktır.

transition-timing-function

Oluşturacağımız geçişlere daha estetik geçişler sağlamak için kullanılan fonksiyonlardır. CSS3 ile birlikte gelen transition efekti başlangıç tanımı doğrusal bir geçiştir. Biz bu özelliğe ease, ease-in, ease-out, ease-in-out ve cubic-bezier değerlerini tanımlayabiliyoruz. cubic-bezier tanımı ise geçişleri kendimize göre tanımlama imkanı veriyor. Kendi zaman çizgimizi hazırlamak(cubic-bezier) biraz zor olsa da internet üzerindeki bazı araçlar yardımı ile bu işte kolaylaştırılmıştır.

Daha önce sizlerle paylaştığım bu araçlar

ile transition-timing-function özelliğini kullanmak bir zevk haline geliyor.

transition kısayolu

Yukarıda tek tek ayrı ayrı her özelliği tanımlayabildiğimiz gibi teek bir tannımlama ile bunları kısa bir şekilde tanımlamak da mümkün.

transition-property: width;
transition-duration:0.5s;
transition-delay: 0.5s;
transition-timing-function:ease-in-out;

Yukarıdaki son örnekte geçiş tanımlarımız 4 adet idi. Biz burada bunları tek bir tanımda toplayalım.

transition: width 0.5s ease-in-out 0.5s;

Görüldüğü gibi kodumuz daha kısa bir hal aldı. bundan sonra bu şekilde kullanmayı tercih edeceğim.

Çoklu Geçiş Kullanımı

Yukarıda yaptığımız gibi tek bir özellik üzerinden geçiş efekti uygulayabildiğimiz gibi virgül ile ayırmak kaydı ile birden fazla geçiş efekti de uygulayabiliriz.

input{
   display:block;
   background-color:#788182;
   border:0;
   border-radius:5px;
   width:100px;
   padding:5px 10px;
   color:#fff;
   transition: width .5s ease-in-out, background .3s ease;
}

input:focus {
   width:250px;
   background-color:#50ebd6
}

Son örneğimizde arama alanına odaklandığımızda genişliğini ve ardalan rengini geçiş efekti ile değiştirdi.

Geçiş Efektini Tetiklemek

Geçiş efektlerini tetiklemek için genelde :hover sözde sınıfı kullanılsa da :active, :target, :focus gibi sözde sınıfları da kullanılabilir.

Ayrıca javascript ile DOM’a yapılan müdahaleler de buna eklenebilir.

a{
 display:block;
 background-color:#c4342f;
 padding:5px 10px;
 width:100px;
 color:#fff;
 transition: background-color 2s ease-in-out 1s;
}
a.tetikle {
 background-color:blue;
}

Javascript ilede bu bağlantıya tetikle diye bir sınıf tanımlayalım.

document.querySelector('a').className = 'tetikle';

Javascript ile Geçişin Bittiğinin Kontrolü

Javascript ile geçiş efektinin bittiğini kontrol etmek çok basit.

myElement.addEventListener("transitionend", function() {
// geçiş efekti bttikten sonra bunu yap
}, true);

Geçiş efekti tamamlandığında transitionend foksiyonunu tetkilyecektir.

Tarayıcı Uyumu

CSS3 ile gelen bir çok özellik gibi geçiş efekti özelliklerinin de önek ve internet explorer sorunları mevcuttur.

Tarayıcı Destekleme Listesi
Firefox 4+ (-moz- öneki ile), 16+ öneksiz
Chrome 1+ (-webkit- öneki ile)
Safari 3.2+ (-webkit- öneki ile)
Opera 10.5 (-o- öneki ile), 12.10 öneksiz
İnternet Explorer 10+
Mobil Tarayıcılar
iOS Safari 3.2+ (-webkit- öneki ile)
Opera Mobile 10+ (-o- öneki ile), 12.10 öneksiz
Android Browser 2.1+ (-webkit- öneki ile)

İnternet Explorer 10 ile gelen geçiş efekti desteğini öneksiz eklemiştir. Şu an aktif olarak kullanılan ie8 ve ie9 sürümlerinde bu özelliğin olmaması mevcut sitelerimizde bu özellikleri kullanmamız önündeki en büyük engeldir.

Kaynaklar

Git Öğreniyorum - 3

Fatih Hayrioglu — Fri, 28 Dec 2012 04:28:00 PST

Git grep

Git’in önemli komutu grep hakkında bir kaç bilgi vereceğim.

Ben grep’i git’in arama komutu olarak biliyordum, ancak unix sistemlerde filtreleme komutu imiş. Geniş kullanım alanı varmış yani.

Genel söz dizimi

$ git grep [özellikler] arama_kelimesi [dosyalar]

Örneğin

$ git grep 'kapsayamama' /home/fatih/ana.css

Yukarıdaki örnek basit bir kullanıma örnek olarak veridi. /home/fatih/ana.css klasörü içinde kapsayamama kelimesini arayacaktır.

Grep’in bazı özellikleri vardır. Bu kısayolları kullanarak aramalarımıza bazı özellikler ekleriz.

$ git grep -v 'kapsayamama' /home/fatih/ana.css

İçinde kapsayamama geçmeyen satırları bize verecektir. -v (invert-match)

$ git grep -c 'kapsayamama' /home/fatih/ana.css

Aradığımız dosya içinde kapsayamama kelimesinin kaç kere geçtiğini bize gösterir. -c (count)

$ git grep -i 'kapsayamama' /home/fatih/ana.css

Aramanın büyük-küçük harfe duyarsızlaştırır. Yani arama sonuçlarında Kapsayamama çıkar. -i (ignore-case)

$ git grep -r 'kapsayamama' /home/fatih/

Aramanın belirlene dizin ve alt dizinlerde yapılmasını belirler. -r (recursive)

$ git grep -n 'kapsayamama' /home/fatih/

grep ile listelenen sonuçların hangi satırda olduğunu gösterir. -n (line-number)

$ git grep '\&lt;script' /home/fatih/

‘\’(ters bölü işareti) karakteri kendisinden sonra gelen karakterin özel bir karakter olduğunu gösterir ve aramaya dahil edilmesini sağlar.

$ git grep 'kapsayamama' /home/fatih/

Birden fazla arama bloğunu bir arada kullanmak için | boru(pipe) işaretini kullanırız.

$ git grep '^script' /home/fatih/

grep aramalarımızda Düzenli İfadeleri(regex) kullanabiliriz. Yukarıdaki örnekte script ile başlayan sonuçları getir demektir.

$ git grep 'script$' /home/fatih/

Yukarıdaki script ile biten satırları listeler. Düzenli ifadeler ile yapabileceklerimizi düşündüğümüzde aramalarımızı ne kadar özelleştirebileceğimizi anlarız.

$ git grep <script> /home/fatih | more

grep ile arama yaptığımızda pencere genişliği kadar çıktıları bize gösterir. Tüm satırın gösterilmesi için | more kullanırız.

Git kodlarını renklendirmek için

git komutları ve işlemlerini renklendirmek mümkündür. Daha okunaklı ekranlar için Git’in status, branch ve diff komutlarını renklendirelim. Renklendirme için konfigürasyon dosyasına ~/.gitconfig aşağıdaki kodları eklemeniz yeterli.

[color]
  branch = auto
  diff = auto
  status = auto

[color &quot;branch&quot;]
  current = yellow reverse
  local = yellow
  remote = green

[color &quot;diff&quot;]
  meta = yellow bold
  frag = magenta bold
  old = red bold
  new = green bold

[color &quot;status&quot;]
  added = yellow
  changed = green
  untracked = cyan

Git dallanmalarını düzenleme

Git'te master'a gitmiş bütün eski dallanmalarımızı(branch) -lokalden- silmek için şöyle bir komut kullanabiliriz:

git branch --merged master | grep -v 'master$' | xargs git branch -d

Kaynak: http://devblog.springest.com/a-script-to-remove-old-git-branches

Murat Çorlu

Git te dosya adı arama

git'te dosya adıyla arama:

git ls-files '*kelime*'

Git ile Suçluyu Bulmak

git blame

Bir örnek yapalım:

git blame source/css-ile-tablolari-sekillendirmek.md

kodu aşağıdaki sonucu döndürüyor. Her satırı tek tek en son kimin, ne zaman değiştirdiğini gösteriyor.

Git ile Sadece Belirlenen Dosyaları Gönderme

git add

ile eklenecek dosya veya dosyalar eklenir ve sonra

git commit -m "aciklama_yaz"

ile gönderim yapılır. Bir örnek yapalım. Örneği 3 dosyada değişiklik yaptık.

Ancak biz bu değişikliklerden sadece bir tanesini(source/xhtml-ipuclari-1.md) göndermek istiyoruz

Dosyayı gönderirken

git commit -m "xhtml makalesindeki duzeltme yapildi"

kullanımı önemli.

Sonuçta sadece source/xhtml-ipuclari-1.md dosyası gönderilirken diğer iki dosya gönderilmedi.

Otomatik Tamamlama

Git ile terminalde kod yazarken en güzel özelliklerden birisi <tab> tuşu ile otomatik tamamlama yapabilme özelliği. Benim bilgisayarımda hazır geliyor eğer sizde yüklü değilse kaynak bağlantıda yükleme ayrıntıları mevcut.

$ git co<tab><tab>
commit config

Yukarıda görüldüğü gibi git co yazdık ve yazacağımız komutu unuttuk veya tamamını yazmak istemedik, ilk <tab> tuşuna bastığımızda eğer başka eşleşen kelime yoksa bize direk sonucu getirir, <tab> tuşuna iki kere basınca bu sefer eşleşen tüm kelimeler altta listelenir. Sonraki <tab> tuşuna basışlarımızda ise altta listelenen kelimeler arasında gezeceğiz.

Yukarıdaki örnekte eğer com<tab> yapsa idik commit tamamlamasını otomatik yapacaktı.

http://git-scm.com/book/en/Git-Basics-Tips-and-Tricks

Diğer İpuçları

http://stackoverflow.com/questions/347901/what-are-your-favorite-git-features-or-tricks?page=2&tab=active#tab-top

Kaynaklar

CSS ile HTML5 Yer Tutucu’ya(placeholder) Stil Vermek

Fatih Hayrioglu — Fri, 21 Dec 2012 01:37:00 PST

HTML5 ile birlikte gelen form elemanlarına yer tutucu(placeholder) ekleme özelliğine CSS3 ile stil verebiliyoruz.

Yer Tutucu(Placeholder); Formların input veya textarea alanlarında tanımlayıcı bilgileri gösterdiğimiz yapılardır. Firefox’da sağ üstte arama motoru alanında hangi arama motorunda arama yaptığımızda bilgi veren bir yazı bir yer tutucudur. Kullanıcı bu alana odaklandığında veya bir şeyler yazdığında bu yazı kaybolur ve kullanıcının yazdığı metin görünür.

Yer tutucular ilk başta kullanıcının odaklanması ile kaybolurken, Chrome’un öncülüğünde kullanıcı bir şeyler yazdıktan sonra kaybolmaktadır.

Yer tutucunun en büyük sorunu İnternet Explorer 10’da desteklenmesi. ie 8-9 desteklemiyor.

Daha önce ve şimdilerde desteklemeyen tarayıcılar için bu işlemi javascript ile yaparken HTML5 ile birlikte artık placeholder HTML5 özelliği ile direk HTML ile kullanabiliyoruz.

<input type="text" name="arama" placeholder="Arama Metnini Giriniz" />

Kodu ile bu yapıyı uygulayabiliyoruz. Yer tutucuların stillerine müdahale edebiliyoruz.

::-webkit-input-placeholder {}
:-moz-placeholder {}
:-ms-input-placeholder {}

Burada dikkat etmemiz gereken kısım -webkit tanımının başında iki adet iki nokta üst üste olması.

Yer tutucu stiline tanımlana bilen özellikler ve tarayıcıların desteğini gösteren aşağıdaki tablo önemli

kaynak:http://blog.ajcw.com/

Kaynaklar

Chrome'un -99999999px sorunu

Fatih Hayrioglu — Tue, 13 Nov 2012 23:32:00 PST

Diğer tarayıcılar rastlamadığım için bir sorun olarak yazıyorum. sizlerde eğer böyle bir tanım yaptı iseniz veya kullandığınız kod bloklarında kullanılmış ise benzer sorunu sizde yaşıyor olabilirsiniz.

Bazı elemanları gizle göster yapmak için görünür alanın dışına çıkarırız. Bunun için genelde left tanımına görünür alanın içine girmeyecek büyüklükte bir değer girerek yaparız. Amaç daha hızlı olarak elemanları gizle-göster yapmak. Örneğin

left:-9999px

gibi. Bazen yüksek çözünürlükteki ekranlar düşünülerek bu değer uçuk bir rakam verilir.

left:-99999999px

gibi. Bu durumda Chrome 7. karakterden sonraki tanımları görmüyor ve bu atama yapılmamış gibi davranıyor.

Sitenin Alt Yapısını Değiştirdik

Fatih Hayrioglu — Mon, 15 Oct 2012 01:54:00 PDT

Uzun süredir wordpress alt yapısı ile devam ettiğim sitemi hosting sorunları nedeni ile değiştirmek zorunda kaldım. Şu an yeni sistem üzerinden sizlere ulaşıyorum. Biliyorum bir çok eksiğim var, zamanla düzeltmeyi öngörüyorum.

Wordpress’in sistemi kullanıcı sayısı belli bir sayının üzerine çıkınca sistemi zorluyor. İlk sorunu seneler önce tekil kullanıcı sayısının 100’ü geçmesi ile yaşadım. Hosting şirketimi değiştirdim. İkinci sorunumu 2-3 sene önce tekil kullanıcı sayısı 700-800 civarında iken yaşadım, cache eklentisi kurarak onu aştım. Üçüncü ve son sorunumu geçen hafta yaşadım tekil kullanıcı sayım 1300-1500 aralığında idi ve hosting şirketi cpu’ya çok yüklendiğim için sitemi kapatmıştı. Zor anlardı benim için belli bir uğraş sonunda sorunu düzeltemedim ve wordpress ile olan birlikteliğime son verme kararı aldık. Hakkını vermeliyim Wordpress’in bana çok büyük katkıları oldu. Ben wordpress alt yapısını çok bilmediğimden de bu sorun olabilir. Murat Çorlu’nun önerisi ve yardımı ile siteyi statik html’e çevirmeye karar verdik. Sonuçta bilgi paylaşmaktı amaç. Sitemi statik html çevirmek ve github’dan host etmeye karar verdik. Pelican ve github alt yapısını kullandık. Yorumlar zaten http://disqus.com/ dan alıyordum. Statik sitenin dinamik olan bir kaç parçası hariç her şeyinin böylelikle daha basit ve sorunsuz olarak yayınlayabilirdik. Kurulum ve desteği için Murat Çorlu’ya ne kadar teşekkür etsem azdır.

Her yenilik beraberinde bazı sorunları getiriyor. Aşağıdaki listeyi çıkardım, yavaş yavaş bunları düzelteceğim. Sizlerinde gördüğü eksikler olursa bana iletirseniz çok sevinirim.

Sitenin Eksikleri

RSS Düzelt
Fontu Değiştir.
İçeriği düzenle
1. Türkçe karakter sorunu var highlight içeriğinde
2. Highlight ikinci satırlar patlak
3. Dipteki linkler sorunlu
4. İçerikteki üstte sağda bilgi alanına genişlik ver .post-info width:200px
5. Kod kısmını düzenle
6. Sayfalardan info kısmını kaldır
7. Kitap sayfasını düzelt
8. Temayı Türkçeleştir
9. Arama ekle
10. Tarayıcı Uyumu kısmı sorunlu
11. Yapısı Bölümü sorunlu
12. Siteden gelen resimler sorunlu
13. Sitedeki örnek htmller sorunlu (http://fatihhayrioglu.com/static/dokumanlar/ardalan_ekle4.html)
Highlight tasarımını değiştir
Site tasarımına el at.
Açılmayan Sayfalar
1. http://fatihhayrioglu.com/kutu-modeli-margin-ozellikleri/

CSS3 Dönüştürme(Transforms) ve 3B Dönüştürme

Fatih Hayrioglu — Tue, 11 Sep 2012 03:50:00 PDT

CSS3 Dönüştürme özelliği 2 ve 3 boyutlu dönüştürme özelliği olmak üzere ikiye ayrılıyor. Daha önce 2 Boyutlu Dönüştürme özelliklerini incelemiştik. Bu makalede 3 Boyutlu Dönüştürme işlemlerini inceleyeceğiz. Bu konular daha çok örnek yapıp pekiştirilecek konular, ancak ilk başta teorisini öğrenmek gerektiğini düşünüyorum.

2 boyutlu dönüştürme özelliklerine göre daha az tarayıcı desteğine sahip olan bu özellikler, zamanla daha çok yer kazanacaktır.

3 Boyutlu dönüşüm özelliklerinin tanımına girmeden biraz web’de 3. boyutu biraz irdelemekte yarar var. Web mecrasın hep 2 boyutlu düzlem üzerinde çalıştı. Tüm özellikler iki boyutlu düzlem için geliştirildi genişlik, yükseklik tanımları örnek olarak verilebilir. Bir başka örnek konumlandırma özelliklerinden verilebilir. Konumlandırma tanımları sol(left), sağ(right), üst(top) ve alt(bottom) olarak kullanılmaktadır.

z-index tanımında anlattığımız gibi 3. boyut kavramında girdiğimizde z-ekseni tanımını göz önünde bulundurmamız gerekiyor.

Şeklinde çizdiğimiz z-ekseni bize 3. boyutu göstermektedir.

3 Boyutlu Dönüşüm özelliklerini inceleyelim.

Dönüşüm Stili(transform-style) Özelliği

3 Boyutlu dönüşüm özelliklerinden ilk inceleyeceğimiz özellik dönüşüm stili olarak tanımlayacağımız özellik transform-style. Eğer dönüşüm uygulanan elemanın alt elemanlarınada 3. boyutu uygulayacak iseniz bu özelliğin preserve-3d tanımını kullanmalısınız. Bunun anlamı alt elemanlar kapsayıcı eleman gibi 3. boyutu davransın demektir.

Yapısı : transform-style: keyword;
Aldığı Değerler : [ flat | preserve-3d ]
Başlangıç değeri: flat
Uygulanabilen elementler: Blok-level ve satıriçi elementler
Kalıtsallık: Yok

http://unformedbuilding.com/demo/2012/css-transforms/3d/3d-transform-style.html

3 Boyutlu Dönüşüm Fonksiyonları

2 Boyutlu dönüşümü tanımlarken kullandığımız transform özelliği 3 Boyutlu tanımlarımız içinde geçerlidir. Farklı olan 3. boyutun fonksiyonlarıdır.

perspective
translateX, translateY, translateZ, translate3d
matrix3d
rotateX, rotateY, rotateZ, rotate3d
scaleX, scaleY, scaleZ, scale3d

2 Boyutlu dönüştürme özelliklerine z-ekseni eklenmiş özelliklerdir.

Bakış Açısı(perspective)

Perspective özelliği elemanların görüntüsünün bakış açısını değiştirmek(derinlik hissi) için kullanılır. perspective özelliği 3 Boyutlu Dönüştürme işlemleri için önemli bir özelliktir. perspective özelliği kolay kullanımı vardır, tabi karışık yapılı alanlardaki kullanımı hariç.

“Perspektif, nesnelerin görünümünü 3 boyutlu olarak düz bir yüzeyde, yani 2 boyuta indirgeyerek, göstermeye yarayan bir iz düşüm tekniğidir. Yani, teknik bir çizimdir. Perspektif çizimde, nesnenin gözlemciye göre olan pozisyonunun ve uzaklığının etkileri esas alınarak çizim yapılır. Söz konusu çizimler gözlemcide, biçim ve orantı bakımından, renklerden bağımsız olarak, 3 boyutlu bir gerçeklik izlenimi yaratır.” - wikipedia.org

div { 
    transform: perspective(derinlik); 
}

Derinlik değeri bir uzunluğu(px olarak) veya none değerlerini alır.

Yapısı : transform: perspective(derinlik)
Aldığı Değerler :none |
Başlangıç değeri: none
Uygulanabilen elementler: Blok-level ve satır içi elemanlar
Kalıtsallık: Yok

Derinlik hissini anlamak için aşağıdaki örneklere bir göz atın. İlk kodumuz normal perspective ataması olmayan bir kutu

transform: translate(0px, 0px, -200px);

İkinci sağdaki kutu ise perspective uygulanmış kutu;

transform: perspective(500px) translate3d(0px, 0px, -200px);

Bir örnek daha yaparak ile pekiştirelim.

soldaki kutu

transform: rotatey(30deg);

sağdaki kutu

transform: perspective(300px) rotatey(30deg);

Perspektifi anlamak için güzel bir örnek http://www.ryancollins.me/?p=993

translateX, translateY, translateZ, translate3d

translateX ve translateY tanımlarını dha önce 2 boyutlu Dönüştürme özelliklerinde incelemiştik. Şimdi de translateZ ve üçünü bir arada kullanabildiğimiz translate3d kullanımlarını göreceğiz.

translateZ değeri z-ekseninde elemanı hareket ettirmeye yarar. Yüzde değeri almaz.

div { 
    transform: translateZ(uzunluk); 
}

Uzunluk değeri bir sayıdır. Perspective özelliğini anlatırken verdiğimiz ilk örnekte bu özelliğe değinmiştik.

translate3d tanımı 3 ekseninde aynı anda tanımını sağlamamızı sağlayan bir kısaltmadır.

translate3d(x, y, z)

Bir örnek kod yazarsak

 div { 
    transform: translate3d(20px, 60px, 30px); 
}

Görünümü konumlandırma ile sağlayabilirdik ancak buradaki izometrik hissi transitions ve animasyon uygulamalarında daha çok ön plana çıkacaktır.

scaleX, scaleY, scaleZ, scale3d

2 boyutlu dönüştürmede bahsettiğimiz gibi scale özelliği elemanları büyütmek veya küçültmek için kullanılır. scaleX ve scaleY değerlerini daha önce görmüştük. Burada scaleZ ve scale3d özelliklerini tanımlayacağız.

- scaleZ

div { 
    transform: scaleZ(number); 
}

scaleZ tanımı biraz farklı davranır. Dönüşüm uygulanmış elemanlarda büyültme veya küçültme işlemi 3 boyutlu eksen yapmak mümkün değil. Burada yaptığımız daha çok 3 boyutlu eksende 2 boyutlu görüntü elde etmektir. Bundan dolayı scaleZ değeri translateZ, rotate veya perspective değerlerinin bir ile kullanmak daha anlamlı olacaktır.

div {
    transform: perspective(500px) scaleZ(2) rotateX(45deg);
}

Yıldız savaşları filmindeki yazılara benzer bir görüntü elde ediyoruz.

- scale3d

scale3d özelliği tüm scale özelliklerini bir tanımda toplayan bir kısaltmadır.

scale3d(x, y, z)

rotateX, rotateY, rotateZ ve rotate3d

İki boyutlu düzlemde rotate değeritek tanım ile yetinilirken 3 boyutlu düzlemde 3 adet rotate tanımı yapmak gerekir. Bundan dolayı rotateX, rotateY ve rotateZ tanımları 3 boyutlu düzlemde döndürme işlemleri için tanımlanmıştır.

Tanımların sayısı üçe çıksa da tanımlar 2 boyutlu tanım ile aynıdır. Negatif değer alabilirler.

- rotateX

rotateX(<açı>)

rotateX tanımı ile verilen açı değeri kadar saat yönünde elemanı x-ekseninde çevirmeye yarar.

Yatay eksende elemanımız orta noktasından 45 derece saat yönünde eğilmiştir.

- rotateY

rotateY(<açı>)

rotateY tanımı ile verilen açı değeri kadar saat yönünde elemanı y-ekseninde çevirmeye yarar.

Dikey eksende elemanımız orta noktasından 45 derece saat yönünde eğilmiştir.

- rotateZ

rotateZ(<açı>)

rotateZ tanımı ile verilen açı değeri kadar saat yönünde elemanı z-ekseninde çevirmeye yarar.

z-ekseninde elemanımız orta noktasından 45 derece saat yönünde eğilmiştir.

- rotate3d

rotate3d(<rakam>, <rakam>, <rakam>,<açı>)

rotate3d özelliği saat yönünde 3 boyutlu döndürme işlemi yapar. Son değer açı değerini verirken ilk üç değer vektörel tabanlı rakamlar olarak tanımlanır. Başlangıç değeri 0,0,0 olarak tanımlıdır. Rakamlar Kartezyen koordinat sistemi’ne göre değer alır. Ben bu rakamlara pek takılmayalım diyorum, çevrimiçi araçlar ile bu işi halledebiliriz gibime geliyor.

İpucu:Japon makaledeki örnek hoşuma gitti göz atmakta yarar var. http://unformedbuilding.com/demo/2012/css-transforms/3d/3d-rotatexyz.html

matrix3d

matrix3d fonksiyonu tek elden 3 boyutlu dönüşüm yapmamıza olanak sağlamak amacıyla oluşturulan 4x4 bir matrisi olan 16 değerli bir özelliktir.

Bana biraz karışık gelen bir durum. Programatik olarak 3 boyutlu dönüşümleri yapmaya yarayan bir fonksiyon olarak tanımlayabilirim.

div { 
transform: matrix3d( m01,m02,m03,m04, m05,m06,m07,m08,m09,m10,m11,m12, m13,m14,m15,m16); 
}

http://www.eleqtriq.com/images/static/demos/2010/css3d/matrix3dexplorer.html

Bu araç ile matrix3d daha kullanışlı oluyor.

perspective-origin

perspektif özelliği ile birlikte kullanılır, elemanın görüntülenen bakış açısının orijin noktasını değiştirmemizi sağlar. Elemanın perspektif görüntüsünün açısını değiştirir. x ve y değerleri alır. Başlangıç değeri kapsayıcının orta noktası olan 50% 50%’dir.

x-değeri sol(left), sağ(right) ve orta(center) değerlerini alır. y-değeri üst(top), alt(bottom) ve orta(center) değerleri alır. Yüzde değerleri de alır.

Bu durumu şöyle düşünebiliriz; bir kameramız olsun baktığımız alana farklı bir açıdan bakmak istediğimizde perspektif orijinimizi değiştiriyoruz.

http://unformedbuilding.com/demo/2012/css-transforms/3d/3d-perspective-origin.html

transform-origin

Dönüşümün orjin olarak nereye referans alacağını tanımlamamızı sağlar.

2 boyutlu dönüştürmede bahsettiğimiz bu özellik 3 boyutlu dönüşümde benzer bir kullanımı var ek olarak z-ekseni tanımıda eklenmektedir.

transform-origin: x,y,z;

z tanımı z-eksenindeki mesafeyi belirtmemiz için kullanılmaktadır.

http://unformedbuilding.com/demo/2012/css-transforms/3d/3d-transform-origin.html

backface-visibility

Bu özellik 3 boyutlu elemanın arkasının gösterilip gösterilmeyeceğini belirliyor. visibility özelliği gibi işliyor. hidden ve visible değerlerini alıyor.

Carousel örneğinde bu özelliği daha iyi anlarız.

figure{ 
    -webkit-backface-visibility:visible;
    -moz-backface-visibility:visible;
    -ms-backface-visibility:visible;
    -o-backface-visibility:visible; 
    backface-visibility:visible; 
}

figure{ 
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden; 
    -ms-backface-visibility:hidden;
    -o-backface-visibility:hidden; 
    backface-visibility:hidden; 
}

Yukarıda görüldüğü gibi ilk resimde elemanların arkası görünürken ikinci resimde gizlenmiştir.

Tarayıcı Desteği

Yeni nesil tarayıcıların dahi son zamanlarda desteklediği 3 boyutlu dönüşüm özellikleri, sessiz tarayıcı güncellemeleri sayesinde Firefox, Chrome’un tam desteğine kavuştu. Aynı şeyi İnternet Explorer için söyleyemiyoruz maalesef. İnternet Explorer henüz yayınlanmayan 10. sürümünden itibaren destekliyor.

Tarayıcı Destekleme Listesi
Firefox 12+ (-moz- öneki ile)
Chrome 12+ (-webkit- öneki ile)
Safari 5.1+ (-webkit- öneki ile)
Opera desteklemiyor
İnternet Explorer 10+ (-ms- öneki ile)
Mobil Tarayıcılar
iOS Safari 3.2+ (-webkit- öneki ile)
Opera Mobile desteklemiyor
Android Browser 3.0+ (-webkit- öneki ile)

Kaynaklar

CSS3 Çevrimiçi Araçları

Fatih Hayrioglu — Tue, 04 Sep 2012 04:02:00 PDT

CSS3 Arayüz Geliştiriciler için bir çok güzel özellik getirdi. Bu yeni özellikler gayet kullanışlı ve kuvvetli özellikler. Bu özelliklerin bazılarını kodlarken özellikle metin editörü ile kodlama yaparken zorlanabiliyoruz. Bu durumun çözümü için bazı araçlar yardımımıza yetişir. Ben aşağıda sıraladığım bir çok aracı kullandım. Bazılarını ise bu yazıyı yazarken araştırırken buldum ve buraya ekledim. Umarım kullanışlı olur. Sizinde bu listenin dışında ekleyeceğiniz araçlar var ise önermeniz güzel olur.

Renk Geçişi

CSS3 ile gelen güzel özelliklerden bir tanesi renk geçişinin CSS yardımı ile uygulanabilmesi. Kodlaması biraz sıkıntılı olan bu konuda bir araç kullanmak gerekiyor.

http://www.colorzilla.com/gradient-editor/
Renk geçişi örneklerini sunması çok güzel.
Farklı tarayıcılar için kod üretmesi güzel.
Tek sıkıntı doğrusal renk geçişi var ama radyal renk geçişi yok
http://westciv.com/tools/gradients/
Doğrusal ve Radyal renk geçişleri oluşturmamıza yardımcı oluyor
http://gradients.glrzad.com/

Oval Kenar

Oval kenarlar oluşturmak için her ne kadar bir araca ihtiyaç olmasa da dört köşesi aynı değer olmayan oval kenarları test etmek açısından kullanılabilir.

Buton

Buton olarak ayrı bir araç açmaya her ne kadar gerek yoksa da bu isimle bir çok site olduğu için böyle bir kategori ekledim. Aslında tüm border-radius, box-shadow, text-shadow gibi özelliklerin tanımlandığı araçlar bunlar.

Kutu Gölgeleme

Daha önce bu konuda bir yazı yazdım ama bu tip bir araçta örnek kod saklamanın yerine alabilir. Gayet kullanışlı bir araç

http://www.wordpressthemeshock.com/css-drop-shadow/

Sayfa Planı

Grid yapılarını gelişmesi ile bir çok hazır kodlar üretilmeye başlandı.

Metin

CSS3 ile birlikte metinlerin görselliği ile alakalı bir çok yeni özellik eklendi bunları test etmek için güzel araçlar

CSS Sprite

CSS sprite tekniği ile ilgili bir çok araç olsa da bence mantıklı olan kendi sprite’ını kendin yapmak.

Border-image

http://border-image.com/
border-image ile ilgili tek araç. Kullanışlı bir araç.

Animasyon

CSS3 ile sayfalarımıza flash benzeri animasyonlar eklmemize yarayan güzel bir araç.

Font-face

Daha çok yazı tiplerini birbirine çevirmek için kullanılan bu araçlar, bunun yanında @font-face kodunu üretmek içinde kullanışlı.

http://www.fontsquirrel.com/fontface/generator
http://www.kirsle.net/wizards/ttf2eot.cgittf yazı tiplerini eot’ya çevirmek için çevirim içi araç.
http://onlinefontconverter.com/Farklı yazı tiplerini birbirine çeviren çevirim içi araç
http://ttf2eot.sebastiankippe.com/ttf’den eot ye çeviren başka bir çevirim içi araç
http://xmlgraphics.apache.org/batik/tools/font-converter.htmlttf’den svg’ye çevirme aracı

Çoklu kolon

CSS ile ok

http://cssarrowplease.com/

Transform

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_3d-transforms.htm

Filtre

http://html5-demos.appspot.com/static/css/filters/index.html

Toplu

http://css3generator.com/
border-radius
box-shadow
text-shadow
rgba
font-face
multiple-column
box-resize
box-sizing
outline
transtion
2d transform
Seçiciler
gradient
http://www.css3.me/
border-radius
box-shadow
gradient
opacity
http://css3gen.com/
gradient
border-radius
box-shadow
text-shadow
http://www.css3maker.com/index.html
border-radius
gradient
2d transform
animation
transtion
rgba
text-shadow
box-shadow
text-rotation
font-face
http://www.webtutorialplus.com/css3-generator.aspx
border-radius
gradient
2d transform
transtion
text-shadow
box-shadow
outline
multiple-column
box-resize
http://css3.pascal-seven.de/
http://westciv.com/tools/gradients/
2d ve 3d Transform
http://www.layerstyles.org/builder.html

Kaynaklar

CSS3 Javascript’ten Rol (Ç)alıyor

Fatih Hayrioglu — Tue, 31 Jul 2012 05:39:00 PDT

Geçen haftasonu c.tesi günü(28 Temmuz 2012) jstanbul etkinliğinde sunduğum “CSS3 Javascript’ten Rol Çalıyor” makalesidir. Etkinlikte internet erişimim olmadığı için örnekleri gösterememiştim, burada bağlantıları da paylaşıyorum umarım yararlı olur.

Sunuma erişmek isteyenlere sunumun linki.

Bu başlık şöyle çıktı; Hasan Yalçın’ın “Modern Web Tasarımı” kitabı için HTML5 ve CSS3 yeniliklerini bir cümle ile anlatmak istersen ne dersin demesi ile başladı. “Geliştirilen kodlama teknolojilerinde, css3 tasarımcıdan, html5 programcıdan rol çalıyor!” diye bir cümle kurmuştum. Bu cümlenin CSS3 kısmı eksik kaldığını zamanla gördüm. CSS3 sadece tasarımcıdan değil Javascript’ten de rol çalışıyor bunu gördüm.

Katman Mimarisi ve Js'in Yeri

İçerik Katmanı (HTML)
Gösterim Katmanı (CSS)
Davranış Katmanı (Javascript)

CSS3 ve HTML5’den önce bir kitapta şöyle bir şema görmüştüm.

Content katmanı Web sayfamızın içeriğini belirler. Web sayfamızda kullandığımız tüm yazılar, resimler, linkler, formlar vs. content kapsamında ele alınır. Content’i belirlemek için HTML kullanılır. Yani Web sayfamızdaki içeriği HTML ile belirtiyoruz. Bu içeriği kullanıcıya sunmak için presentation katmanı kullanılır. Bu katman ile Web sayfasında bulunan içeriği görsel olarak şekillendirip kullanıcıya sunarız. Bu sunumu gerçekleştirmek için CSS kullanılır ve son olarak behavior katmanı ise Web sayfamızın davranışını belirler. Sayfamızda bulunan olaylar, tetiklemeler, işlemler vs. davranış kapsamında ele alınır ve sayfanın davranışını belirlemek için JavaScript kullanılır

Küme Mimarisi

Genel anlamı ile yukarıdaki mantık doğru olsa da aslında hepsi bir birine bağımlı teknolojiler bunlar ve birbirinden rol çalabiliyorlar.

CSS3 ile birlikte değil aslında CSS2 versiyonunda da bir hareketlilik vardı. :hover Her ne kadar Murat Çorlu :hover’ın bir dinamizm getirdiğini kabul etmese de bence CSS’in sayfa düzeni işine girişmeden önceki en büyük dikkat çekiciliği linklerin :hover etkisine ulaşıp değiştirme imkanıdır.

Javascript’ten Rol Çalan Özellikler

:checked Sözde Sınıfı
:target Sözde Sınıfı
Kardeş Seçiciler (Bitişik ve Genel)
CSS3 Animasyon
CSS3 Transition
:hover Sözde Sınıfı
medya sorguları (media query)
calc() değeri

İkinci Liste

Seçiciler (first-child, last-child, nth-child)
CSS3 Transform
CSS3 Esnek Kutu Yerleşimi
::selection seçicisi
pointer-events

Biz burada tıklama olanağı kazandıran :checked Sözde Sınıfı, :target Sözde Sınıfını ve Kardeş(Siblings) Seçicileri irdeleyeceğiz.

:checked Sözde Sınıfı

CSS ile bize tıklama yakalamayı sağlayan diğer bir özellik :checked sözde sınıfıdır. Normalde checkbox ve radio butonların işaretli olup olmaması durumu için çıkan bu özellik, tıklama yakalama özelliği yardımı ile bir çok uygulama yapımı için kullanılıyor.

radyo butonlar ve işaret kutuları label ile kullanılmaktadır.

<input id="rad1" type="radio" name="rad">
<label for="rad1">Radio 1</label>

for tanımı yardımı ile label ile radyo buton veya işaret kutusuna erişim sağlanır. for ile radyo buton ve işaret kutusu id’si aynı olmalıdır.

input[type="radio"]:checked+label{ 
    font-weight: bold; 
}

Tanımı ile tıklama yakalama işini yapabiliyoruz.

Hemen bunu basit bir gizle göster işini nasıl yaparız onu gösterelim.

<input id="che1" type="checkbox" name="che">
<label for="che1">Radio 1</label>
<div class="icerikAlani">Gizli İçerik</div>

Yukarıdaki koda birde div ekledik. Amacımız bir tıkla bu divi göstermek, eğer açıksa bir tıkla gizlemek.

input[type="checkbox"], 
.icerikAlani{ 
    display:none; 
}

label{
    color:blue; 
    cursor:pointer; 
}

input[type="checkbox"]:checked ~ .icerikAlani{ 
    display:block; 
}

Sadece bu kod yardımı ile gizle göster işini yapabiliyoruz. tilda(~) işareti Genel Kardeş Seçicisi yardımı ile aynı seviyede olan “icerikAlani” sınıfını buluyor ve gösteriyoruz.

target seçicisi

target seçicisi ve CSS’in tıklamaları yakalayabilme yeteneği kazanması. CSS ile tanım yapmak için seçicileri kullanıyoruz. Aslında benzer mantığı jquery ile javascript mecrasına da taşımış durumda. CSS3 öncesinde biz elemanların tıklanmasını CSS ile yakalayamıyorduk. ta ki :target seçicisi gelen kadar. :taget seçicisi bize elemanlara tıklandığını yakalama imkanı sağladı ve artık js ile tıklama yakalamayı beklememize gerek kalmadı.

<dl>
    <dt id="dn1">
        <a href="#dn1">Deneme Başlık</a>
    </dt>
    <dd>Deneme 1 İçerik</dd>
    <dt id="dn2">
        <a href="#dn2">Deneme Başlık 2</a>
    </dt>
    <dd>Deneme 2 İçerik</dd>
</dl>

CSS kodu;

dt{ 
    font-weight:bold; 
}

dt:target + dd{ 
    display:block; 
}

dd{
    display:none; 
}

:target sözde sınıfının dezavantajı sayfa imlecini ilgili içeriğe kaydırması ve adres barda #tanim ile geçiş sağlanmasıdır. Geri tuşları biraz devre dışı kalıyor.

Kardeş(Siblings) Seçiciler

CSS'in bir diğer sorunu sadece kapsayıcı eleman içindeki elemanlara erişebilmesi.

<p>Deneme metni <span>bir</span></p> 
<div class="icerik">Burada içerik olsun</div>

CSS ile sadece bir kapsayıcı eleman içine müdahale edebilirken

p span{ 
    /* tanımlar */ 
}

Kardeş seçiciler yardımı ile artık kapsayıcı içinde olmayan elemanlara da erişebiliyoruz.

p + div.icerik{ 
    display:block; 
}

veya

p ~ div.icerik{ 
    display:block; 
}

gibi tanımlar ile DOM’deki aynı seviyedeki elemana erişim sağlayabiliyoruz.

Bitişik Kardeş Seçicileri (Bir ufak kardeş)
Genel Kardeş Seçicisi

Bitişik Kardeş Seçicileri

Bitişik Kardeş Seçicileri biribiri ardına gelen aynı seviyedeki elementlerden sonra gelenine stil tanımlamak için kullanılır. Tam olarak “Bir Ufak Kardeş Seçicisi” olmalıdır.

Bir örnek verelim bir başlığımız var ve sonrasında ard arda paragraflar geliyor. Biz başlık ile hemen ardından gelen paragrafın arasına mesafe koymak için bu seçiciyi kullanabiliriz.

<body> 
    <h2>Başlık 2</h2> 
    <p>Buraya <em>önemli</em> ve <strong>iyi</strong>kod gir</p> 
    <p>Buraya <em>önemli</em> ve <strong>iyi</strong>kod gir</p> 
</body>

Dökümanın yapısı:

Biz burada h2 ve h3 arasında boşluk vermek için aşağıdaki kodu kullanırız:

h2 + p {
    margin-top: 10px;
}

Bu seçiciyi ie7’nin seçicisini destekliyor.

Sonuç olarak konunun başında söylediğimiz gibi CSS, (X)HTML elementlerinin kendi aralarındaki ilişkileri kullanarak bize bir çok avantaj sağlar. Bu sayede bir çok kod yığınından kurtulmuş oluruz ve kodlarımız bir düzene girer. Bu kuralları uyguladıkça önemini daha iyi anlayacağız.

Çocuk Seçicileri ve Bitişik Kardeş Seçicileri‘ni Internet Explorer 7 versiyonundan itibaren desteklemeye başlamıştır. Bu nedenle kullanımı konusunda dikkat etmeliyiz.

Genel Kardeş Seçicisi

CSS2.1 ile birlikte gelen bitiş kardeş seçicilerine benzer bir seçicidir. Bitişik kardeş seçicisine göre daha seçici ve kullanışlı bir seçicidir. Aynı kapsayıcıya sahip elemanların belirtilen elemandan sonraki aynı seviyedeki elemanların tümünü yakalamak için kullanılır. Burada dikkat edilmesi gereken konu belirtilen elemandan sonraki aynı seviyedeki elemanları seçiyor olması. Tanımlama yaparken araya işaret olarak tilde(~) koyuyoru

Bir örnek yapacak olursak bir resmimiz var bunu sola hizalayacağız ve sağdanda metinler akacak. Bu resim ve paragraflar arasına padding tanımlamak için genel kardeş seçicisi birebirdir.

img{ 
    float:left;
}

img ~ p{ 
    padding-left:110px;
}

html kodu

<img src="kedi.jpg" width="96" height="96" alt="kedi" />
<p>Kedi (Felis catus),...</p>
<p>2,5 ile 12 kilo ...</p>
<p>Kediler hoş görünüşlü, ..</p>

Bu seçiciyi ie7’nin seçicisini destekliyor.

CSS3 Yarıdımı İle Js’den Çalınan Roller

Akordiyon Uygulaması
Sekme Uygulaması
Slider Uygulamaları
Lightbox, modal Uygulamaları
Animasyon ve efektler
Tooltip
Menü Uygulamaları
Özel Form Elemanları
Diğer Uygulamalar

Akordiyon Uygulaması

Akordiyon uygulamaları web sayfalarında biraz yerden kazanmak birazda görsellik kazandırmak için tercih edilen yapılardır. Mevcutta ve daha önceleri javascript daha doğrusu jquery ile yapılan bu uygulamaları artık CSS yardımı ile yapabiliyoruz.

CSS ile yapılan akordiyon menülerde kardeş seçicileri ve :checked Sözde sınıfı/:target Sözde Seçicisi yardımı ile oluşturuluyor. Gizlenmiş input alanına tıklandığında kardeş seçicisi le ile ulaşılan içerik göster-gizle yapılıyor. Araya animasyon koyarak daha görsel sonuçlar elde edilebiliyor.

Bu işi benzer bir mantık ile :target seçicisi yardımı ile yapabiliyoruz.

Sekme Uygulaması

Yine yer sıkıntısı nedeni ile oluşturulmuş çözümlerden birisi de sekmeli yapılardır.

CSS ile oluşturulurken yine kardeş seçicileri ve :checked Sözde sınıfı/:target Sözde Seçicisi yardımı ile oluşturuluyor.

CSS3 sekmeli yapıları gizli radyo butonuun :checked Sözde sınıfı yardımı ile tıklama özelliği kazandırılmış alana tıklayınca belirli alanların gözterilmesi mantığı ile yapılmaktadır.

Slider

Şu aralar çok fazla tercih edilen slider uygulamalarını sadece CSS ile yapabilmek çok süper.

Çalışma mantığı, javascript ile yaptığımız mantık ile aynıdır. float ile yan yana sıralanmış içerik
overflow:hidden ile sadece seçilen resmi gösteriyoruz. Her tıklamada margin-left değeri içerik kadar sola doğru çekecek bir değer verilerek yapılır.

Bir çok şekilde uygulaması olan silder'ın farklı çeşitlerini görmek için codrops sitesine uğramanızı öneriyorum. Makalede linkleri mevcut.

Lightbox, modal

Site içinde kullanılan resimlerin daha büyüğünü görmek için kullanılan yapılardır. Sadece resimler değil içerik içinde geçerli. Bir nevi popup'ın yerini aldı lightbox.

Mantık olarak küçük bir resme tıklayınca büyük resmi göstereceğiz. :target sözde sınıfı yardımı ile ilgili büyük resmi yakalayıp göstererek yapılıyor.

Ayrıca animasyon ve transition yardımı ile görsel olarak güzel geçişler yapabiliyoruz.

Animasyon, Efektler vd.

Daha çok flash ile yapılan animasyon ve efektler, aynı zamanda javascript ile de bir çok animasyon ve efekt yapabiliyoruz.

CSS3 yardımı ile artık CSS ile de yapabiliyoruz.

Bu konuda CSS3 Animasyon ve CSS3 Transition özellikleri kullanılmaktadır.

Şu an için flashdaki efekt ve animasyonların hepsi yapılamasa da güzel bir çok örnek yapılabilmekte.

Animasyona alışık olmayan CSS kod yazarlarını zorlayacak uygulamalar. Ancak uğraşması zevkli.

Tooltip

CSS2 ile de yapabildiğimiz tooltip uygulamaları CSS3 ile daha görsel ve efektli görünüm kazandırabiliyoruz.

:before ve :after Sözde elementleri ve CSS3 Animasyon/ CSS3 Transition yardımı ile bir çok güzel tooltip yapabiliyoruz.

Menü

Bir çok menü uygulaması uzun süredir javascript'ten bağımsız olarak sadece CSS ile yapılmakta.

CSS3'ün yeni özellikleri görsellik ve efektli ve resimsiz çözümler üretmemizi sağlıyor.

@font-face özelliği ve CSS3 renk geçişi yardımı ile resimsiz güzel menüler elde edebiliyoruz.

Özel Form Elemanları

İşletim sisteminin standart form elemanlarından sıkılmış bir çok kullanıcı gibi tasarımcılarda
özel form elemanları tasarlamaktadır. Arayüz geliştiricileri zorlayan bu konuda yardımımıza javascript yetişiyordu.

Artık CSS3 :checked Sözde sınıfı yardımı ile güzel radyo butonları ve işaret kutuları oluşturabiliyoruz.

Diğer Uygulamalar

Bunun dışında yine kardeş seçicileri, :checked, :target sözde seçileri, CSS3 Animasyon, CS3 Transtion özelliklerini kullanarak bir çok farklı uygulama yapılmaktadır. Benim gördüğüm

http://cssdeck.com/item/269/css-news-ticker - haber barı
http://cssdeck.com/item/513/colourful-css-loader - loading
http://www.hongkiat.com/blog/css3-animation-advanced-marquee/ (marquee)
http://www.webstuffshare.com/2012/04/how-to-create-animated-list-view-using-css3-only/ (liste görünümü)
http://thecodeplayer.com/walkthrough/make-a-stopwatch-using-css3-without-images-or-javascript (kronometre)
http://www.ryancollins.me/?p=1041 (gizle -göster)

Kaynaklar

Firebug 1.10 Sürümü Yenilikleri

Fatih Hayrioglu — Thu, 19 Jul 2012 04:48:00 PDT

Firebug kodlama hayatımızda önemli bir yere sahip, Google Developer Bar ile şu aralar çekişseler de Firebug’ın bendeki yeri ayrı.

Firebug 1.10 ile birlikte gelen yeni özellikler;

Çerez Sekmesi

En büyük yeniliklerden birisi Çerez yönetim sekmesinin eklenmesi. Belirli siteler için çerez kullanımını engelleyebilirsiniz, var olanı değiştirebilir veya yeni çerez ekleyebiliyoruz.

Tarayıcıyı Aç-Kapa Yok

Yeni Firebug güncellendikten sonra tarayıcıyı açıp-kapmaya gerek yok. Direk güncelleme sonrası yeni sürüme geçiş oluyor.

Not:1.9 önceki sürüm yüklü ise aç-kapa gerekiyor.

Yükleme Geciktirmiyor

Firebug Firafox’un başlangıcını yavaşlatmıyor artık. Firebug kullanıcının ilk isteği ile yükleniyor. Tarayıcı ilk açıldığında sadece Firebug ikonu ve menüsü yükleniyor.

Komut Editörü Renklendirilmiş

Komut satırı artık renklendirilmiş durumda. Renklendirilmiş komut satırı daha okunaklı ve güzel görünüyor.

Otomatik tamamlama geliştirilmiş

Firebug’ın Google Web Developer Tools’dan geri kaldığı özelliklerden birisi otomatik tamamlama özelliğinin yeteri kadar iyi olmaması idi. Yeni sürüm ile birlikte bu alanda geliştirmeler yapılmış.

Bu özellik CSS özellikleri, İzleme(Watch) panelinde değişkenleri yakalamada, break-point ile koşullarında, renk, yazı tipi isimi vs. otomatik tamamlama çalışıyor.

Stil geçmişini İzleyebiliriz

Yine Google Developer Tools’da olan güzel bir özellik Firebug’a eklenmiş. Bir eleman üzerine tanımlanmış CSS özelliklerinin sırası ile izlememizi sağlayan güzel bir özellik.

Computed sekmesinde aktif olan atama siyah, pasif olan atamalar ise gri olarak gösterilmiş.

:focus Sözde Sınıfını Desteği

Daha önce :hover, :active gibi sözde sınıfları destekleyen Firebug şimdi :focus desteğini sağlayarak güzel bir özellik daha eklemiş bünyesine.

bu sayede elemana odaklandığında bir CSS tanımı yapıldı ise bunu yakalamak artık daha kolay.

Media Query Özelliklerini Düzenleme İmkanı

Uyumlu(responsive) web ile çok büyük önem kazanan media sorguları, Firebug’ın yeni sürümünde de gözden kaçmamış. Medya sorgularını Firebug ile düzenleyebiliyoruz artık.

@font-face Tanımları

font-face ile tanımlanan harici fontlar font listesinde görünüyor artık.

CSS Özelliklerini Silme

Bir yeni özellik; Firebug CSS özelliklerine sağ tıklayıp silebilme imkanı veriyor

Diğer Yeni Özellikler

Yukarıda saydıklarımızın haricinde aşağıdaki yeni özelliklerde eklenmiş;

HTML sekmesinde gösterilen kodun formatını değiştirebiliyoruz.
Kod içindeki gösterilen renk tanımlarının formatını değiştirebiliyoruz
Menüdeki elemanların açıklamalarını tooltip ile gösterimi eklenmiş.
Konsolda help yazarak API comutlarının özet tanımlarına erişebiliyoruz.
Bunlardan başka 79 geliştirme daha yapılmış.

Sonuç

Google Geliştirme Aracı ile rekabete giren Firebug bu yeni sürüm ile bir çok yeni güzellik eklemiş. Google Geliştirme aracındaki kod ayrıştırma özelliğini de ekleseler süper olacaktı.

Kaynaklar

CSS3 Renk Geçişinin elemanına uygulamasındaki sorun ve çözümü

Fatih Hayrioglu — Mon, 25 Jun 2012 03:24:00 PDT

CSS3 yeniliklerinde yaralanıyoruz, tabi bazı sorunlar ortaya çıkıyor. Hatasız kod olmayacağı için, hata olur ama bir çözümüde vardır elbet diye düşünmemiz lazım.

Sorun tam olarak bir sayfanın ardalanının tamamına renk geçişi uygulamak istediğimizde belli bir yere kadar uygulayıp kalan kısmını tekrar ettirerek istemediğimiz bir durum oluşmasına neden oluyor.

Sorunun çözümünü aradığımda ilk sonuç http://stackoverflow.com/ sitesinde buldum biraz daha araştırınca benzer cevaplar gördüm ve sizlerle paylaşmak istedim.

background-image özelliğine eklenen renk geçişi kodu tekrar edecektir, biz bu tekrarı istemediğimiz için.

background-repeat: no-repeat;

ekledik. Ayrıca uygulana renk geçişinin sayfa zemininde sabitlenmesi için

background-attachment: fixed;

kodunu ekledik.

Diğer kod eklemeleri farklı tarayıcılar içindir.