Sayfa İçeriğini Dikey Ortalama
Bir siteyi W3C standartlarında, sabit yükseklik kullanmadan dikey olarak ortalamak XHTML kodlayıcısı için genelde sıkıntı vericidir.
Yatay ortalama için genellikle CSS koduna margin: auto özelliğini eklemek yeterli olabiliyorken, dikey ortalama için bu kadar basit bir CSS stili bulunmamaktadır.
Devamını oku >>
Günün Derlemeleri / 21 Nisan 2009
Uzun zamandır çok yoğundum işte, günün derlemelerini aksattım. Takip edenlerden özür diliyorum. Buyrun bugünün derlemeleri:
Eşsiz menü örnekleri Link
jQuery İpuçları Link
Web tasarım-uygulama kaynakları Link
Facebook benzeri mesaj gönderme alanı Link
Çizgi film ilüstrasyonu tutorialları Link
Basit Flash mp3 çalar Link
2009
bö!2009′da “Teknoloji Kategorisi”e adayım!
bö!2009′da “Teknoloji Kategorisi”e adayım!
Blog Ödülleri, blog yazarlarını daha çok ve nitelikli içerik hazırlamaya teşvik eden, bu sene ikincisi düzenlenen bir etkinlik.
Geçen seneki Blog Ödülleri‘nde konferanslarına katılmış ve çok bilgilenmiştim-eğlenmiştim ( Tunç Kılınç sağolsun:) ). Bu sene de umuyorum ki keyifli geçsin.
Ben de bu etkinliğin bir parçası olmak için bö!2009′da “Teknoloji Kategorisi”e adayım!
Blog Ödülleri için oylama süreci başladı. 26 Nisan‘a kadar sürecek oylamaların sonuçları 2 Mayıs‘ta yapılacak ödül töreninde açıklanacak.
Bloguma destek vermek isterseniz yapmanız gereken oldukça basit.
- Blog Ödülleri’nde blogum için ayrılmış sayfaya tıklıyorsunuz.
- Sağ üst köşede görülen “Kayıt Ol” butonuna tıklıyorunuz.
- Açılan sayfada e-posta adresinizi ve siteye giriş için kullanmak istediğiniz şifreyi yazıyorsunuz.
- Belirttiğiniz e-posta adresinize gelen onay kodu linkine tıklıyorsunuz ve başlıyorsunuz oylamaya:)
Teşekkür ederim ve yarışan herkese de başarılar dilerim.
2009
CSS 3 Beni Çok Heyecanlandırıyor!
W3C, CSS3 için 4 yeni modül oluşturuduğunu duyurdu. Tamamen yeni olan bu özellikler daha önce Javascript-Flash ya da gif ile yapabildiğimiz şeyleri kısacık CSS kodlarıyla yapmamıza olanak sağlayacak.
CSS 3′ün Animasyon (Animation), Geçiş (Transitions), İki (2d) ve Üç Boyutlu (3d) Döndürme özellikleri gelecekte bir çok isteğimize cevap verecek ve işimizi kolaylaştıracak nitelikte görünüyor.
Animasyon (Animation)da yapılacak harket @keyframes anahtarıyla belirleniyor. Aşağıdaki örnekte animasyonun özelliklerini incelersek:
- “diagonal-slide” ismi verilmiş.
- Süresi 5 sn
- Tekrarlama sayısı 10
- (0,0) noktasından (100,100) noktasına gidiyor.
div {
animation-name: 'diagonal-slide';animation-duration: 5s;animation-iteration-count: 10;
}@keyframes 'diagonal-slide' {
from {left: 0;top: 0;}
to {left: 100px;top: 100px;}
}
Geçiş (Transitions) özelliği belirlenen bir sürede belirlenen bir değerden başka bir değere geçmeye yarıyor.
Değişiklik yapılabilecek özelliklerden bazıları: background, border, color, font, height, margin, opacity, padding, width, z-index
İki Boyut(2d) özelliği ise elemanları iki boyutlu uzayda hareket ettirmeye yarıyor.
Aşağıdaki kodu ve çıktısını görünce web sitelerinin geleceğinin ne kadar eğlenceli olabileceğini tahmin edebiliyorum:)
Kod 100px genişliğinde ve yüksekliğindeki bir div’i 80px sağa ve 80px aşağı hareket ettiriyor, genişliğini ve yüksekliğini 1.5 kat arttırıp 45 derecelik bir dönüş sağlıyor.
div {
height: 100px; width: 100px;
transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
}
Üç Boyut(3d) özelliği de tahmin edebileceğiniz gibi elemanları üç boyutlu uzayda hareket ettirmeye yarıyor.
Bu hareketi yaparken de bazı fonksiyonlardan yararlanıyor. Bunlardan bazıları:
- matrix(<number>, <number>, <number>, <number>, <number>, <number>) -> 2 boyutlu döndürme yapılan bir elemana belirlenen matris ölçülerinde döndürme yaptırır.
- translate(<translation-value>[, <translation-value>]) -> 2 boyutlu döndürme yapılan bir elemana belirlen vektör elemanlarına göre döndürme yaptırır.
- scale(<number>[, <number>]) -> 2 boyutlu ölçeklendirme yapılmış elemana verilen parametreler doğrultusunda 3. boyutta ölçeklendirme yaptırır.
- rotate(<angle>) -> 2 boyutlu döndürme yapılan bir elemana açıyla belirleyerek döndürme hareketi yaptırır.
Tüm fonksiyonları incelemek için konunun ilgili bölümüne göz atabilirsiniz.
Okuduğum kadarıyla CSS3′ün hareketlilik konusunda getireceği yenilikler hakkında anladıklarımı paylaşmaya çalıştım. Henüz uygulamasını yapamadığım için eksiklerim vardır, ama bu kadarı bile hayalgücümü zorlamaya ve beni heyecanlandırmaya yetiyor:)
Ne yazık ki CSS3′ün özellikleri tüm tarayıcılar tarafından henüz desteklenmiyor. Tam destek için önümüzde 3-5 yıl olabileceğini tahmin ediyorum. Özellikle bu yarışta Internet Explorer’ın çok çaba sarfetmesi lazım.
Umarım tarayıcıların CSS3 desteği benim öngörümden daha kısa zamanda tamamlanır da kodlamanın da tadından yenmez:)
CSS3 ile ilgili daha fazla bilgi almak isterseniz aşağıdaki sitelere de bir uğrayın derim:
- CSS3′e giriş: W3C resmi CSS3 tanıtım sayfası (İngilizce)
- Border, background, color, Text efektleri… hakkında CSS3 uygulamaları (İngilizce)
- CSS3 ile yapılabileceklere değinen Türkçe makale
- CSS3 ile sizi tanıştıracak 5 uygulama (Türkçe çeviri)
- Web tasarımlarınız CSS3 ile geleceğe hazırlayın (Türkçe çeviri)
Ofiste 2dk
İnsanoğlu açtır, gözü dönmüştür. Tatlıyı buldu mu götürür, tozunu bile bırakmaz:)
Ofise gelen çikolata kaplı çilek-kivi çılgınlığı bize ancak 2 dakika dayanabildi.
Utanmasak marulu da yiyecektik ya artık bi dahaki sefere:)
Devamını oku >>
2009
Dinamik Metin Değiştirme (Text Replacement) Yöntemleri
1. sIFR 2.0
2. cufón
3. P+C DTR
4. FLIR
5. SIIR
6. DTR
7. sIFR 3
8. Typeface.js
9. IFR
10. PHP+CSS DTR
CSS Image Replacement [static]
swfir
Haydi Gülümse web sitesi yayında
Özürlüler Vakfı tarafından gerçekleştirilen; 1400 özürlü çocuğun ameliyat edilmesi, toplumun özürlüler-özürlülük hakkında bilinçlendirilmesi amaçlarıyla gerçekleştireceği Haydi Gülümse kampanyasının web sitesi yayında.
Tasarımı Erkan Mazıcıoğlu tarafından yapılan sitenin (X)HTML-CSS kodlamasını da ben yaptım çorbada tuzum olsun diye:)
Flash uygulama ise Onur Şimşek‘e ait.
2009
