CSS ile Seçilen Yazıların Arka Plan Rengini Değiştirin

Genellikle yazıları okurken nerde kaldığımı işaretlemek için veya daha rahat okuyabilmek için yazıyı seçerek okurum. Bu şekilde çok daha rahat yazıyı takip edebiliyorum. Yazıları seçerken normalde seçim renkleri tarayıcının standart renklerdir. Ancak bu renkleri isterseniz CSS’ye ekleyeceğiniz bir kaç satır kod ile değiştirebilirsiniz. Bu şekilde hem web sitenizde renklerde uyumluluk sağlamış olursunuz hemde ziyaretçilerinizin daha renkli bir seçim yapabilmelerini sağlarsınız. Peki nasıl yaparız bunu hemen anlatayım.



Kodlama iki kısımdan oluşuyor. Birinci kısımda firefox için seçimi tanımlıyoruz, ikinci kısımda ise CSS3 ile birlikte gelen normal kodlamayı yazıyoruz.

::-moz-selection {
background: #336699;
color: #FFFFFF;
}
::selection {
background: #336699;
color: #FFF;
}

a::-moz-selection {
background: #333;
color: #FFFFFF;
}
a::selection {
background: #333;
color: #FFFFFF;
}

İşte bu kadar basit. İlk kodda bütün metinlerin seçim arkaplan renklerini ve yazı renklerini belirledik. İkincisinde ise sadece linklere yani a etiketine sahip kodlara uyguladık.



Özelliğin tek kötü yanı IE8 dahil Internet Explorer tarafından desteklenmemesi. Bunun dışında Firefox, Chrome, Safari ve Opera özelliği destekliyor.



KAYNAK

Read More

CSS Opacity (Saydamlık) ve Hover Kodu

Css opacity kodu ile bir tabloyu resmi veya bir menü elemanını Css hover ve opacity özellikleri ile saydamlaştırabiliriz veya üzerine gelince değiştirebiliriz. Hemen aşağıda örnek bir kod vermek istiyorum. İmg yazan yerdeki etiketi değiştirerek başka nesnelerinize de saydamlık verebilirsiniz. Daha detaylı anlatımı Ozicab Design Css Anlatımları #3 konusunda anlatacağım.

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

Üzerine Gelince Solan Resim Css Hover Opacity Kodu Ön izlemesi



Kod:

<a href='http://ocabbaroglu.blogspot.com/' target='_self'><img alt='' body='' border='0' onmouseout='this.style.opacity=1;this.filters.alpha.opacity=100' onmouseover='this.style.opacity=0.4;this.filters.alpha.opacity=0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDDlFyAMaETVT3Ovf8S0keU0de8boKF1ku59pZKDEm8eml4YPJsUppI26iRp04EunHO_OxuzhP-MxkfG_geG_MkkgZbjENHOMlImvPgbKFyeFg3KUP2hLYM_WugFEZhZsAXivojyaqnow/s1600/haziranlogoocab.png' style='opacity: 1; '/></a>

Üzerine Gelince Renklenen Resim Css Hover Opacity Kodu Ön izlemesi



Kod:

<a href="http://ocabbaroglu.blogspot.com" target="_self"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDDlFyAMaETVT3Ovf8S0keU0de8boKF1ku59pZKDEm8eml4YPJsUppI26iRp04EunHO_OxuzhP-MxkfG_geG_MkkgZbjENHOMlImvPgbKFyeFg3KUP2hLYM_WugFEZhZsAXivojyaqnow/s1600/haziranlogoocab.png" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="" alt="" /></a>

Read More

Ozicab Design CSS Anlatımları #1 - CSS'e Giriş

Arkadaşlar kendi çağımda sizlere css ve html anlatmaya çalışacağım. İlk olarak kolaydan başlayıp zorlara doğru yola alacağımı düşünüyorum. Bu konuyu yazmak için çok düşündüm eleştirenler ve kötüleyenler veya çok bilmişler çıkacağını bilmeme rağmen ben ders ders anlatacağım. Aslında baya temel olabilir ama bunları bilmeyen arkadaşlarımızda vardır diye düşünüyorum ve yavaş yavaş anlatımıma başlıyorum. Hadi Bismillah..



