bildirgec.org - Codename47 - beğendikleri

yazılımcılar ve tasarımcılar için eğlenceli t-shirt tasarımları

Codename47 — Wed, 09 Dec 2009 17:34:00 GMT

herkes benzersiz ve özgün tasarlanmış t-shirt giymeyi seviyor.
moda olan durum bildiren t-shirtler mevcut ruh hali içinde çevrenizdekilere bir fikir vermesi yanı sıra kalabalık ortamlarda fark edilmenizi de sağlar.
bu bildiride yazılımcı ve tasarımcıların ruhlarını yansıtan t-shirt tasarımlarına göz atacağız.

rumplo - you are the css to my html t-shirt

collapse-design.co.uk

daha fazla t-shirt tasarımı isterseniz buraya bakabilirsiniz.

Bu yazı Codename47 tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

autorun.inf virüslerinden kurtulun!

Codename47 — Tue, 29 Apr 2008 20:59:00 GMT

USB disklerin kullanımındaki artış ile başımıza yeni bir bela musallat oldu. Autorun.inf ile bulaşan (sisteminize harici bir harddisk, flash disk ya da CD/DVD taktığınızda bu mediaların içinde autorun.inf isimli dosya varsa varsa windows, bu dosyayı çalıştırarak, sizin rızanız olmadan içinde yazan komutları çalıştırır) virüsler.

Bu virüsler eminim çoğunuzun sistemine bulaşmıştır. Ben bugun sistemimde virüs programımın çalışmadığını (norton, avast ve nod32 yazılımlarının hiçbiri bu badireyi engelleyememiş) gizli klasörlerin görüntülenmediğini, ve ayarlardan gerekli düzeltmeyi yapsam da bu düzeltmenin aktif olamadığını farkettim. araştırdığımda sorunun amvo isimli bir virüs olduğunu öğrendim.

Bundan korunmak için :

1- sisteminizin autorun özelliğini kapatın. şuradaki yönlendirmeleri uygulayın Ancak bu adım, sisteminizdeki virüs sebebiyle aktif olamayabilir. Bu nedenle bu adımı sistemine virüs bulaşmamış şahsı muhteremler uygulayabilir. virüs bulaşmış olanlar, beni takip edin.

