Latest Entries »

Olmazsa Olmaz Serisi No:1 – Otomatik Tamamlama makalem ile OOS’ye başlamıştım. İlk olmazsa olmazımız otomatik tamamalama özelliğine sahip bir arama kutucuğu geliyordu. Serimizin ikinci gerekli malzemesi ise bir çok yerde belki de duyup ne olduğunu çözemediğiniz “Reset CSS”!

Reset CSS Nedir?
Bir CSS tekniği diyebileceğimiz CSS Reset ile IE, Mozilla, Safari vb. tarayıcılarda öntanımlı olarak gelen bazı padding, margin, h1, h2, h3 tarzı verileri sıfırlayarak yazacağımız css kodunun her tarayıcıda aynı şekilde görünmesini sağlar. Bu kod bütününü CSS dosyanızın başına koyarak sitenize eklerse

Başlıyoruz…İlk adım Margin ve Padding’leri sıfırlamak

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input, th, td
{
margin: 0; padding: 0; border: 0; outline: none;
}

View full article »

Blogger’a erişim engellendi!

Benim de Webrazzi’den öğrendiğim haber sonrası üzülerek belirtiyorum ki birçok Türkün içerik hazırladığı ve kazanç elde ettiği blog hizmeti olan Blogger’a erişim mahkeme tarafından engellendi. Hiçbir neden gösterilmeyen bu kapatmalar artık fazlasıyla sinir bozucu olmaya başladı. Özgür düşüncenin bastırılmasını gözle görebilmek mümkün. Umarım en kısa sürede bu yanlışlığı farkedip erişimi açarlar.

Şeker gibi menüler

Web Sitesi Tasarımlarımızın yapıtaşları olan menülerin her gün göze daha güzel gelen versyonları yayınlanıyor. Bugün Fatih Hayrioğlu‘nun güncesi sayesinde yeni bir menü tasarımından haberim oldu. Kaliteli grafikleri ile şeker gibi bir görüntüsü olan bu menüyü CSS Drive’ın örnekler sayfasında bulabilirsiniz.

Ayrıntılı Bilgi ve Demo Sayfası

Bukalemun CSS Düğmeleri

Geçtiğimiz günlerde StumbleUpon’da yeni siteler keşfederken karşılaştığım bir makaleyi paylaşmak istedim. Bu makalede sitemizde kullanacağımız farklı renklerdeki butonları 3 dosyada nasıl toplayacağımız anlatılıyordu.

İşin Mantığı:
Yapmamız gereken şey öncelikle beyazdan griye doğru rengi kayan (gradient) bir buton oluşturmak olacak. Bunu izleyen aşama ise butona saydamlık vermek. Saydamlık vererek arkaplana koyduğumuz rengin butonun rengi gibi görünmesini sağlayacağız.

Butonumuz
Butonumuzu tasarladıktan sonra 3 parçaya böleceğiz. ilk iki parça butonun sağ ve sol başları olacak. üçüncü parça ise butonumuz ne kadar uzarsa uzasın işe yaramasını sağlayacak olan 1 piksellik orta parçayı oluşturmak olacak. View full article »

İngilizcesi Autocompletion olan “Otomatik Tamamlama” sistemi, iki ya da 3 harfi input‘a grdikten sonra en yakın sonuçları bize anında gösteren ve en uygununu seçmemizi sağlayan bir sistemdir. Javascript sayesinde yeni bir sayfa yüklemeden yapabileceğimiz bu fonksiyon facebook‘un arkadaş profilini arama kutusunda kullanılır.

Otomatik Tamamlama sistemi, site içi arama fonksiyonunun sıkça kullanıldığı sitelerde bulunmalıdır. Örneğin bir alışveriş siteniz var ya da kelephir.net gibi günlük ürünleri indeksleyen bir siteye sahipseniz daha önceki ürünlerin bulunabilmesi için otomatik tamamlama sistemini kullanabilirsiniz. View full article »

Tasarım Kütüphaneleri

