KategoriCSS

CSS’de letter-spacing: kodunun kullanımı

C

CSS kodları ile yeni yeni tanışmaya başlayan kişilerin karşısına mutlaka çıkacak olan bir css elementidir letter-spacing. Peki bu element ne işe yarar. İsterseniz bunu kullanarak öğrenelim… İlk olarak elimize bir güzel söz alıyoruz. Hayat bir tiyatro dediler, bana bir rol verdiler. En acısı benimki idi, önce sev sonra unut dediler.. Gayet normal ve güzel söz. Şimdi bu yazıyı h6 yapalım...

Resimlere ve Yazılara Css İle Saydamlık Vermek

R

CSS’nin nimetlerinden faydalanarak resim ve yazılara saydamlık vermek mümkün. Bu işlemi çok basit bit kod ile yapacağız. Örneğin ilk olarak bir resim ele alalım. <img src="" /> Codex logomuzu ele aldık. Bu kodun içine style="opacity:0.5;" kodunu ekleyeceğiz ve sonuca bakacağız. <img src="" style="opacity:0.5" /> yukarıdaki kod ile codex logomuza %50 saydamlık verdik. Aşağıda da...

Sitenin köşesine sesli Atatürk resmi ekleme

S

Bu gün ki yazımda sizlere standart olarak site köşesine eklenen Atatürk görselini paylaşacağım, aşağıda vereceğim kodlar sayesinde sitenizin köşesine çok kolay bir şekilde Atatürk’ün sesli görselini ekleyebilirsiniz. Ses 29 Ekim Cumhuriyet Bayramına özel olarak düzenlemiştir isteyenler ses olan kısmı silerekde kullanabilirler, isteğe bağlı olarak görseli ve ses dosyasını kendi sitenize...

Css ile üzerine gelince değişen resim yapma

C

Bu yazımızda size img etiketi kullanmadan üzerine gelince değişen resim elde etmeyi göstereceğiz. İlk önce bir div sınıfı atayalım. Örneğin ben resmi codexresim adlı bir css sınıfına atayacağım. <div class="codexresim"> </div> Div kodlarımız hazır. Şimdi css kodlarımızı ayarlamamız gerekiyor. Css sınıfımızı (class) aşağıdaki şekilde tanımlıyoruz. Resim olarak codex logomuzu...

125×125 Banner Alanı, Kodu ve Css’si

1

Bu yazımda ise 125×125 veya 95×95 artık o size kalmış banner alanı ve css kodunu paylaşacağım. Siteye uygulanacak kod. [php] [/php] Css Kodu. [php].sponsorhover img{ /*Bu Kısım Resimlerin Normal Halleri*/ opacity:0.6; -moz-opacity: 0.6; -khtml-opacity: 0.6; } .sponsorhover a img:hover{ /*Bu Kısım Üstüne Gelindiğinde Gözüken Kısım*/ opacity:1.0; -moz-opacity: 1.0; -khtml-opacity: 1.0; }...

Seçilen yazının arkaplan rengini değiştirmek

S

Sitedeki yazıyı kopyalarken çıkan rengi değiştirmek için css’ye aşağıdaki kodu eklemeniz yeterli olacaktır.
[php]::-moz-selection { background: #006080; color: #FFF;}
::selection { background: #006080; color: #FFF;}
a::-moz-selection { background: #006080; color: #FFF;}
a::selection { background: #006080; color: #FFF;} [/php]

Css’de Yazı aralarına boşluk vermek.

C

Yazmış olduğunuz yazıların boyutu büyük ve bir birilerine yapışık vaziyette duruyorsa, aşağıdaki kodu css ye eklemeniz yeterli olacaktır.
[php] line-height:24px; [/php]