css

Web tasarım işine başlamak için kaynaklar

İlgili Konular: Web Tasarım Genel Bilgiler     

Web tasarım öğrenmek ve bazı referanslara ulaşmak için güzel kaynakları bu yazıda bulabilirsiniz. Kaynaklar Eğitmen İzzet pembeci tarafından hazırlanmış ve öğrencilerine sunulmuştur bende çok yararlı gördüğümden burada paylaşma gereği duydum.

 

Resim Kenarlığı Düzeltme Kütüphanesi: Edge

İlgili Konular: Jquery & Javascript     

Açık kaynak kodun hızla yayıldığı günümüzde javascript kütüphanelerin yerini inkar etmek haksızlık olur. Yeni kütüphanelerden Edge kütüphanesi resimlerinizin kenarlarını sizin isteyeceğiniz efektle gösteriyor. Geniş dökümantasyonu ile güzel seçenekler sunan Edge mutlaka görülmeli.

Mozilla-Internet Explorer CSS karmaşasına çözüm

İlgili Konular: CSS ile ilgili Örnekler     

İnternet sitenizi tasarlarken, tarayıcıların farklı algılamaları olduğu için, siteniz farklı tarayıcılarda farklı şekilde görünebilir. CSS’i algılama ve yorumlama farkından kaynaklanan bu durumu aşmak için kullanılması gereken yapıyı sonunda buldum. Yapmanız gereken aşağıdaki kod satırındaki gerekli yerleri kendi CSS linklerinizi yerleştirmek.

Css ile linklere özel bir yapı atamak

İlgili Konular: CSS ile ilgili Örnekler     

Diyelim ki sayfanızın sitil sayfasında linklerinize özel bir yapı hazıladınız. Bunu yapmanın yöntemini çoğumuz biliyoruz:

a{
color: black;
text-decoration:none;
}

Link etrafındaki çerçeveleri iptal etmek

İlgili Konular: CSS ile ilgili Örnekler     

İnternet sayfamızı tasarladığımızda bir çok yeri resimlerden oluşur. Bu resim olan yerlere bağlantı verdiğimizde tıklanabilir hale getiririz, ancak tıklandıktan sonra kenarlarında çizgi oluşur.

Bu çizgiler görüntüyü çok bozmaya başladı ve yaptığım işlerden zevk alamadım. Ancak basit bir çözümü varmış deneyerek öğrendim.

a:focus {
outline: none;
}

Kod bölümünü css kullandığımız still dosyasında tercihen body still tanımlamalarının altına kopyalayın veya still dosyasının sonuna eklersiniz. Artık o çizgilerin olmadığını göreceksiniz.

Bağlantılarınıza otomatik olarak css sayesinde simge eklensin

İlgili Konular: CSS ile ilgili Örnekler     

Bir çok web sitelerine koyduğu linklerin yanlarında ne ile ilgili olduğunu göstermek ister. Zamanında bende aramıştım fakat bulamayınca el ile yazmak zorunda kaldım. Aşağıdaki sitede bir "css" dosyasını sitemize bağlamak yeterli gelerek linklerimize otomatik olarak simgeler ekleniyor. Sitedeki açıklamalar ingilizcedir.

http://pooliestudios.com/projects/iconize/

Google çeviri servisini kullanarak siteyi türkçeye çevire bilirsiniz:
http://translate.google.com

Seçtiğimiz metnin artalan rengini değiştirmek

İlgili Konular: CSS ile ilgili Örnekler     

Bir sitede rasladığım ve çok beğendiğim bir özelliği paylaşmak istedim. Site de bir yazıyı hatırlamak için kopyalamak üzere seçtiğimde metnin artalan renginin kırmızıya döndüğünü gördüm ve bana o an için çok güzel bir özellik gibi geldi. Basit ama bir okadar da farklı css uygulaması benim dikkatimi hala çekmiş durumda.

Neyse gelelim asıl konuya; bu css özelliği firefox ve yeni internet tarayıcılarında çalışmakta, anlayacağınız başımıza dert olan ie6 burada da bizi bırakmıyor.

Bu özelliği sitenize eklemek için still doyanıza aşağıdaki kodu eklemelisiniz: