Sinerjik » CSS

CSS ile Site Dışı Bağlantılara İkon Eklemek

Furkan Güven Taştan — Sat, 30 Oct 2010 23:49:28 +0000

Vikipedi sitesindeki makalelerde dış bağlantılar kısmında bağlantının vikipedi’nin dışına gideceğini ifade eden external ikonunu () görmüşsünüzdür. Bunu CSS ile kendi sitemize de uygulayabiliriz. Hem de linkler için hiçbir .class kullanmadan, otomatik bir şekilde yapabiliriz. Daha önce eburhan’ın Bildirgeç’te anlattığı ‘CSS ile linkleri simgeleştirmek‘ (iconize textlinks with css) konu başlığını esas alarak başlayalım işe. Orada anlatılan, bir CSS dosyasını siteye entegre ederek, site içerisindeki çeşitli bağlantı türlerine özel resimler atamak (.rar için minik arşiv ikonu, .jpg için minik resim ikonu). Ancak bunun tek eksik yanı, sitedeki harici (external links), yani site dışına çıkan bağlantılara özel resimler atamanın gösterilmemiş olması. Bunun nasıl yapılacağı konusunda küçük bir ‘google araştırması’ yaptım; ancak işe yarar bir şeye rastlamadım.

Bunun üzerine bunun nasıl yapılacağını buldum. Öncelikle yukarıda bahsettiğim ‘iconize textlinks with css‘ için gerekli dosyaları şuradan indirelim.

Sitemizdeki ve kodları arasına aşağıdaki kodu ekleyerek, indirdiğimiz iconize.css dosyasını siteye entegre edelim.

Böylelikle sitemizdeki linklerin yanına bağlantı türlerine göre (.jpg .doc .zip. vs…) ikonlar eklenmiş oldu:

Site Dışı Linklere (External Links) İkon Eklemek

Asıl meselemize geldik. Hemen iconize.css dosyamızı bir editör yardımıyla açıyoruz.

.entry a[href *="sinerjik.org/"] {
background:none;
padding:0;
}
.entry a {
background: url(icons/icon_external.gif) no-repeat center right;
padding:5px 12px 0 0;
}

kodlarını iconize.css dosyası içerisindeki kodların en altına ekliyoruz. Şimdi entry sınıfı içerisindeki sinerjik.org/ ifadesiyle başlayan tüm linklerin background ve padding değerlerini iptal ettik (sinerjik.org/ yerine siteisminiz.com/ gelecek.). Bunu yapınca aynı zamanda diğer bağlantı türlerindeki ikonları da görünmez yapmış olduk. Bunu engellemek için diğer kodların hepsine !important ekleyerek sadece onlara öncelik tanımak.

İşte bir örnek:

a[href$='.doc'], a[href$='.rtf'] {
 padding: 5px 20px 5px 0 !important;
 background: transparent url(icons/icon_doc.gif) no-repeat center right !important;
}

Böylelikle siteye hem tüm bağlantı türlerine özel ikonlar ekledik, hem de sitedışı (external) linklere ikon ekleyerek, ziyaretçiyi uyarmış olduk.

Ücretsiz Tipografik XHTML/CSS Şablonlar

Furkan Güven Taştan — Sun, 19 Jul 2009 03:49:09 +0000

Şablonların tanıtımını yapmadan önce tipografi kavramı üzerinde durmak istiyorum. Tipografi vikipedide forma uygun yazmak şeklinde tanımlanıyor. Yani tipografi; yazı tipi, punto büyüklüğü, satır uzunluğu, satır arası boşluk ve benzer etkenlerin kombinasyonları ile yapılıyor. Tipografik çalışmaların yanında tipografik web siteleri de mevcut. Bu siteler okuyucunun site üzerinde okumasını kolaylaştırmanın yanında tasarıma da ayrı bir güzellik katıyor.

Smashing Magazine blogu geçtiğimiz günlerde tipografik şablon tasarlama yarışması düzenlenlemişti; bu yarışma birkaç gün önce sonuçlandı. Sonuçlar her zamanki gibi mükemmel. Arşivinizde tutmaya değer 25′den fazla tema:

Smashing Magazine blogundaki ilgili yazıda listenin tamamını bulabilirsiniz.

HTML 5 & CSS 3 Cheat Sheet (PDF)

Furkan Güven Taştan — Thu, 16 Jul 2009 20:22:13 +0000

Web tasarım bloglarında bolca adını duyduğumuz, kullanım alanlarını öğrendiğimiz CSS 3 ve HTML 5‘in cheat sheetleri (kopya kağıtları) geçtiğimiz günlerde Smashing Magazine tarafından paylaşıldı. Bu kopya kağıtları sayesinde kodlamalarınızı daha hızlı gerçekleştirebilirsiniz. Cheat Sheetleri PDF formatında paylaşıyorum.

HTML 5′i şu sayfadan, CSS 3′ü şu sayfadan temin edebilirsiniz.

Kolay ve Hızlıca CSS Kodlamak İçin 50 Şahane Araç

Furkan Güven Taştan — Thu, 16 Jul 2009 15:55:50 +0000

CSS kodlarken sadece bir editör ve bir stil sayfası mı kullanıyorsunuz? İlla da tasarımın tamamını ben yapacağım diyip her yeni projede kodlamaya en baştan başlıyorsanız büyük yanlış yapıyorsunuz. Unutmamalı ki profesyonel tasarımcılar dahi hazır şeylerden, araçlardan ve üreticilerden hep yararlanır. Bu amatörleşmek değil, profesyonelleşmektir.Profesyonelleşmeniz ve CSS taslaklarından, gridlere; butonlarından, yuvarlanan köşelere kadar çoğu yerde fazla zaman harcamamak için bu CSS araçlarını ve CSS üreticileri (generators) kullanmak gerekiyor.

The 1KB CSS Grid

Sayfanıza kolonlara ayırmanın en kolay yolu

YAML Builder

Web sitenizin CSS taslağını hazırlamak için birebir.

GRIDINATOR

Grid System Generator

YUI: CSS Grid Builder

Blueprint Grid CSS Generator

CSS Grid Calculator

Layout generators – www.pagecolumn.com

CSS 2.0 teknikleriyle hazırlanmış css şablon üretici.

Dynamic 4 Column Layout Generator

CSS Layout Generator – CSS Portal

templatr

CSS Source Ordered 1-3 Columned Page Maker

CSS Creator

CSS Optimizeciler ve Stil Üretgeçleri

Online CSS Optimiser/Optimizer

Free CSS Template Code Generator

CSS Builder – Generate Styles on the Fly

Firdamatic: the Design Tool for the Uninspired Webloggers

WordPress Theme Generator

Yazı speckyboy tarafından kaleme alınmıştır. Tamamı şuradadır.

Modern Navigasyon Menü

Furkan Güven Taştan — Wed, 11 Feb 2009 20:00:42 +0000

Bugünlerde birçok web sitesinde bu navigasyon menüler hoşunuza gitmiş, ancak yapamamış olabilirsiniz. Veerle Blog tarafından sizin için hazırlanmış bir menü mevcut. Bir imaj ve CSS ile yapılmış.

Menüdeki her bir bölüm (home, main section) yazı uzunluğuna göre diziliyor, sizin bir daha onla oynamanıza gerek kalmayacak.

Hemen bir test edin ve kullanmaya başlayın.