tarihinde Fatih Hayrioğlu

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

  1. RSS Düzelt
  2. Fontu Değiştir.
  3. İç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 (https://fatihhayrioglu.com/static/dokumanlar/ardalan_ekle4.html)
  4. Highlight tasarımını değiştir
  5. Site tasarımına el at.
  6. Açılmayan Sayfalar
    1. https://fatihhayrioglu.com/kutu-modeli-margin-ozellikleri/
tarihinde Fatih Hayrioğlu

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.

z-index

Ş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 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);
}

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.

perspective-origin

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.

perspective-origin

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;
}

Carousel örneğinde

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

Carousel örneğinde

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)

Tarayıcı Desteği

Chrome explorer Firefox
12+ (-webkit) 10+ (-ms) 12+ (-moz)

Mobil Tarayıcılar

Android Mobil Safari Chrome
3.0+ (-webkit) 3.2+ (-webkit) 36+

Kaynaklar

tarihinde Fatih Hayrioğlu

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.

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

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ı.

Çoklu kolon

  • [http://debray.jerome.free.fr/index.php?outils/Generateur-de-multi-colonnes-en-css3][]
  • [http://www.aaronlumsden.com/multicol/][]

CSS ile ok

  • [http://cssarrowplease.com/][]

Transform

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

Filtre

  • 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

  • [http://www.sitepoint.com/10-best-css3-code-generators/#fbid=ovoh-eTTYCI][]
  • [http://www.webdesignerdepot.com/2012/04/15-great-html5-and-css3-generators/][]
  • [http://line25.com/articles/handy-roundup-of-css3-generators-and-tools][]
  • [http://www.shoutmeloud.com/9-great-free-online-css-sprite-generator.html][] (sprite araçları)
  • [http://www.catswhocode.com/blog/awesome-css3-generators-to-simplify-front-end-development][]

debray.jerome.free.fr/index.php?outils/Generateur-de-multi-colonnes-en-css3 [http://www.aaronlumsden.com/multicol/]: http://www.aaronlumsden.com/multicol/ [http://cssarrowplease.com/]: http://cssarrowplease.com/ [http://css3generator.com/]: http://css3generator.com/ [http://www.css3.me/]: http://www.css3.me/ [http://css3gen.com/]: http://css3gen.com/ [http://www.css3maker.com/index.html]: http://www.css3maker.com/index.html [http://css3.pascal-seven.de/]: http://css3.pascal-seven.de/ [http://www.layerstyles.org/builder.html]: http://www.layerstyles.org/builder.html [http://www.sitepoint.com/10-best-css3-code-generators/#fbid=ovoh-eTTYCI]: http://www.sitepoint.com/10-best-css3-code-generators/#fbid=ovoh-eTTYCI [http://www.webdesignerdepot.com/2012/04/15-great-html5-and-css3-generators/]: http://www.webdesignerdepot.com/2012/04/15-great-html5-and-css3-generators/ line25.com/articles/handy-roundup-of-css3-generators-and-tools [http://www.shoutmeloud.com/9-great-free-online-css-sprite-generator.html]: http://www.shoutmeloud.com/9-great-free-online-css-sprite-generator.html [http://www.catswhocode.com/blog/awesome-css3-generators-to-simplify-front-end-development]: http://www.catswhocode.com/blog/awesome-css3-generators-to-simplify-front-end-development