Sayfalarımızı tasarlarken aslında birçok öğe tasarladığımızın farkında değiliz. Örneğin bir arama kutusu, twitter bloğu, 404 hata sayfaları… Her bir elementi tasarlarken zaman zaman ilham alır ve internetteki popüler öğeleri tasarımlarımızda kullanırız. İşte Pattern Tap ve Elements of Design siteleri, internetteki güzel ve ilham alınacak sitelerin menülerini, 404 hata sayfalarını, yorum sayfalarını kısacası her bir öğesini parçalayarak sitelerinde kategorilere ayırarak sunmuşlar. Elements of Design ve Pattern Tap sitelerinde tüm bu elementleri görerek tasarımlarınız için esinlenebilirsiniz.

Daha önce ben de CSS Sprite’ların kullanılışı hakkında “Sprite’lar nedir? Nasıl kullanılır?“adında bir makale yazmıştım. Bugün çeşitli RSS yayınlarını okurken CSSgirl sitesinde yazılmış olan CSS Sprite makalesi gözüme çarptı ve ne kadar ayrıntılı işlediklerini görünce sizle paylaşmak istedim. Sprite tekniği ile rollover bir menünün nasıl yapıldığını en ince detayına kadar anlatmışlar.

Buradan okuyabilirsiniz.

CSS ile web sitelerimize albeni katmaya devam ediyoruz. Bu seferki tekniğimiz ise basit ama kullanışlı olduğu kadar tarayıcılar ile arasında birçok problem olan transparency.

Nerede Kullanalım?
Transparanlık özelliğini kullanabileceğiniz başlıca yer arkaplanında büyük resimler bulunan sitelerdir. Arkaplanda bulunan resimlerin tam olmasada flu bir şekilde görünmesini istiyorsanız transparanlık değeriyle oynayarak bu işlemi gerçekleştirebilirsiniz. Üstelik her div için ayrı ayrı tanımlayabilir, hepsinin transparanlığına ayrı değer verebilirsiniz.

Nasıl Kullanırım?
Transparanlık özelliği birçok tarayıcıda var fakat o kadar uyumsuz ki her tarayıcı için ayru bir özellik tanımlamanız gerekmekte. Çok bir kod fazlalığı yaratmıyor korkmayın. En fazla 3 satır kaybınız olacak.

#transparan {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

İşte bu kadar basit. Buradaki filter:alpha IE ile uyumu, -moz-opacity eski nesil mozilla tarayıcıları ile uyumu, -khtml safarinin eski versyonları ile uyumu sağlayan kodlar. opacity ise tüm tarayıcıların ortak olarak benimsediği transparency kodudur. 0.5 transparanlığın koyuluğunu belirtir. 0.0 ile 1.0 arasında olmalıdır. filter:alpha(opacity=50) kodunda ise yüzde cinsinden belirtilmiştir. 0 ile 100 arasında olmalıdır.

Artık siz de sitelerinize transparanlık kazandırabilirsiniz.

Not: Bu yazıda CSS-Tricks kaynak olarak kullanılmıştır.

CSS-Tricks’den jQuery dersleri

Web Tasarımı hakkında bir çok ipucu ve rehberi yayınlayan CSS-Tricks son zamanlarda Screencast’leri ile bizi oyalamakta. Bu screencast’lerden bence en iyileri ise jQuery’nin uygulamalı ve detaylıca anlatıldığı Video1 ve Video2. jQuery öğrenmek isteyenler bu fırsatı kaçırmasınlar derim…

Uzunca bir süredir blog’um üstünden paylaşım yapmamıştım. Bunda biraz tatil modunun da etkisi olsa gerek. Bu günkü yazımızda Yatay ve dikey CSS menüleri hazırlamamızı sağlayan bir Web Uygulamasını tanıtacağız. CSS Menu Builder ile menü arkaplanının tipini ve menü tuşlarının şeklini belirledikten sonra renkler üstünde dilediğiniz oynamaları yaparak sitenize en uygun menüyü tasarlamanız mümkün. Şu an menü arkaplanı için kısıtlı seçim olsa da işinizi rahatlıkla görecektir.