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.

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…

Birçok kez sıklıkla takip ettiğimi söylediğim woork‘de yayınlanan yeni yazı tüm tasarımcıların elinde bulunması gereken bir kaynak yazı olmuş. 25 farklı mükemmel rehberi bir araya toplayan Antonio Lupetti’nin yazısına buradan ulaşabilmek mümkün.

Çoğu sitede iletişim formlarında gördüğüm bir özellik var. Formu doldurup yolla tuşuna bastığımız zaman bizi hiçbir sayfaya yönlendirmeden aynı sayfa içinde form yollanıyor ve kullanıcıya yollandı uyarısı veriliyor. Bu güzel ve kolay iletişim formunu yapmak için neti araştırırken karşıma buradaki rehber çıktı. Sitenize ajax ile yeni zöellikler katan bu formu yapmak için ilgili rehbere göz atabilirsiniz.

Demo’ya bakmak için tıklayın.

Popüler ajax kütüphanelerinden biri olan Mootools için rehber niteliği taşıyan 20 yabancı kaynak şu sitede listelenmiş. Mootools‘u kullanmak isteyip de nereden başlayacağını bilemeyenler için fevkalade bir kaynak. Sitelere buradan ulaşabilirsiniz.

Siz de benim gibi jQuery’nin nimetleriyle yeni tanışanlardan iseniz kesinlikle aşağıda sıralayacağım kaynaklara göz atmalısınız. Yeni başlayanlar için oldukça doyurucu bilgiye sahip olan kaynaklar jQuery hakkındaki bilgilerinizi katlayacak.

• 15days of jQuery - bu site jQuery hakkında birçok örnek kod ve rehber içermekte.
  
• Learning jQuery – aynı şekilde rehber ve örnek kodlar bulunduran nitelikli bir blog.
• jQuery for Designers – daha ileri seviye rehberler bulunan bir site.
• How jQuery works – jQuery’nin çalışma prensipleri yani basit kullanımları hakkında makaleleri bulunan site
• jQuery Tutorials for Designers – ileri düzey 10 uygulamanın bulunduğu bir sayfa.
• jQuery in 15 minutes – slayt gösterisi ile jQuery’i tanıyın.
• jQuery Cheat Sheet – jQuery terimlerinin bulunduğu referans sayfası.

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 ise ikonu oraya ekleyecek elemanı ifade edecek.

a.button{
background:url(img/button.gif);
display:block;
color:#555555;
font-weight:bold;
height:30px;
line-height:29px;
margin-bottom:14px;
text-decoration:none;
width:191px;
}
a:hover.button{
color:#0066CC;
}

Yukarıdaki CSS kodunda gördüğünüz gibi arkaplana geniş ve yuvarlak köşeli button.gif resmini ekledik.


.delete{
background:url(img/delete.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}

Son kodumuz ile de delete class’ına sahip olan span elementine minik ikon ekledik. Orjinal yazıya ulaşmak ve kullanılan resimleri indirmek için ilgili yazıya bakabilirsiniz.

This article is written by Antonio Lupetti.

Bazen sitemize uygun renklere ya da dizayna sahip bir RSS ikonu bulmak oldukça zor oluyor. Ne kadar uğraşsak da sitemize uyduramıyoruz ve kendimiz bir tane yapmayı uygun buluyoruz. İşte şimdi keşfettiğim sitede RSS çıkartmalarının nasıl yapılacağı detaylıca anlatılmış. Photoshop’a ucundan köşesinden bulaşan biri için basit sayılabilecek bir rehber. Buradan buyrun…

İnternette bir İtalyan dostumuzun sitesi var ki, bence en iyi tasarım blogu. Bahsettiğim blog Woork. Bence her tasarımcının woork’ün RSS kaynağına abone olması gerekir. Her yazısında güzel tasarım örneklerine yer veren ve detaylı anlatımıyla herkese hitap eden Antonio Lupetti bu sefer bogunda Pastel renklerle yapılan menü yapımını anlatmış.

CSS, html ve javascript kodlarıyla menünün yaratılışı bu adreste detaylıca anlatılmış.