(@ZZombie'nin yorumundan ek) ayrıca harici bir disk taktığınızda her seferinde autorun özelliği inaktif yapmak için SHIFT tuşuna da basılı tutubilirsiniz.ancak bu yok kesin bir çözüm getirmeyebilir. ayrıca kuşkulu diskleri çift tıklayarak açmayın. sağ tıklayıp aç deyin.

(@cxc'nin yorumundan ek)ve eğer sadece USB disklerde autorun'ı kapatmak isterseniz
buradaki kayıt defteri yaması ile bunu gerçekleştirebilirsiniz

2- Buradaki adımları uygulayarak manuel olarak amvo dosyalarından kurtulun

3- 2. adımı otomatik olarak uygulayan kill_amvo_virus_usb_en.rar aracını indirin ve çalıştırın. bu uygulama ile dosyalarınızın görünülebilirliği de sağlanmış olacak. Araç çalışırken bir çok onay kutucuğu çıkacak. sakin olun, onaylayın tümünü. bitiminde ekran kararabilir, yine sakinliğinizi koruyunuz.
UYARI :bu adımda bir sorun rapor edilmiştir(@Doguhan BEYOGLU). lütfen adımları dikkatli uygulayınız.adımlarda bahsedilen yöntemlere aşina değilseniz uygulamayınız.

4- bir başka arac olan smart_av.exe' yi de indirerek sisteminizi sağlam kazığa da bağlayabilirsiniz.

5- ek bir virüs silme aracı da @matasoy tarafından önerildi.http://rapidshare.com/files/111382168/Temizle.rar.html. ancak amvo için yoketme becerisi var mı bilemiyorum. test etmedim bu konuda.

6- @kenanartun başka bir araç önermiş amvo ve diğer virüsler için garanti çözüm olarak : pardus

ek bilgiler için teşekkürler.

Bu yazı Codename47 tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

99 Yüksek Kaliteli (X)HTML / CSS Web Şablonu

Codename47 — Wed, 30 Sep 2009 06:41:00 GMT

Daha önce [1] [2] [3] yüksek kaliteli css ve xhtml web şablonlarını görmüştük. Dünya genelinde bu çalışmaları ücretsiz olarak bizlere sunan tasarımcılara teşekkürlerimizi iletiyoruz. Şablonları kullanmadan önce kullanım talimatlarını ve lisans anlaşmalarını okuduğunuzdan emin olun. Aşağıda yüksek kaliteli xhtml ve css şablonlarına ulaşabilirsiniz.

1. T-20

test | indir

2. Shape

test | indir

3. Your Business

test | indir

4. Solitude

test | indir

5. Fashion Club (Registration Required)

test | indir

6. O’No! Typography

test | indir

7. Projection

test | indir

8. Fresh Restaurant

test | indir

9. Jungleland 1.0

test | indir

10. SindromK

test | indir

11. Environment Brand Design

test | indir

12. Colourise 1.0

test | indir

13. Charcoal (Registration Required)

test | indir

14. H Free Software

test | indir

15. Dark and Sleek Web Design

test | indir

16. Photo Portfolio

test | indir

17. FACING

test | indir

18. Symisun

test | indir

19. Luvbold

test | indir

20. freetemplates

test | indir

21. 2 Breed

test | indir

22. Extreme Georgia

test | indir

23. Electronix

test | indir

24. Catalogio

test | indir

25. theARTofTYPE

test | indir

yazının devamı için buraya tıklayın.

kaynak: colorburned.com | instantshift.com

yazılarımı takip edebilirsiniz.

blog | twitter | friendfeed | delicious | rss

Bu yazı Codename47 tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Web Tasarımcılar İçin Gayet Faydalı 15 "Css Grid Yerleşimi" Üreteci

Codename47 — Wed, 03 Jun 2009 08:43:00 GMT

Tasarımcılara yardımcı olacak bir sürü çevrimiçi üreteç bulunuyor. Örneğin favicon, arkaplan, buton, kimlik kartı en popüler üreteçler arasında yer almaktadır.

Aşağıda Css Grid şablonları oluşturabileceğiniz sitelere ulaşabilirsiniz.

1 - Grid Layout Generator by Pagecolumn

2 - Grid Generator by DesignByGrid

3 - Blueprint Grid CSS Generator

4 - Grid Generator by netProtozo

5 - Grid Designer (featured in Creative Review magazine)

6 - Grid System Generator

7 - YUI CSS Grid Builder

8 - Variable Grid System

9 - YAML Builder

10 - Layout Generators by Pagecolumn

11 - Fisheye

12 - CSS Layout Generator by CSSCreator

13 - Firdamatic

14 - CSS Source Ordered Variable Border 1-3 Columned Page Maker

15 - CSS Layout Generator by CSSPortal

kaynak: webdesignbooth.com
diğer yazılarım

Bu yazı Codename47 tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

flaş oyun geliştirme dersleri ve fla dosyaları

Codename47 — Tue, 05 May 2009 08:35:00 GMT

Flash Game Development Tutorials & FLA Files

flaş oyun geliştirmek ve actionscript öğrenmek isteyenler için seçilmiş, 35+ flaş oyunun yer aldığı bu liste ile derslere, oyunların demolarına ve fla dosyalarına ulaşabilirsiniz.

Tavuk ve Yumurta Oyunu

Chicken And Eggs Game

demo - kaynak dosyalarını indir

ActionScript 3 ile basit bir kaçış oyunu

Simple Avoider Game Tutorial

Demo - Kaynak dosyalarını indir

AS3 Karakter Hareketi: Helikopter Oyunu

AS3 Character Movement: Helicopter Game

Demo - kaynak dosyalarını indir

ActionScript ile basit tahmin Oyunu

Simple Guessing Game with Actionscript

Demo - kaynak dosyalarını indir

Lazer Çarpışmasını kontrol etmek

Laser Collision Checking

demo - kaynak dosyalarını indir

Arcade Oyun

Building an Arcade Game

Demo - kaynak dosyalarını indir

Yarış Oyunu

Flash Racing Game Tutorial

demo - kaynak dosyalarını indir

Adam asmaca

Hangman Game

demo - kaynak dosyalarını indir

Fırlatma (Mancınık) Oyunu

Catapult Game

demo - kaynak dosyalarını indir

Balon vurma

Balloon Shooting Game

demo - kaynak dosyalarını indir

devamını görmek için buraya tıklayabilirsiniz.

ilginizi çekebilir
30 Flaş (Actionscript 3.0) Dersi
Ücretsiz Flash Dersleri (Video) Sunan 19 Site
5 mükemmel flash uygulaması

Bu yazı Codename47 tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

16 Ücretsiz ve Mükemmel Dreamweaver Uzantısı

Codename47 — Mon, 02 Mar 2009 19:05:00 GMT

Bu yazı, Adobe Dreamweaver için jQuery ve Prototype API uzantısı, PayPal, Skype ve Google araçları uzantıları gibi kullanışlı ve her Dreamweaver kullanıcısının işine yarayacak olan Dreamweaver uzantılarını (Dreamweaver extensions) içermektedir. Umarım işinize yarar.

Atomz Arama Motoru: Bu uzantı sayesinde web sitenize Atomz Aramasını ekleyebilirsiniz. Atomz sunucuları üzerinde depolanan çekirdeki kodun sitenize entegre edilmesi sayesinde siteniz üzerinde güçlü bir arama motoruna kavuşabilirsiniz. Sitenizde 10,000 sayfaya ya da belgeye kadar olan içeriğin arama motoru tarafından 30'un üzerinde dilde aranabilmesini sağlayabilirsiniz.

jQuery API Uzantısı: Eğer jQuery kullanıyorsanız Dreamweaver için geliştirilen bu eklentiye gerçekten ihtiyacınız olacaktır. Eklentinin kurulu olduğu Dreamweaver üzerinde çok daha az miktarda kod yazabilir, bunun yanısıra uzantının sunduğu kod renklendirme, kod parçacıkları ve tüm jQuery ve jQuery UI özelliklerini içeren kod ipuçlarından faydalanabilirsiniz.

Skype İçin İletişim Araçları: Bu uzantı büyük ya da küçük tüm kurumlar için Skype'ın ucuz iletişim seçeneklerini web ortamlarına dahil edebilmenizi sağlıyor.

MovableType HTML Düzenleyicisi: MovableType sitelerini HTML düzenleyiciniz üzerinde daha hızlı ve daha verimli bir şekilde geliştirebilirsiniz.

YouTubizer: YouTube videolarını kolayca ve hızlıca, doğrudan Dreamweaver üzerinden sitenize dahil edin.

Google Araçları: Dreamweaver için Google Araçları herhangi bir kodlamaya gerek kalmadan Google servislerini kullanabilmenizi sağlıyor. Sitenize özgü Google araması oluşturabilir, Google Haritalar servisi ile yol tarih edebilir, Google Mobile için altı farklı aracı kullanablir ya da Google Checkout ile ürünlerinizi satabilirsiniz.

Adobe Kuler Uzantısı: Adobe Kuler, herhangi bir projeye ilham kaynağı olabilecek renk şemaları oluşturabilen bir web uygulamasıdır. Bu uzantı Adobe Kuler renk paletlerine doğrudan Dreamweaver üzerinden erişebilmenizi sağlıyor.

DotNetNuke SkinObjects: Bu Dreamweaver uzantısı DotNute Skinning işlemini gerçekten kolaylaştırıyor. Uzantıyı kurduktan sonra tüm DotNuke skin nesneleri ve onların özniteliklerine Dreamweaver üzerinden ulaşabiliyorsunuz.

WordPress Dreamweaver Uzantısı: TAGStention bir Dreamweaver uzantısı olup WordPress şablon etiketlerini tema dosyalarınıza entegre edebilmenizi sağlıyor. Eper bir etiket herhangi bir parametreyi gerektiriyorsa, sihirbaz üzerinden ilgili parametreyi girmeniz isteniyor.

RubyWeaver: Bu uzantı, Ruby ve Rails için Dreamweaver üzerinde bir IDE görevini üstleniyor. Uzantının orjinali RidingTheClutch.com sitesnden Rob Cameron'a ait.

Stil Değiştiricisi: Garip bir Dreamweaver uzantısı olan Style Switcher uygulamanın kullanıldığı saate göre stil dosyasını değiştiren bir uygulama.

Joomla Template Oluşturucusu: Joomla! 1.5'i Öğrendiniz ve şablon oluşturmak için sabırsızlanıyor musunuz? O zaman bu eklentiyi kullanarak seri bir şekilde Joomla! şablonları oluşturabilirsiniz.

Dreamweaver İçin Prototype API Uzantısı: Bu uzantı, jQuery API uzantısı ile benzer özellikleri içeriyor ve Prototype çatısını kullanarak uygulama gelişirirken size zaman kazandırmayı hedefliyor. Prototype API uzantısı kod renklendirme, kod parçacıkları ve tüm Prototype fonksiyonlarını içeren kod ipuçlarını içeriyor.

Dreamweaver İçin PayPal eTicaret Araç Kiti: Bu eklenti sayesinde kurumsal web sitenize kolayca eTicaret özellikleri kazandırabilirsiniz. Kolayca ödeme düğmeleri ve temel alışveriş sepeti özelliklerini web sitenize entegre edebilirsiniz.

Dreamweaver İçin Drupal API Uzantısı: Drupal API uzantısı yazacağınız kod miktarını önemli miktarda azaltıyor ve Drupal dosyalarını düzenlerken kullanılan salt metin görünümünden sizi kurtarıyor. Eğer Drupal ile ilgileniyorsanız ya da kullanıyorsanız, ya da kullanmak istiyorsanız, o zaman bu eklentiye gerçekten ihtiyacınız olacaktır.

Eğer sizin de kullandığınız ücretsiz Dreamweaver eklentileri varsa yorumlarınızla paylaşın.

Kaynak: Woork

Bu yazı Codename47 tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

FLV Online Converter

Codename47 — Mon, 04 Dec 2006 11:34:00 GMT

http://vixy.net/flv_converter adresindeki web uygulaması sayesinde FLV uzantılı dosyaları AVI, MOV, MP4, MP3 veya 3GP türlerine hızlı bir şekilde dönüştürebilirsiniz.

Örneğin Youtube'daki bir videonun linkini kopyalayıp yapıştırın, dönüştürmek istediğiniz formatı seçin ve Start butonuna tıklayın. Bu kadar kolay :)

Bu yazı Codename47 tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Dreamweaver ve Widget'lar

Codename47 — Fri, 20 Feb 2009 12:59:00 GMT

ön bilgi: spry'den bahsetmiştik... bu bildiride diğer framework'lerin widget'inden bahsedeceğim. yalnız bu widget'ları indirmek için adobe'ye üye olmalısınız. i̇ndirdiğiniz widget'ları kurabilmek içinse adobe extension manager'a sahip olmalısınız. normalde adobe extension manager dw kurulumla beraber kurulur. "bende yok" diyorsanız, buradan indirebilirsiniz.

spry'de bahsetmediğimiz bir widget:
spry rating: hani şu genelde bloglarda değerlendirme yıldızları vardır ya işte onu oluşturan widget ama aksiyonları siz vermeniz gerekiyor. bu widget sadece oluşturuyor. [i̇ndi̇r]

şimdi de spry dışındaki adobe'nin önerdiği diğer framework'lerden bahsedelim.

yahoo alternatifi (örnekler)
dreamweaver (dw) içn yahoo tarafından yapılan bu widget'ları yahoo kendi sitesinde de kullanıyor. yahoo treeview: bu widget ağaç görünümü menüyü oluşturuyor. bu sistemi genellikle sitelerin yardım bölümünde görebilirsiniz. [i̇ndi̇r]

yahoo tooltip: bu widget yazının üstüne imleç geldiği zaman div içinde açıklama çıkmasını sağlıyor. sanırım linkz reklamlarını bu tip bir sistemle yayınlıyor. [i̇ndi̇r]

yahoo tabviewer: spry'de de bulunan sekmeli sistem. fakat yahoo'nun ki sanki daha estetik. [i̇ndi̇r]

yahoo slider: bu widget kaydıraç oluşturuyor. bu kaydıraça fonksiyon atayarak değişik yerlerde kullanabilirsiniz. (örn. ses seviyesi) [i̇ndi̇r]

yahoo menu: bu widget güzel bir menü oluşturuyor ki spry menubar'a göre biraz farklı. mantık aynı ama sitilleri farklı. ayrıca kanımca yahoo'nun ki daha toplu görünüyor. [i̇ndi̇r]

yahoo datetable: bu widget standart tablonun yanı sıra dinamik tablo oluşturmanızı sağlıyor. bu sayede tablo başlıklarına tıklayarak azalan/çoğalan şeklinde sıralama yaptırabiliyorsunuz. [i̇ndi̇r]

yahoo calendar: bu widget adındanda anlayabileceğiniz gibi takvim oluşturuyor. takvim i̇ngilizce ama calender-min.js dosyasını değiştirerek türkçe yapmak mümkün. [i̇ndi̇r]

yahoo button: bu widget klasik butonlardan sıkılanlar için yapılmış olsa gerek. yahoo'nun sitesindeki sitilde buton oluşturuyor. [i̇ndi̇r]

jquery alternatifi (örnekler)
aslında jquery dw'den bağımsız bir framework. şurada bu konu hakkında daha fazla yazı var. şuradaysa bir arkadaşımız bunun 1.2.6 sürümü üzerinde durmuş. fakat konumuz dw'de widget'lar olduğu için sadece dw'yi kapsayan kısımdan bahsedeceğim.

jquery ui tabs: spry tabbed panels ile aynı işi yapan widget. sadece sitili farklı. [i̇ndi̇r]

jquery ui dialog: bu widget aslında oldukça hoş şeyler sunuyor. bu widget'la bir kutucuk oluşturuyorsunuz ve bu kutucuğu kullanıclar kapatabiliyor, taşıyabiliyor ya da küçültüp büyütebiliyor. [i̇ndi̇r]

jquery ui slider: yahoo slider widget'iyle aynı işi yapan widget. fark sitil... [i̇ndi̇r]

jquery ui calendar: yahoo calendar'a göre farklı bir takvim wigdet'i. bir formda textfield içine tarihi kolayca seçmek için ideal. [i̇ndi̇r]

jquery ui accordion: i̇şte bu widget favorilerim arasında. sekmeli sisteme göre daha hantal görünsede güzel bir sistem. adıyla oldukça uyumlu bir widget. sekme yerine akardiyon şeklinde panel açılıyor. [i̇ndi̇r]

thickbox galery: resim görüntüleme için kullanışlı bu widget resme tıklandığında resmi farklı bir pencerede açmak yerine olağan pencerede div kutucuğu içinde açıyor. resim dışındaki alanlarada karartma efekti uyguluyor. [i̇ndi̇r]

mootools alternatifi (örnekler)
jquery gibi buda aslında dw'den bağımsız bir framework. şurada diğer yazılar, şuradaysa bir arkadışımızın paylaştığı mootools 1.2 var. biz dw&widget ile devam edelim...

ken burns slideshow: resimleri slayt halinde görüntülemek için ideal bir widget. [i̇ndi̇r]

phatfusion sortabletable: yahoo datetable ile aynı işi yapan widget... [i̇ndi̇r]

phatfusion slideshow: mootools'un 2.ci slayt resim görüntüleme widget'i. ama bence diğeri daha güzel. tabi karar sizin... [i̇ndi̇r]

phatfusion slider: yahoo slider ve jquery ui slider ile aynı fakat onlardan bir farklı varki skala değerini kutucukta sayısal olarak yazıyor. [i̇ndi̇r]

phatfusion roundedcorners: bu widget ile oluşturulmuş div'in içine koyduğunuz diğer div'lerin ve resimlerin köşeleri yuvarlak oluyor. estetikliği sağlamak için kullanışlı. [i̇ndi̇r]

phatfusion multibox: thickbox galery sadece resimler içindi. phatfusion multibox widget ise resimlerin yanı sıra mp3'leri, videoları ve sayfaları da açabiliyor. üstelik kendi oynatıcıları içinde. bu oynatıcıları adobe flash ile düzenleyebilirsiniz. [i̇ndi̇r]

phatfusion imagemenu: bu menü widget'i diğer menülerin babasını oluşturuyor :) benim en sevdiğim menü türü olan menüyü oluşturduğumuz da önplana yazılar değil resimler çıkıyor... sitesinde menüye büyük alan bırakanlar bu widget'i değerlendirmeli. [i̇ndi̇r]

farklı bir altarnatif! [google gadget'ları dw'de]
bu altarnatif igoogle kullananların gadget'ları kapsıyor. ama bu expension'u google değil pixelplant.to yapmış. Gadget'lar ise farklı farklı kişiler tarafından yapılmış. google'de bunları destekleyip, kullanıyor. bu expansion ile oluşturacağınız gadget'ların hepsini değiştiremiyorsunuz çünkü bir script yüklemesi yapmıyor. i̇frame mantığı... Aslında o kadarda kullanışlı değil... [i̇ndi̇r]

şimdilik bu kadar. hatam varsa affola. saygılarımla...

Bu yazı Codename47 tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

öğrenilmesi gereken 15 css hilesi

Codename47 — Tue, 27 Jan 2009 09:25:00 GMT

Web tasarımcıları ve geliştiricileri olarak zamanla, anahat hedeflerimize ulaşmamıza yardımcı olması için pek çok CSS hilesini ve ipucunu öğreniriz. Bu tekniklerin bir listesini yapmaya kalksanız, projenizin yoğunluğuna göre yüzlerce hileyi bir arada toplamanız gerekebilir. Ancak bu yazıda bulacağınız 15 önemli css hilesi, web geliştiricilerinin karşılaştığı sorunların pek çoğunu giderebilecek kalitededir.

1. Bağıl (relative) pozisyonlanan element içerisinde mutlak (absolute) pozisyonlama
Mutlak pozisyonlanan bir elementi bağıl pozisyonlanan bir element içerisine yerleştirdiğinizde, onun pozisyonu kendisine en yakın olan üst elementin pozisyona göre belirlenecektir. Bu, özellikle bir elementi sayfanızda belirleyeceğiniz bir noktaya sabitlemek istediğinizde oldukça kullanışlı bir hiledir, örneğin başlık (header) damgaları (badge) gibi.

Pozisyonlama hakkında daha fazla bilgi alabileceğiniz siteler:

2. Z-index ve pozisyonlama
z-index kimi zaman geliştiriciler arasında çözümü zor olan bir bulmacaya dönüşebilir. Genellikle bir div elementini diğer bir elementin üzerine yerleştirmek için çok yüksek z-index değerleri atayan tasarımcılarla karşılaşırsınız. Burada unutmamamız gereken, z-index elementinin "position" değeri atanmamış bir element üzerinde çalışmayacak oluşudur. Eğer siz de uyguladığınız z-index kuralının işlevsel olmadığını düşünüyorsanız, kuralı uyguladığınız elemente 'position: relative' ya da 'position: absolute' değerlerini ekleyin.

Z-index hakkında daha fazla bilgi alabileceğiniz siteler:

3. Margin Auto
Bir şablon üzerinde 'margin: auto' değerini kullanmak, o elementin tarayıcı üzerindeki pozisyonunu, tarayıcının kullanıldığı sistemin ekran çözünürlüğüne bakılmaksızın ortalamak için mükemmel bir yöntemdir. Ancak 'margin: auto' değeri uygulandığı elementin 'width' değeri belirlenmediği sürece çalışmaz. Bu ayrıca satıriçi (inline) elementlerde 'margin: auto' değerinin 'display: block' kullanılmadan işlevsel olmayacağı anlamına da gelir.

Margin Auto hakkında daha fazla bilgi alabileceğiniz siteler:

4. Padding Elementini Dikkatlice Ve Doğru Bir Şekilde Kullanın
CSS ile çalışmaya başladığımda genellikle yaptığım hatalardan birisi de onun tüm efektlerini ve CSS Kutu Modeli'ni gözardı etmektir. Kutu modeline göre 'padding' değerinin uygulandığı elementinin genel genişliğini etkilediğini aklınızdan çıkarmayın. Bunu gözardı ettiğinizde elementlerin olması gerektiği yerde olmadığını göreceksinizdir. Örneğin:

#div {
width:200px;
padding: 30px;
border:2px solid #000;
}

Bunun toplam genişliği 264px olacaktır (200 + 30 + 2 + 2). Bunun yanısıra 'padding' özelliğinin 'margin'in aksine negatif değerler içeremeyeceğini unutmayın.

Padding hakkında daha fazla bilgi alabileceğiniz siteler:

W3 Padding Properties

text-indent kullanarak bir metni gizlemek
Sitenizde logo olarak bir resim kullandığınızı varsayalım. Bu resmin H1 etiketi içerisinde olması SEO açısından önemlidir, ancak H1 tagı içerisinde, arama motorlarının okuyabilmesi için bir metin olmasını da isteriz. Bazıları 'display: none' kullanmak isteyebilir ancak bu yöntemi kullanırsak logo resmini h1 etiketinden ayırmamız gerekecektir. 'text-indent' ve negatif değerler kullanarak ziyaretçiler için bir resim, arama motorları için de okunabilecek bir metin kullanmak mümkündür.

h1 {
text-indent:-9999px;/*Metni gizle, SEO için tut*/
margin:0 auto;
width:948px;
background:transparent url("images/header.jpg") no-repeat scroll;
}

Bu kod sayesinde kullanılan metnin herhangi bir çözünürlükte görünmeyeceğinden ancak onun yerine bir resmin görüntüleneceğinden emin olabiliriz. Bu yöntem ayrıca ekran okuyucularının ilgili metni görebilmesini sağlayacaktır, ancak "display: none" için bu geçerli değildir.

text-indent kullanarak metin gizleme yöntemleri hakkında daha fazla bilgi alabileceğiniz siteler

SitePoint - Using text-indent

6. IE Double Float Margin Hatası
Eminim bununla pek çoğumuz boğuşmuşuzdur, zira en sık kullanılan CSS "hilelerinden" birisi de budur. Eğer bu hata ile daha önce karşılaşmadıysanız hemen özetleyelim: IE6'da üzerine 'margin' uygulanmış yüzen (float) bir element kullanıyorsanız, bunun ilgili tarayıcı üzerinde doğru pozisyonlanmadığını göreceksiniz. Ne şans ki IE6'nın bu hatasını gidermek çok basit. Tek yapmanız gereken 'display' özelliğinin diğerini aşağıda gösterildiği şekilde 'inline' olarak belirlemek.

.yourClass {
float: left;
width: 350px;
margin: 20px 0 15px 100px;
display: inline;
}

Bu değişikliğin diğer tarayıcılara hiçbir etkisi olmayacaktır, zira elementin kendisi zaten yüzen bir element olduğundan satır içi görüntülenir, ancak her nedense bu teknikle IE6'daki bu sorun giderilmektedir.

IE'nin marj hatası hakkında daha fazla bilgi alabileceğiniz siteler:

Double Margin Causes and Fixes

7. CSS Kullanarak SPAM'a Karşı Savaşın
Şablon açıklamınızı iyileştirecek güzel bir teknik. CSS-Globe.com sitesinden Alen Grakalic CSS kullanarak nasıl CAPTCHA benzeri bir korumayı sitenize entegre edebileceğinizi anlatmış. İlgili tekniğin uygulandığı bir form şu şekilde olsun:

<label for=”Name”>Ad:</label>
<input type=”text” name=”name” />
<label class=”captcha” for=”captcha”>Cevabınız?</label>
<input type=”text” name=”captcha” id=”captcha” />

'captcha' ID'si için CSS ile bir arkaplan resmi kullanıyoruz. Bu tekniği çözebilmek için spam betiklerinin öncelikle HTML elementini bulması, CSS'nizi taraması, seçicileri karşılaştırması ve ardından doğru seçici ile ona bağlı olan arkaplan imajını bulmasının ardından ilgili imajı okuması gerekir. Bu yöntem oldukça güvenlidir zira pek çok spam betiği bunu başarabilecek kapasitede değildir. Bu yöntemin bir kötü özelliği CSS'nin etkinleştirilmediği tarayıcılarda kullanıcı ne yapacağını bilemez.

Spam'a karşı CSS İle Savaş Açmak hakkında daha fazla bilgi alabileceğiniz siteler:

Fighting spam with CSS

8. IE6 Üzerindeki Saydam PNG Sorununu Gidermek
Hepimizin IE6 üzerindeki saydam PNG sorununun can sıkıcı olduğu konusunda hemfikir olduğuna eminim. Buna yönelik Internet üzerinde pek çok çözüm bulunmaktadır ve bunlar karmaşık JavaScript kodlarından Microsoft'un kendi filtrelerini kullanmaya kadar değişiklik göstermektedir. Unutmayın ki bu tekniklerin pek çoğu Microsoft'un AlphaImageLoader özelliğine dayanmaktadır.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);

