Coder

21 Eylül 2012

Css ile linklere ikon resim ekleme

Bazen sitemizdeki bağlantılara daha fazla görsellik katmak isteye biliriz. Css ile halledebileceğimiz senaryo da bağlantının uzantısına göre renklendirip sağına resim ikon ekleye bilmekteyiz. İsteyen alttaki kodlarla sitesindeki tüm linkleri tek tek stil ekleyebilir.

Suffix selectors anlamında kullanılan uzantı seçici senaryosunu tam açıklamak gerekirse; sitenizde .psp, .exe, .rar vb. gibi dosya paylaşım linkleri olduğunu düşünün. Bu linkleri ziyaretçiye daha hoş göstermek için eklediğimiz link uzantısına göre linki renklendirip minik ikon resmi ekleyebiliriz.

Kodu kopyala yapıştır yaparsanız tam olarak çalışmayacaktır. background:url(winraricon.png) css dosyasının aynı dizininde olduğu için resimdeki gibi sorunsuzca çalıştı.

[cc lang="c#"]
a[href$=".rar"]{
background:url(winraricon.png) no-repeat right center;
color:#C00;
padding-right:20px;

}
[/cc]

Burada dikkat ederseniz olay [href$=".rar"] kodunda cereyan etmekte. Burada .rar uzantısı yerine veya ayrı bir link için css tanımladığınızda istediğiniz uzantıyı yazarak özel uzantı seçici oluşturabilirsiniz. Diğer dikkat edilmesi gereken nokta, seçtiğiniz resim boyutuna göre padding-right değerini ayarlamak oluyor.

07 Ekim 2011

Flash ta görünmez buton ile link vermek

Flash dünyasının en basit konusu ile merhaba. Her ne kadar flashın son dakikalarını yaşasak da hala kullanılan teknoloji. Bazen can kurtarıcımız olabilmekte. Mesela bir slider yaptığımızda bir kaç yerden .js css gibi dosyalarını da kaynaklanmamız gerekiyor. Ancak flash ile bu sorunu bir swf dosyası ve html sayesinde çöze bilmekteyiz. Lafı fazla uzatmayıp sadede geçeceğim.

Action Script 2.0 ile .swf uzantılı flash dosyamıza görünmez buton ile bağlantı yani link verebiliriz. Bol resimli anlattığım bu basit işlemi uygulaya bilirsiniz.

İlk olarak Ctrl+F8 ile bir buton oluşturun. Gelen sahnede Timeline alanındaki buton laye’inin Hit alanına resimdeki gibi sağ tuş ile Inster Blank Keyframe deyip alana kullandığınız flash alanından daha büyük toolbar’dan seçtiğiniz bir dikdörtgen çizin.(renk önemli değil, tahmini yaptığınız flash alanını kaplaması yeterli)

Ardından sahne alanına tekrar geri dönüp, sağdaki properties alanından yaptığınız butonu en üste layer açarak sahneye sürükleyip bırakın. Transparan mavi çizdiğiniz dikdörtgeni flash alanını kaplayacak şekilde üzerine getirin. Bu görünmez şeffaf buton en üst katmanda bulunması gerekir. Çünkü bağlantı kodları bu butona yazılacak.

Ve son olarak en can alıcı noktası yani oluşturduğumuz butona link özelliği kazandırıyoruz. Actions- Button sekmesine tıklayıp kod kısmına ;

[cc lang="actionscript"]on (release) {
getURL(“http://coder.digitaldunyam.net”, target=”blank”);

}[/cc]

Burada flash’a tıklanıldığı zaman ilgili web sitesine ayrı sayfada gitmekte. Virgül ile target blank ifadesini silerek kendi sayfasında açabilirsiniz.

Olay bu kadar publish yapıp web sitenizde denemeniz dileği ile…

15 Ağustos 2011

Jquery scrollbar yapımı

Halk dili ile sağ sürükleme çubuğu olarak da geçen, demosunu bu adresten bulabileceğiniz jquery scrollbar web siteleri için olmazsa olmazlardandır. jscrollpane.kelvinluck.com adresinden de ulaşabileceğiniz Jquery scrollbar farklı türlerine de rastlayabilirsiniz.(inceledim hepsi birbirine benzer şekilde oluşturulmuş).

Gerekli stil ve jquery referans dosyalarını buradan indirerek operasyona başlayabiliriz. Bu klasörleri indirdikten sonra head etiketleri arasına sürükleyin. Uygulamayı Asp.net(php vs. fark etmez benzer şekilde uygularsanız bu scrollbar zamazingosu her yerde çalışır) ile yaptığımı hatırlatarak gerekli referansları ve javascript kodları nereye ekleneceğini alt tarafta bulabilirsiniz.

[cc lang="asp"]




[/cc]

head aralığına yukarıdaki gibi gereken javascript ve css kodlarını da ekleyerek, referans edilen 4 dosyayı(1 css 3 js) da ekleyip scrollbar için gereken işlemleri tamamlamış olursunuz. Gereken bir kaç açıklamayı kod içinde bulabilirsiniz. Rengini jquery.jscrollpane.css dosyasından değiştirebilirsiniz.

Ardından scrollbar içine koyacağınız metin, görsel, form vs. ilgili class içine almak kalıyor. Alltaki kısımda ne demek istediğimi anlayabilirsiniz;

[cc lang="html"]

metin görsel form vs içeriği buraya giriyoruz….

[/cc]

Bu scrollbar sayesinde uzunca yazıları, formları yüksekliği belli site içinde konumlandırmanıza yardımcı oluyor.

06 Temmuz 2011

Css ile büyük küçük harf

Stil dosyaları yardımı ile websitendeki paragraftaki veya ilgili etiketin içindeki yazıları; baş harflerini büyük, tüm harflerini küçük veya tüm harfleri otomatik büyük göstere biliriz.

Sayfamızdaki harici veya dahili css içindeki paragraf [cc lang="html"]

[/cc] etiketleri arasındaki tüm harfleri büyük yapmak için;
[cc lang="css"]p
{
text-transform: uppercase
}[/cc]

tüm harfleri küçük yapmak için;
[cc lang="css"]p
{
text-transform: lowercase
}[/cc]

baş harfi büyük diğeri küçük olmasını istiyorsak;
[cc lang="css"]p
{
text-transform: capitalize
}[/cc]

Benzer şekildeki uygulamalarda; uppercase, lowercase, capitalize kullanarak gerekeni yaptık.

« Newer Posts

Powered by WordPress