Css  Html kodlamaya göre daha çok ve farklı stillere sahiptir. CSS’in sayfa içeriği öğelerinin sayfa görünümü öğelerinden ayrılması için geliştirildiğini düşünürsek avantajı baştan anlaşılmış olur.



Küçük bir başlık (h1) kodlamasıyla başlayalım, kodda neresi nedir onları anlatarak yazacağım.



h1 {

color: black;

font: italic 11px Arial, serif;

text-decoration: underline;

background: #ddd;

margin:0px 0px 0px 0px;

}



Yukarıdaki kod CSS kodu olduğu için Sitenizde Css kodları kısmına eklemeniz gereklidir. Eğer sitenizde css bölümü yok ise kodumuzun başına ve sonuna;

<style>
 Css Kodunuz Buraya
</style> 

kodlarını koyduğunuz taktirde istediğiniz yere ekleyebilirsiniz.



" color: black; " Css ile yazıya renk verme kodumuz bu kod başka bir şekilde daha yazılabilir. Örneğin " color: #000000; " bu örnekte rengimizi hex kodu ile belirtmiş olduk.



" font: italic 11px Arial, serif; " Css kullanarak yazımızı stillendirme kodumuz. Fontumuzun özelliklerini bu kodumuz ile belirliyoruz. Bu koddaki italic (eğri yazı) yazan yere bold yazarsak yazımız kalın olur. Eğer o kısmı silersek yazımız düz yazı şeklinde çıkar. 11px ise yazımızın fontunun boyutunu ayarlıyorsunuz. Arial,serif ise yazımızın yazı tipidir. Burayı değiştirmek isterseniz temel yazı tiplerini bilmeniz gerekmektedir. Yazı tipimizi nasıl cufon font yaptığımızı ileriki derste anlatacağım.



" text-decoration: underline; " Yazımızın altı çizili olmasına yarar eğer tamamı Üstü çizili isterseniz ( text-decoration:line-through; ), hiçbir değişim olmasın isterseniz de ( text-decoration:none; ) yazmanız yeterlidir.



" background: #ddd; " Css'de arka plan kodudur. Hex kodlama değilde yazı ile temel renk yazmak istiyorsanız ( background: white; ) olarak değiştirmeniz gereklidir. Renk Kodlarına Bakmak için buraya tıklayın.



" margin:0px 0px 0px 0px; " Css'de kenar boşluğu kodudur. Eğer sadece belirli bir kısıma boşluk vermek isterseniz; margin-bottom:0px; bottom aşağı, margin-top:0px; top yukarı, margin-left:0px; left sol, margin-right:0px; right sağ taraf boşluğudur. Değerleri kendinize göre değiştirebilirsiniz.



Yukarıdaki CSS kodumuzun HTML Etiketi:

<h1> Buraya Başlığınız Gelecek </h1>

Şimdilik bu kadar temel anlatım yeterlidir. Bir daha ki anlatımımda görüşmek üzere. Yazımı okuduğunuz için teşekkürler. Anlatım tamamen Oğuzhan Cabbaroğlu 'na aittir. O kadar uğraştım (ç)alıntı yaparken kaynak göster bare insafsız! 

Read More

@font-face yardımı ile yeni TL sembolü eklemek

Yeni yayınlanan Türk Lirasınıda font-face yardımı ile ekleyebiliriz. TC Merkez bankasının yayınladığı yazı tipi olan AbakuTLSymSansRegular siteye ekleyerek kolay bir şekilde yeni Türk Lirası sembolünü web sitelerimize ekleyebiliriz.



Yazı tipinde sadece tl sembolünü kullanacağımız için diğer karakterleri silip sadece ikonu bırakarak yazı tipi dosya boyutunu küçültebiliriz.



https://www.box.com/s/2f69366c1d00ebd85208