IE6'nın PNG saydamlık sorunu hakkında daha fazla bilgi alabileceğiniz siteler:

9. CSS Çoklu Tarayıcı Saydamlığı
İster inanın ister inanmayın tüm tarayıcılar üzerinde CSS'nin saydamlık elementini doğru bir şekilde kullanmak mümkün. Bu teknikle IE, Firefox, Safari, Opera ve Netscape Navigator gibi eski tarayıcıları bile kapsayabiliriz. Chris Coyler'in bu konuda yazılmış mükemmel bir makalesi bulunuyor.

.yourClass {
filter:alpha(opacity=50);/*IE İçin Gerekli*/
-moz-opacity:0.5;/*NN gibi eski Mozilla tarayıcıları*/
-khtml-opacity: 0.5;/*Safari'nin Eski Sürümleri ve "KHTML" tarama motorları*/
opacity: 0.5;/*FF, Safari ve Opera*/
}

Bu kod doğrulanmayacaktır ancak bu özelliği kullanmak isteyen kullanıcılar için bu pek bir sorun teşkil etmez.

CSS Opacity hakkında daha fazla bilgi alabileceğiniz siteler.

10. CSS Konumlandırlabilir Görseller (CSS Image Sprites) Kullanın
CSS Konumlandırılabilir Görseller birden fazla CSS görselinizi tek bir seferde yükleyebilmeniz için mükemmel bir yöntemdir. Bu yöntemle hem sunucuya bindirilen yük azalır hem de şablonunuzun dosya boyutunda önemli bir düşüş gözlenir.

CSS Konumlandırılabilir Görseller birden fazla görsel elementin tek bir görsel üzerinde depolanması ile oluşturulur. Ardından CSS kullanılarak arkaplan pozisyonu, genişliği ve yüksekliği gibi CSS değerleri ile görüntülemek istediğimiz görseli seçeriz.

Konumlandırılabilir Görseller hakkında daha fazla bilgi alabileceğiniz siteler:

11. IE6'yı desteklemek için Koşullu Yorumlar (Conditional Comments) Kullanın
Web geliştiricileri IE'nin bazı özel sürümlerini desteklemek için yeni CSS kuralları ve komutları oluştururlar. Eğer koşullu yorumlar hakkında bilginiz yoksa, aşağıdaki kod içerisinde yer alan stil şablonu, sadece IE 7 ve altındaki tarayıcılarda çalışacaktır.

<!--[if lte IE 7]>
<link rel="stylesheet" media="screen" href="styleIE.css" />
<![endif]-->

Bu kod HTML dosyanızın HEAD kısmına yerleştirilir. Eğer CSS IE'de çalışmıyor görünüyorsa, CSS seçimlerinizde daha doğrudan hedefleyen CSS komutlarını kullanmayı deneyin.

12. CSS Özgüllüğü
Yukarıda da belirtildiği üzere CSS stilleri belirli özgül sırasını takip eder ve hangi değerin hangisinin üzerine yazacağını belirlemek ,için puanlama kullanır. Nettuts'ta yayımlanan bu makalede CSS için puanlama değerleri açıklanmış. Değerler aşağıdaki gibidir.

