CSS ile ilgili Örnekler

CSS ve grafik ile yuvarlak köşeler yapmak

İlgili Konular: CSS ile ilgili Örnekler      Tarih : Cmt, 04/03/2010 - 22:02 - Cihan_

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.

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

İlgili Konular: CSS ile ilgili Örnekler      Tarih : Pzr, 03/21/2010 - 21:34 - Cihan_

İ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      Tarih : Pzr, 03/21/2010 - 21:25 - Cihan_

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;
}

Örnek CSSler

İlgili Konular: CSS ile ilgili Örnekler      Tarih : Pzr, 03/21/2010 - 21:17 - Cihan_

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ü.

Link etrafındaki çerçeveleri iptal etmek

İlgili Konular: CSS ile ilgili Örnekler      Tarih : Pzt, 02/08/2010 - 10:06 - Cihan_

İ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.

Online Css Menü Oluşturma

İlgili Konular: Web Tasarım Genel Bilgiler CSS ile ilgili Örnekler      Tarih : Cum, 02/05/2010 - 19:07 - Cihan_

CSS resetleme - web sayfamız tüm tarayıcılarda aynı görünsün

İlgili Konular: CSS ile ilgili Örnekler      Tarih : Cum, 02/05/2010 - 17:38 - Cihan_

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.

/* v1.0 | 20080212 */

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

İlgili Konular: CSS ile ilgili Örnekler      Tarih : Cum, 02/05/2010 - 17:35 - Cihan_

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      Tarih : Cmt, 01/30/2010 - 23:19 - Cihan_

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: