Tasarladığınız sitelerde kullanmak üzere ikonlar bulmak genelde zor bir iştir. Renk uyumu, şekillerin uyumu, boyutlar gibi birçok etken devreye girer ve uygun bir ikon bulmanızı zorlaştırır. Bu dertten kurtulmamız için açılan IconPot sitesi yaklaşık 3 bin tane ikonu tasarımcıların beğenisine sunuyor. Tamamen ücretsiz olan bu ikonları ayrıca ticari amaçlarla da kullanmanız mümkün. Telif hakkı talep edilmemekte.

Javascript ile yapılan birçok örneği zaman zaman bloglarda görmekteyiz. genelde yeni keşfedilen ve yapılan javascript uygulamaları büyük boyutlu ve bandwidth canavarı oluyor. Daha sonra kodlar çeşitli kullanıcılar tarafından yeniden düzeltilerek minimum boyuta indiriliyor. Daha önce yazılarımda örnek verdiğim Michael Leigeber de bu minimalize etme işinden hoşlanıyor olacak ki “1KB’lık akordiyon menü“,”1KB’lik kayan menü” ve “2KB’lik tooltip” gibi popüler uygulamaları minimalize etmiş.

Leigeber‘in son projesi ise birçok sitede rastladığımız slideshow uygulaması olmuş. 5KB’lık çok hoş bir slideshow kodu hazırlayan leigeber’in örneğine buradan ulaşabilirsiniz.

sIFR, sayfalarımızda göze hitap etme fonksiyonunun yanında Arama motorları tarafından indekslenebilme özelliği ile bir anda tasarım dünyasının göz bebeği konumuna geldi. 1-2 dezavantajı bulunmasına rağmen hala çok etkili bir rakip üretilemedi ve flir, typeface.js gibi rakipleri karşısında üstünlüğü elinde tutuyor. Bu kadar yararlı bir araçtan maksimum performans olmak isteyenler için Jonathan Neal tarafından bir jQuery eklentisi geliştirilmiş. bu eklenti sayesinde jQuery fonksiyonlarını sIFR tekniği ile birlikte kullanarak maksimum verim elde edilebilmesi sağlanmış.

İstenilen yere sIFR uygulatma ve sIFR’li yazıyı silme, zoom yapma, yazı renginde kod değiştirmeksizin oynamalar yapma ve sayamayacağım birçok özellik bu eklenti ile birlikte jQuery kullanıcılarının hizmetine sunulmuş.

Demosunu incelemek ve denemek istiyorsanız jQuery Sifr Plugin sayfasına alalım sizi.

RSS Reader’ımda tasarım dünyasındaki son gelişmeleri takip ederken Enhance blogunda tanıtımı yapılan Pulse eklentisini gördüm. jQuery‘nin bir eklentisi olan pulse sayesinde, sadece “animated gif” dosyaları ile yapabileceğimiz ve statik olarak kullanabileceğimiz yanıp sönen yazıları, resimleri ve kutuları oluşturabilmemiz mümkün. Uyarı durumlarında çok yararlı olan bu yanar-sönerli eklenti James Padolsey tarafından geliştirilmiş. Eğer bu tarz bir eklentiye ihtiyacınız varsa ilgili makaleyi incelemenizi öneririm. Pulse eklentisi sadece 6KB yer kaplıyor ve jQuery’e ihtiyaç duyuyor.

Pulse’un renk değişimi yapabildiği css elemanları:

• color
• border-color
• background-color
• opacity

Zaman zaman bildirgeç‘te paylaşımlarda bulunuyorum. Geçtiğimiz gün sIFR ile bir sitenin yazıtiplerini düzenlerken yeni bir program ile karşılaştım. Bu program Adobe Flash’a ihtiyaç duymadan 3 tık ile sIFR’in swf dosyasını oluşturabilmeyi sağlıyordu. İşte bu yüzden CoffeeCup’ın geliştirdiği sIFR Font Maker programını bildirgeçe yazarak web tasarımcıların işini kolaylaştıracak bir yazılım ile tanıştırdım. Bu programa alternatif olarak online bir uygulama olan sifrgenerator.com‘u da tasarımcılara öneririm.

Bildirgeç’teki sIFR Font Maker yazım
Bildirgeç’teki köşem

Not: Birkaç gün içinde sIFR ve alternatifi olan FLIR ve typeface teknikleri hakkında bir makale yayınlayacağım. Bu konuya ilgili olanlar benim örneklerime de bakabilirler.

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

Elemanlara Hükmedelim

body
{
line-height: 1;
font-size: 88%;
}

h1, h2, h3, h4, h5, h6
{
font-size: 100%;
padding: .6em 0;
margin: 0 15px;
}

ul, ol
{
list-style: none;
}

img
{
border: 0;
}

Birkaç özel gerekli float bilgisi koyalım

.floatLeft
{
float: left;
padding: .5em .5em .5em 0;
}

.floatRight
{
float: right;
padding: .5em 0 .5em .5em;
}

İşte bu kadar basit. Floatları ayarlarken uygun float sınıflarını kullanırsanız sayfanızda bir standart olur.
Dİpnot: Makalede Nettuts’un Create Your own Simple Reset CSS yazısından derleme yaptım. Kodlar da buradan alınmıştır.

Kaynak Kod

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ı

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.

Son uygulamamız ise butona arkaplan olarak bir renk atamak ve butonu istediğimiz yerde kullanmak olacak.

HTML Kodu

<div class="btn btn1"><a href="#">Arama Butonu</a><span></span></div>

CSS Kodu

body {
	margin: 0;
	padding: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
}
.btn {
	float: left;
	clear: both;
	background: url(images/btn_sol.png) no-repeat;
	padding: 0 0 0 10px;
	margin: 5px 0;
}
.btn a{
	float: left;
	height: 40px;
	background: url(images/btn_orta.png) repeat-x left top;
	line-height: 40px;
	padding: 0 10px;
	color: #fff;
	font-size: 1em;
	text-decoration: none;
}
.btn span {
	background: url(images/btn_sag.png) no-repeat;
	float: left;
	width: 10px;
	height: 40px;
}
.btn1 { background-color: green; }
.btn2 { background-color: red; }
.btn3 { background-color: orange; }

Div ayracımıza btn ve btn1 ekleyerek butonumuzu başlattık. A ayracı ile orta kısmının yazımız kadar uzun olmasını sağladık. Span ayracını açıp kapatarak sağ taraftan butona bit komutunu verdik.

İşte bu kadar basit bir yöntemi 3 ufak png24 yada png8 dosyası ve kısa html&css kodları ile halletmemiz mümkün.

Yazının aslı Sohtanaka.com adresinde bulunmakta.

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

Devthought sitesinde hem otomatik tamamlama hem de facebook tarzı birçok ismin aynı anda eklenebildiği input , kullanılabildiği alanların fazlalığı ve işlevselliği bakımından Olmazsa Olmazlar Serimin 1 numarasında bulunuyor.

Kaynak Kod || Demo

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.