Elementler: 1 puan
Sınıflar: 10 puan
Belirleyiciler: 100 puan
Satıriçi Stilleme: 1000 puan
Şüpheye düştüğünüzde stil tanımlamalarınızda daha keskin olmaya çalışın. Ayrıca gerektiğinde hata düzeltme işlemleri için !important değerini de kullanabilirsiniz.

CSS Özgüllüğü hakkında daha fazla bilgi alabileceğiniz siteler:

13. Tüm tarayıcılarda minimum yükseklik değerini kullanabilmek
Bir arabirim üzerinde çalışırken genellikle bir element için en düşük yükseklik değerini belirleme ihtiyacı hissederiz ve ardından ilgili yüksekliği, dahilindeki içerik sığmadığında otomatik olarak arttırabilmek isteriz. Ne yazık ki her zaman olduğu gibi IE min-height değerini doğru bir şekilde yorumlamamaktadır. Ancak min-height hızlı hilesi adı verilen bir çözümümüz var. Kod şu şekilde:

#yourId {
min-height:300px;
height:auto !important;
height:300px;/*Needs to match the min height pixels above*/
}

Sade, işlevsel ve doğrulanabilir bir kod. Bu örnek ayrıca '!important' özelliğinin kullanışlı olduğu sayılı örneklerden birini teşkil ediyor.