Bağlantısından küçük dosyayı indirebilirsiniz.

@font-face {
   font-family: 'AbakuTLSymSansRegular';
   src: url('abakutlsymsans.eot');
   src: url('abakutlsymsans.eot?#iefix') format('embedded-opentype'),
        url('abakutlsymsans.woff') format('woff'),
        url('abakutlsymsans.ttf') format('truetype'),
        url('abakutlsymsans.svg#AbakuTLSymSansRegular') format('svg');
   font-weight: normal;
   font-style: normal;
}

Şeklinde sayfaya ekledik. Sembol olunca rakamların başına konuyor. araya biraz da mesafe koyalım.(padding-right:5px bunun için)

p:before{
    font-family: "AbakuTLSymSansRegular", serif;
    font-size:24px;
    content:"t";
    padding-right:5px;
}

ile sayfamıza ekledik.

Örnek: http://www.fatihhayrioglu.com/fontface/tl_deneme.html

KAYNAK

Read More

Yuvarlak kenarlı kutular (border-radius) oluşturmak

Web tasarımcılarını tercih ettiği tekniklerden biridir yuvarlak köşeli alanlar oluşturmak.  IE hariç css ile bu yapıyı kurmak çok basittir. Burada beraber yuvarlak kenarlı yapıları oluşturmayı göreceğiz. Ayrıca IE için javascript çözümlerini ele alacağız.

border-radius özelliği CSS3 ile birlikte geldi ve HTML elemanlarına yuvarlak kenar özelliği verme işine yarıyor. Web 2.0 ve yeni stiller ile birlikte bir çok sitede yerini alan yuvarlak kenarlı yapılar kullanılıyor, buda bu özelliği önemli kılıyor.

Köşeli yapılardan kaçan bir çok tasarımcı artık yuvarlak köşeli tasarımları tercih ediyor. Bu arada şunuda söylemeden geçemeyeceğim bazı sitelerde hiç hoş durmuyor yuvarlak kenar, her şeyi yerinde ve göz zevkine uygun kullanmak en iyisi.

Yapısı : <border-radius>{1,4} [ / <border-radius>{1,4}]?

Aldığı Değerler : [ <uzunluk> | <yüzde> ] [ <uzunluk> | <yüzde> ]?

Başlangıç değeri: tanımlama yok

Uygulanabilen elementler: tüm elementler ve tabiki tablo elementine border-collapse değeri collapse olarak atalı ise uygulanır

Kalıtsallık: Yok

Tek değer atanmış ise, dört köşeyede aynı değer uygulanır.

İki değer atanmış ise, ilk değer sol üst ve sağ alt köşeye; ikinci değer sağ üst ve sol alt köşeye uygulanır.

Dört değer atanmış ise, sırası ile sol üst, sağ üst, sağ alt ve sol alt köşelere uygulanır.

Üç değer atanmış ise, ikinci değer sağ üst ve sol alt köşeye uygulanır.

Tarayıcı Uyumu:

Internet Explorer 9

Firefox 2+

Safari 3+ (kısmen)

Opera 10.50+

W3C’s CSS Level 3+

CSS Profile 3.0

Uygulama:

Bugünkü durumda border-radius tanımı tek bir tanımlama olarak atanmamaktadır, farklı tarayıcılar ön ek kullanarak bu özelliği desteklemektedir. Webkit tabanlı tarayıcılar(Safari ve Google Chrome) için -webkit, Gecko tabanlı(Firefox) tarayıcılar için -moz ön ekleri kullanılmaktadır. 

Bu durum bazen çok uzun kodlar üretmemize neden oluyor. İleride umarım bu durum düzelir. 

İlk örneğimizi yapalım.

div#kutu {
    width: 400px;
    padding: 20px;
    border-radius: 10px; /* Standart */
    -moz-border-radius: 10px; /* Firefox */
    -webkit-border-radius: 10px; /* Safari ve Chrome */
    background: #F00;
    margin-bottom: 10px;
}

Örnek:

Read More