basarozcan

Posts Tagged ‘css

Olmazsa Olmaz Serisi No:2 – CSS Reset

Posted by: basarozcan on: 28 Ekim 2008

http://nettuts.com/tutorials/html-css-techniques/weekend-quick-tip-create-your-own-resetcss-file/

Şeker gibi menüler

Posted by: basarozcan on: 17 Ekim 2008

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

Posted by: basarozcan on: 15 Ekim 2008

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 [...]

Olmazsa Olmaz Serisi No:1 – Otomatik Tamamlama

Posted by: basarozcan on: 7 Ekim 2008

İ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ş [...]

CSS Sprite ile bandwidth tasarrufu

Posted by: basarozcan on: 27 Eylül 2008

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 transparanlık yaratalım

Posted by: basarozcan on: 24 Eylül 2008

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

CSS Menüleri tek tıkla hazırlayın!

Posted by: basarozcan on: 2 Eylül 2008

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 [...]

Sprite’lar nedir? Nasıl kullanılır?

Posted by: basarozcan on: 21 Haziran 2008

CSS Sprite’ları konusunda daha önce bir yazıyla karşılaştınız mı? Sprite’ın bir içecektan olmaktan başka web tasarımından nasıl bir terim olduğunu biliyor musunuz? Eğer bilmiyorsanız Sprite nedir hep beraber öğrenelim…
Sprite nedir?
Sprite bir imaj dosyasıdır. Ama bu imaj dosyanın diğerlerinden tek bir farkı vardır o da birçok imaj dosyasını içinde bulundurmasıdır. Örneğin ülke bayraklarının herbirini tek tek [...]

CSS ile düğme yapımı

Posted by: basarozcan on: 3 Haziran 2008

Table ayraçlarını kullanırken, arkaplan resmi atamasıyla kolaylıkla yapabildiğimiz birden fazla resim dosyalı butonları ilk zamanlarda div ile yapmak zor olmuştu. Fakat çok basit bir mantığı olan div yöntemini woork‘de ele almışlar. Yukarıdaki butonlarda kullanacağımız 1 düğme arkaplanı ve 7-8 tane de özel ikon gerekmekte.
<a class=”button” href=”#”>
<span class=”delete”>Bu yazıyı sil</span>
</a>
Burada gördüğünüz <a> bizim kapsayan elemanımızı span [...]

CSS Grid Sistemleri

Posted by: basarozcan on: 2 Haziran 2008

Table ayraçlarını kullandığınız sitenizi div ile yeniden tasarlamak istiyorsunuz fakat div’in bir çok özelliği ile uğraşamayacağınızı düşünüyorsanız ilaç gibi bir çözümümüz var artık. YAML Builder sayesinde birkaç fare hareketiyle sitenizin genel görünümünü oluşturabilecek ve CSS kodunuzu da biçimlendirebileceksiniz. YAML haricinde biraz daha komplike bir sisteme sahip olan mindplay ya da 960grid de kullanılabilir.