min-height hilesi hakkında daha fazla bilgi alabileceğiniz siteler:

Using the min height fast hack

14. * HTML hilesi
Eğer IE'ye özgü stil şablonlarına bağlantı vermek istemiyorsanız, o zaman * html hilesini kullanabilirsiniz. Kusursuz bir dünyada HTML elementi daime ana elementtir, bu sebeple HTML'den önce herhangi bir element bulunamaz. Buna rağmen IE, bunun mümkün olduğunu iddia eder. Bu sebeple eğer IE üzerinde bir elementi hedeflemek istersek onu bu şekilde gerçekleştiririz:

* html body div#sideBar {
display:inline;
}

html hilesi hakkında daha fazla bilgi alabileceğiniz siteler:

15. Kayan Kapılar Tekniği
Navigasyon düğmeleri için görsel kullanmanın oluşturduğu önemli problemlerden birisi de istemcinin metninin olması gerektiğinden uzun olma ihtimali ve bunun da düğmenin sınırlarını aşması ya da sınırları dahiline sığmamasıdır. İki görsel ve CSS kayan kapılar tekniği kullanarak içerisindeki metnin uzunluğuna göre genişleyip kısalabilecek düğmeler oluşturabiliriz. Bu tekniğin ardında yatan fikir, her düğme için iki adet görsel kullanmak ve ardından bu görselleri CSS'nin arkaplan tanımlamma özelliği ile düğmelere entegre etmektir. Örneğin:

HTML Dizisi
Başlık Metni

CSS
a.myButton { background: transparent url('right.png') no-repeat scroll top right; display: block; float: left; height: 32px; /* Görsel Yüksekliği */ margin-right: 6px; padding-right: 20px;/*Görsel Genişliği*/ /*Other Styles*/ } a.myButton span { background: transparent url('button_left.png') no-repeat; display: block; line-height: 22px; /* Görsel Yükseliği */ padding: /*İstediğiniz değer ile değiştirin*/ }

Kayan kapılar tekniği hakkında daha fazla bilgi alabileceğiniz siteler:

Ve işte size şablon hazırlarken yardımcı olabilecek 15 CSS tekniğinin de sonuna geldik. CSS tasarımcılar için mükemmel bir araçtır zira kodumuzla daha yaratıcı olabilmemizi ve kendi tekniklerimizi oluşturabilmemize olanak sağlar. Sizin de sık kullandığınız CSS teknikleri var mı? Listeye eklemek istediğiniz teknikler neler olabilir? Yorumlarınızla paylaşın.

Kaynak: ThemeForest

CSS Hileleri ve İpuçları İle İlgili Yazdığım Diğer Yazılar

Bu yazı Codename47 tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

En İyi 65 mooTools Eklentisi

Codename47 — Mon, 26 Jan 2009 18:55:00 GMT

Hazır sözü 2008'in En İyi JavaScript Kaynakları'ndan açmışken jQuery'nin pratikliği karşısında dimdik duran ve kimilerine göre jQuery'nin pabucunu yakında dama attıracak olan bir başka JavaScript kütphanesi mooTools'dan bahsetmeden olmaz.

Bu yazımda, bugüne kadar yayımlanan en iyi 65 mooTools eklentisini sizlerle paylaşmak istiyorum. Listede olmayan ve sizin de beğenerek kullandığınız mooTools eklentileri varsa paylaşmaktan çekinmeyin.

SmoothScroll

SmoothScroll kullanıcıyı sayfanın belirli bir bölgesine yumuşakça yönlendiriyor. Normalde bu tip bağlantılar kullanıldığında tarayıcı herhangi bir efekt olmadan sayfayı doğrudan istenen bölgeye taşır. SmoothScroll işte bu eylemi yavaşlatarak kullanıcının gözüne daha hoş gelecek şekilde yeniden tanımlıyor.

MultipleSelect

MultipleSelect HTML çoklu seçim kutucuklarına özel stil eklemenizi sağlıyor. Üstelik birden fazla öğe seçmek için CTRL tuşuna basılı tutmanız da gerekmiyor.

Typewriter Effect

MooTools kullanılarak oluşturulmuş güzel görünümlü bir daktilo efekti.

MooColumns

MooColumns bir MooTools 1.2 sınıfı olup içeriği birden fazla sütuna kolayca ve çabucak bölümlendirebilmenizi sağlıyor.

Yatay kaydırmalı haber bandı

Bu haber bandı çok basit olup web projelerine entegre edilmesi çok kolay. Newsvine Live panel'den esinlenen bu eklentinin göze oldukça hoş gelen bir efekti mevcut.

MooScroll

MooScroll bir MooTools 1.2 sınıfı olup kaydırılabilir divler üzerindeki kaydırma çubuğunun görünümünü özelleştirebilmenizi sağlıyor.

Giriş Panelini Göster/Gizle

Sayfanın üst kısmından aşağı yumuşakça kayan güzel bir giriş paneli.

Kroppr

Kroppr güçlü bir betik olup ziyaretçilerine imaj kırpma desteği sunmak isteyen tüm site sahiplerinin işini kolaylaştıracak nitelikte. Diğer betiklerin aksine Kroppr resimleri döndürebilir, yakınlaştırabilir ve flash ya da java gibi herhangi harici bir eklenti kullanmadan imajları taşıyabilir. Kırpma işlemi kullanıcı seçiminden memnun olduktan sonra gerçekleştirildiğinden hem sunucuya bindirilen yük hem de kullanıcının işlem süresi azaltılmış oluyor. Kesinlikle önerilir.

Sayaç Eklentisi

