bildirgec.org

imaj yok,javascript yok.yalnızca css kullanılarak yapılan sade ve hoş menüler.

css menüler

Önizleme indir

işte size bomba gibi bir liste. web tasarım ve yazılım konusunda tek sayfada hemen hemen bütün konuları bulmanız mümkün. konuları aşağıda belirttim.

html ve css konusunda aklınıza gelen ne varsa burada;

• html tutorials (html tutorials)
• css tutorials (css tutorials)
• html tagları (html tags)
• html renk kodları ve örnekleri (html color codes and swatches)
• html sıkça sorulan sorular (html faq)
• web içerik erişebilirliği (web content accessibility)
• ulaşılabilir tablolar (accessible tables)
• html kontroller (html validators)
• html version information (html sürüm bilgileri)
• html editörleri (html editors)
• css editörleri (css editors)
• doctype (döküman türleri)
• formlar (forms)
• çerçeveler (frames)
• css karakter uyumluluğu (css compatibility charts)
• css düzenleme ve örnekler (css layouts & examples)
• css articles (css makaleleri)
• css forumlar (css forums)
• css menüler (css menus)
• css yuvarlak köşeler (css rounded corners)

Yazılım için derlenmiş konular ise şöyle;

• perl kaynakları (perl resources)
• php kaynakları (php resources)
• python kaynakları (python resources)
• mysql kaynakları (mysql resources)
• asp kaynakları (asp resources)
• javascript kaynakları (javascript resources)
• dhtml kaynakları (dhtml resources)
• cgi kaynakları (cgi resources)
• forum kaynakları, vbulletin, phpBB (forum packages)
  online araçlar;
  
• arama motorlarına site kayıt (site submission)
• seo (search engine optimisation)
• browsers (tarayıcılar)
• sayaçlar (counters)
• web trafik raporları (web traffic reports)
• web araçları (web tools)
• 404
• telif hakkı (copyright)
• robots.txt

tasarım için;

• photoshop kaynakları

tüm bunlara nereden ulaşacağız kayodeok.btinternet.co.uk sitesinin derlemiş olduğu muhteşem kaynaktan.
buyurunuz iyi günlerde kullanın.

gelişmiş css hileleri

websayfalarının vazgeçilmezleri haline gelen CSS menuler , javascript galeriler , jQuery eklentilerivs. derken bütün bunlara görsel güzellikleri verebilmemizi sağlayan CSS TRİCKs yani css hilerleri giderek uzmanlaşıyor…

gelişmiş css menu

işte websitenizde kullanabileceğiniz bir kaç css menu hilesi ya da hüneri ben buna css’in marifetleri diyorum… 😉

gelişmiş css efeklerle iletişim menusü

Kaynak , CSS ve XHTML kodları için tılayınız
Örnek uygulamayı incelemek için buraya bakabilirsiniz.

CSS ve JQuery ile hazırlanmış farklı tarzlardaki menüleri sizler için derledim. menülerin nasıl hazırlandığını menünün linkine tıklayarak öğrenebilirsiniz, isterseniz kodları direkt indirerek sitenize entegre edebilirsiniz.

1- Kutu dışında JQuery Navigasyon Menü – demo – download

2- gösterişli drop down menü jquery & css – demo

Bir Css Menü

Web 2.0 ‘ın iyice yerleşmesiyle mobil sitem için menü arayışına girdim aradım taradım peki birşey bulamadım. Tam o sırada öyle bir site buldum ki css ile ilgili herşey içerisinde mevcut fakat ben hoşuma giden 17 tanesini ayırdım ve bildirgeç okurlarıyla paylaşmaya karar verdim.Bazılarını görünce vay be diyebilirsiniz.Neyse lafı fazla uzatmadan linkleri vereyim.

Burada web sitelerinizde kullanabileceğiniz en iyi menü örneklerini bulabilirsiniz. Css‘in yetenekleri ile birbirinden güzel çalışmalar ortaya çıkmaktadır.

Bu yazı size mükemmel menü tekniklerini öğretebilecek ve çok iyi bir kaynak olacaktır.

1 – The menu menu

Bu, farklı büyük bir menü örneğidir. Menünün üzerine geldiğiniz zaman hemen yanında alt menüler görünüyor.

2 – Pure CSS hover menu

bu css tekniği ile dikey alt menüyü görebileceksiniz.

simple menu

mavi ve yeşil tonlarında resim kullanmadan basit bir örnek

vert-one

sadece 1 resim kullanarak yapılan bir örnek

saturday

photoshoptan alınan renk örnekleriyle yapılan örnek

dolphin

Web geliştiricileri kullanıcı dostu dikey ve yatay gezinti (navigasyon) menülerini CSS kullanarak oluşturabiliyorlar. JavaScript sayesinde de bu menüler daha etkileşimli, yanıt veren ve değişken hale geliyorlar.

Bugünkü yazıda jQuery, mooTools gibi JavaScript kütüphanelerinin yanısıra CSS ile oluşturulmuş 10 mükemmel çoklu seviye gezinti menüsü tekniğine yer vereceğiz.

1. Vimeo Benzeri Navigasyon Oluşturmak

Vimeo.com üzerindeki menünün neredeyse aynısı Janko tarafından geliştirilmiş durumda. Bu menünün en güzel tarafı menü öğesi üzerine fare imleci getirildiğinde menünün beliriyor olması. Ayrıca menünün sunduğu farklı arama seçenekleri sayesinde menü elementlerini eleyebiliyorsunuz.

Bu rehberin temelinde sırasız listeye dayalı CSS tabanlı bir açılır menü yatmaktadır. Menünün yapısı aşağıdaki görsel üzerinde açıklanmış.

Sizin de göreceğiniz üzere UL elementinin dört öğesi bulunuyor. Bunlardan ilki kısa bir alt menü içeren logo. Ardından giriş bağlantısı, alt menü içeren yardım bağlantısı ve yine alt menü çeren arama öğesi yer alıyor. Her bir alt menü, dahili olduğu menü elementinin üzerine fare imleci götürüldüğünde beliriyor.

• Demo | İndir | Detay

Günümüzde CSS kullanmayan site sayısı gittikçe azalırken buna ters orantılı olarak gelişen CSS araçlarının sayısı da gün geçtikçe artıyor. Her yeni bir araç, CSS geliştiricilerinin projeler üzerinde harcadıkları zamanı azaltmaya ve daha verimli kodlama yapmalarını hedefliyor.

İşte tam da bu noktada Back to Essentials web sitesi, İnternet üzerindeki CSS araçlarına yönelik bir liste hazırlamış. Ben de ilgilenen bildirgec okurları için bu yazıyı yayımlama gereği hissettim. Umarım işinize yarar.

Yazıtipleri

Typetester

Ekranda farklı yazıtiplerini karşılaştırabilmenize yarayan bir uygulama.

Em Calculator

Em Calculator, küçük bir JavaScript aracı olup genişletilebilir ve erişilebilir CSS tasarımları oluşturmanıza yardımcı oluyor. Pixel değerindeki verileri bağıl em birimlerine dönüştürüyor.

CSS’yi kodlamak kolay olabilir ancak buna rağmen her kodcuyu delirtebilecek bazı konseptleri de bulunmaktadır. Bu yazımızda kimilerine göre zor olan ancak anlaması oldukça kolay olan CSS derslerini bir araya getirerek CSS bilginizi bir adım daha ileriye taşımanıza yardımcı olacak dersleri inceledik.

1. CSS Sekmeler ve Navigasyon

1.1. Genişleyebilen CSS Sekmeleri Dersi
Genişleyebilir CSS sekmelerinin anlamı, sekmenin içerisindeki metnin uzunluğuna göre genişleyebilen sekme başlıklarıdır. Kodun özünde start.gif ve end.gif adında iki adet görsel bulunuyor. start.gif görseli boyutu genişletmek için kullanılırken end.gif görseli değişmeden kalıyor.

1.2. Gelişmiş CSS Menüsü
Bu rehberde Photoshop’taki watercolor efektini nasıl tasarlayabileceğiniz anlatılmış. Bu rehber size adım adım bir menü tasarımını nasıl kırpabileceğinizi ve ardından CSS kullanılarak nasıl onları bir araya getirebileceğinizi gösteriyor. Pek çoğunuz muhtemelen dikey ya da yatay menünün CSS ile nasıl kodlanacağını bilyorsunuzdur. Gelin şimdi bunu bir sonraki seviyeye taşıyarak CSS’nin position özelliğini kullanan gelişmiş bir menü tasarlayalım.