CSS ile ilgili Örnekler
CSS ve grafik ile yuvarlak köşeler yapmak
Yuvarlak köşeli div blokları yapmak hepimiz için uğraştırıcı oluyor. Ancak bunun için online bir araç geliştirilmiş ve kullanacağımız css kodu ve html kodu bu araçta bizlere sunuluyor. Bu sayede kolay yoldan yuvarlak köşeli div blokları oluştura biliriz. Devamını oku »
Mozilla-Internet Explorer CSS karmaşasına çözüm
İ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. Devamını oku »
Css ile linklere özel bir yapı atamak
Diyelim ki sayfanızın sitil sayfasında linklerinize özel bir yapı hazıladınız. Bunu yapmanın yöntemini çoğumuz biliyoruz:
color: black;
text-decoration:none;
}
Örnek CSSler
CssPlay web sayfası tasarlayanların, özellikle bu işten para kazananların veya para kazanmayı isteyenlerin bilmesi gereken çok önemli bir site. Menüsü gereği siteyi çözmesi vakit alsa da tasarımcıların çok işine yarayacağını düşündüğüm özgün içeriğiyle dikkat gösterilmesi gereken bir site. Muhtemelen okuyucunuzda(reader) olmasını isteyeceksiniz. Özellikle benim favorim “menü” bölümü. Devamını oku »
Link etrafındaki çerçeveleri iptal etmek
İ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.
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.
Online Css Menü Oluşturma
Gayet kaliteli menüler oluşturabiliyorsunuz ancak seçenekleri biraz kısıtlı, o nedenle geri kalanı sizin yaratıcılığınıza kalıyor. Sitemizdeki sol menülerin yapımında da bu siteden yararlanılmıştır. Menülerin grafikleri hazır olarak css menü kaynağından temin edilmiştir. Fazla lafa gerek yok kolay yoldan yazılım bilmeden css menü istiyorsanız girip deneyim. Ayrıca dreamveawer için menü eklentileride sitede mevcuttur.
CSS resetleme - web sayfamız tüm tarayıcılarda aynı görünsün
Web sayfalarımızın tüm tarayıcılarda aynı görünmesini saylamak için öncelikle css özelliklerini sıfırlamamız gerekmekte. Bunun için genel olarak kullanılan eric mayer metodunu kullanmanızı tavsiye ederim. Aşağıdaki kodu css (still) dosyanızın en başına yapıştırmanız yeterlidir.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
Bağlantılarınıza otomatik olarak css sayesinde simge eklensin
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