Internet üzerinde ziyaretçinin bir işlemin sonucunu alabilmesi için bir süre beklemesini gerektiren ve bu esnada ekranda sayaç gösteren pek çok web sitesi bulunuyor, örneğin RapidShare. MooTools kullanılarak oluşturulan bu eklenti, sitenize benzer bir özelliği kolayca entegre edebilmenizi sağlıyor.

Twitter Emulation

Dünyanın her bir köşesindeki insanlar, Twitter'ı kullanımı çok kolay olduğu için seviyorlar, zira site üzerinde tek yapmanız gereken mesajınızı yazıp "Güncelle" düğmesine basmaktan ibaret. Pek çok kişinin bilmediği şey ise Twitter'ın işlevselliğini sitenize entegre edebilmenin aslında ne kadar kolay olduğu. PHP, MySQL ve MooTools JavaScript kullanılarak Twitter benzeri bir durum paylaşım sistemini sitenize kısa sürede entegre edebilirsiniz.

Fancy Navigation

Navigasyon menüleri genellikle sıkıcıdır, öyle değil mi? Çoğu zaman navigasyon menüsünün üzerine fare ile gelindiğinde bir imaj belirir. Peki bunun orijinalliği nerede? Bu makalenin yazarı MooTools kullanarak güzel görünümlü bir navigasyon menüsü oluşturmuş. Menünün üzerine fare imleci götürüldüğünde zincir efekti oluşuyor.

Select Box Factory 1.0

Alternatif bir çoklu seçim kutusu örneği. Arama kutusuna birkaç harf girerek, site üzerindeki öğelerden birini aramayı deneyin. Listenin hemen yanında benzer bir liste, açılır liste olarak belirecektir (bu geçişi sağlamak yaklaşık 5 saniye kadar sürüyor).

AutoCompleter

MooTools için hazırlanan bu otomatik tamamlama betiği metin önerme ve tamamlama özelliklerini bir arada sunuyor. Yerel, JSON ya da XML gibi farklı veri kaynaklarını desteklediği gibi farklı kullanıcı etkileşimleri, özel biçimlendirme, çoklu seçim, animasyon ve çok daha fazlası için desteği de bünyesinde barındırıyor.

mooSocialize

mooSocialize düğmesine tıkladıktan sonra, beğendiğiniz sosyal ağı seçebileceğiniz bir pencere beliriyor. Her bir sosyal ağ servis isminin yanında bulunan küçük resim, kullanıcının aradığı servisi kolayca bulabilmesini sağlıyor. Ama hepsi bu değil - bağlantılara tıkladığınızda bulunduğunuz sayfadan başka bir sayfaya yönlendirilmiyorsunuz, aksine seçilen sosyal ağ site üzerinde bir kutu içerisinde açılıyor. Kullanışlı ve kolay. Kutu üzerinde bulunan düğme aracılığı ile kutuyu gizlemek de mümkün.

SlideItMoo

SlideItMoo, imajlar için bir MooTools 1.2 kaydırıcısı. Pek çok tarayıcı üzerinde sorunsuz çalışan bu eklenti, JavaScript'in etkin olmadığı zamanlarda bile görünümü ve işlevselliğini bozmuyor. Tüm CSS stillemesi harici olarak yapılmış. Kaydırma işlemi hem ileri ve geri düğmeleri ile hem de fare üzerinde bulunan tekerlek aracılığı ile yapılabilir. Betik hem bir galerinin küçük resimlerini hem de reklam bannerlarını döndürmek için kullanılabilir. Betiği kullanım amacınızı değiştirmek de çok kolay, tek yapmanız gereken betiği sayfanıza eklerken kullanmak istediğiniz sınıfı belirlemek.

mooTools ile Yansıma (Reflection) Efekti

Bir ara popüler olan reflection.js'nin mooTools JavaScript çatısı için yeniden yazılmış sürmü. 2KB'dan küçük olan bu eklenti sayesinde sitenizdeki imajlar üzerinde herhangi bir oynama yapmadan onlara yansıma efekti ekleyebilmeniz mümkün hale geliyor.

MooTools Etkinlik Takvimi

Resmi olmayan MooTools Etkinlik Takvimi eklentisinin resmi sürümü. Halihazırda kullanılan web projelerine entegre edilebilen bu takvim, mooTools JavaScript çatısını kullanıyor. Şimdilik halen geliştirilme aşamasında olan bu betiğin şu anki hali bile pek çok kullanıcının işini görecektir.

AJAX Kullanıcı Adı Kontrol Mekanizması

Sitenize kayıt olmak üzere olan bir kullanıcının seçtiği kullanıcı adının sitede daha önce bir başkası tarafından alınmış olup olmadığını kontrol etmek için neden kullanıcıyı formu göndermek zorunda bırakasınız? AJAX ve MooTools 1.2 kullanılarak kullanıcı adı girildiği anda kontrol işleminin nasıl yapılabileceğini öğrenin.

Cam efektine sahip işlevsel navigasyon çubuğu

Ana menü üzerindeki bir sekmeye fare imlecinizi götürürken seçili olan sekmeye ait alt menü öğeleri görüntüleniyor. O sırada navigasyon çubuğunun sağ kısmında alt menüleri gizleyebileceğiniz 'Gizle' bağlantısı yer alıyor. Bağlantıya tıklandığında alt menü öğeleri güzel bir efektle gizleniyor ya da yeniden tıklandığında görüntüleniyor.

HTML Form İpuçları

Twitter benzeri bir karakter sayacı olan bu eklenti MooTools ile hazırlanmış. Giriş kutusuna karakter girdikçe, daha önceden tanımlayacağınız en yüksek karakter sayısı girilen karakter miktarına göre gittikçe azalıyor.

mooFlickr

Eğer Flickr istatistiklerinizi blogunuzda ya da web sayfanızda göstermek istiyorsanız bu küçük eklentiye ihtiyacınız olacaktır. Eklenti Flickr üzerinde gönderdiğiniz resimleri, sık kullandığınız etiketleri ve katıldığınız kullanıcı gruplarının bir listesini alabiliyor.

Göster / Gizle efektine sahip CSS dikey menü

Göster / Gizle efekti kullanılarak hazırlanmış ve göster/gizle efekti bulunan bir CSS dikey menüsü. Menünün ana öğeleri üzerine tıklandığında alt menü öğeleri bir efektle beliriyor.

mooSlide

mooSlide ile web siteniz üzerinde birkaç kaydırıcı elementini birden çağırabilirsiniz. Tek yapmanız gereken kaydırıcıyı bir sınıfa dahil etmek ve ardından betiğe o sınıfı tanıtmak.

MooFlow

Özünde bir resim galerisi olan bu eklenti, görünümü ile kendini benzerlerinden ayırıyor. iTunes'un CoverFlow özelliğinin web sitenizdeki resimlere entegre edebilmeniz için mükemmel bir eklenti.

AJAX MooTools Güvenli İletişim Formu
MooTools 1.1 çatısını kullanan bu iletişim formu form alanlarını kontrol ederek kullanıcıya eş zamanlı olarak girilen verinin doğru olup olmadığını bildiriyor. Örneğin İsim alanı sadece normal karakterleri, elektronik posta alanı girilen adresin bir elektronik posta adresinin karakterlerini içerip içermediğini ve mesaj alanı üzerinde de web sitesi adresinin girilmesini engelleyerek spam mesajların önüne geçilmesini sağlıyor.

Facebook Kaydırıcıları

Yumuşak bir kaydırma efekti.

Fotoğraf Galerisi

Büyüleyici bir interaktif fotoğraf galerisi (Demo burada)

Noob Slide

Güzel görünümlü bir başka resim galerisi.

Simple 3D Carousel

Gelişmiş bir 3B karusel.

Kaydırıcı

Yatay ve dikey çubuk ve kaydırıcısı.

Arkaplanı tıklayarak değiştirmek

Dinamik renk seçicisi - renk değiştiricisi. Renkler üzerine tıklandığında arkaplan değişiyor.

Pamoorama

Sayfa ilk yüklendiğinde resmin bir bölümünü gösteriyor. Ardından üzerine fare imleci götürülüp sürüklenerek imajın geri kalan kısımları görüntülenebiliyor. MooTools kullanarak panaromik efekt oluşturmak isteyenlere.

MooTools ile ipuçları

Güzel görünümlü bir ipucu tanıtımı.

JavaScript Resim Galerisi

Basit ama kullanışlı bir resim galerisi.

Basit bir Navigasyon Çubuğu

Basit ve kullanımı kolay bir navigasyon çubuğu.

Slidinglist

Ağaç dosya sistemi benzeri kayan bir navigasyon sistemi.

Multibox

Resim, Flash, Video, MP3 ve HTML destekleyen bir lightbox örneği.

Resim Menüsü

Üzerine fare imleci getirildiğinde imajın geri kalanını gösteren yatay bir menü.

Window Growl

Farklı bir ipucu eklentisi.

ReMooz

SqueezeBox'tan daha sade ve kolay olan bir eklenti. Resmin üzerine tıkladığınızda resmin orijinal boyutunu görebiliyorsunuz.

Accordions

Güzel görünümlü ve yumuşak geçiş efektleri olan bir navigasyon eklentisi.

Slideshow

En fazla özelliğe sahip olan en iyi resim galerisi / slayt gösterisi uygulamalarından birisi. Çok iyi bir eklenti.

mooSlide (lightbox'un yerine)

mooSlideBox, AJAX tabanlı küçük ve sade bir uzantı. Özellikle lightbox kullanmak istemeyenlerin ihtiyaçlarını karşılayacak türden.

Sayfa Yükleyicisi

Bir başka sayfadaki div'i geçerli sayfadaki div içerisine yükleyebilirsiniz.

textarea'yı genişlet

Sadece bir form oluşturmanız yeterli. Betik, textarea form alanının boyutunun kullanıcı tarafından değiştirilebilmesini mümkün kılıyor.

JavaScript Zaman Seçicisi

Çok kolay sürükle-bırak arayüzünü kullanan ilk zaman seçicisi.

JavaScript İle Hazırlanmış Seksi Yan Çubuk Kayan Menü Sistemi

Yumuşak ve evet, SEKSİ yan çubuk menüsü.

Slayt Gösterisi

Resimler arasında yumuşak geçiş efekti.

AJAX İle Hazırlanmış Giriş Formu

Kullanımı kolay bir giriş formu.

FancyUpload

Güzel görünümlü dosya gönderimleri için SWF AJAX ile birleşti.

Doğrulama

Sade bir form doğrulama mekanizması.

Dizilebilir Tablo

Tabloları dizin ve filtreleyin.

MooTabs - MooTools İçin Basit Sekme Sınıfı

MooTabs gerçekten çok küçük (3KB) ve adından da anlaşılabileceği gibi basit sekmeli navigasyon sistemi hazırlamak isteyenler için düşünülmüş. jQuery, MooTools gibi üçüncü parti JavaScript kütüphanelerini kullanmadan sekmeli içerik oluşturmak isteyenler için bir de bu var.

Sıralanabilir Liste Örneği

Sürükle-bırak desteğine sahip sıralanabilir liste. İşe yarar olabilir.

Takvim

Calendar (Takvim) bir JavaScript sınıfı olup form elementlerine erişilebilir ve kullanımı kolay tarih seçicileri ekler.

MooTools İle Yuvarlatılmış Köşeler

Sitenizde halihazırda bulunan divler üzerine yuvarlatılmış köşeler ekler.

Mediabox

Mediabox, "lightbox" tarzında bir pencere üzerinde flash, video ve html içeriğini görüntüleyebilmenizi sağlar.

Form Kontrolü
Formlar üzerinde farklı testler uygular ve hataları vurgular.

mooRainbow

mooTools çatısı altında inşa edilmiş bir renk seçicisi (color picker).

Lightbox

Geçerli sayfanın üzerinde beliren satıriçi resim penceresi.

SmoothGallery

Bu JavaScript galerisi ve slayt gösterisi sistemi sitenize sade ve yumuşak geçiş efektleri bulunan resim galerileri, slayt gösterileri, vitrinler gibi kullanışlı öğeler ekleyebilmenizi sağlar.

Popmenu

Arkaplan imajı yavaşça belirerek karaktersiz menülerinize canlılık katar.

MooWheel

Bu betiğin amacı JavaScript ve tuval nesnesi kullanılarak verinin görselleştirilebilmesine dair özgün ve kullanışlı bir örnek oluşturmak. Bu tip görselleştirmeler özellikle farklı nesneler arasındaki bağlantıları göstermek için kullanılabilir.

moo.rd

Bu bir dizi örnek uygulama moo.rd'nin nasıl çalıştığını ve sizin moo.rd ile nasıl çalışabileceğinizi gösteriyor. MooTools'un gücüne güç katmak için eşsiz bir uzantı.

Mootools Mocha UI

Mocha bir web uygulama arabirim kütüphanesi olup doğrudan MooToools JavaScript kütüphanesi üzerine inşa edilmiştir. Mocha grafiksel kullanıcı arabirim bileşenleri tuval etiket grafikleri ile oluşturulmuş çok gelişmiş bir kütüphane.

Kaynak: speckyboy

Bu yazı Codename47 tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage