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

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlJdjXFlo389Ze56Uv8ZrX53LBYXUWuOzrU9ZDUmCrUukVVlktADHKGvyIP7tErlJJwj6w680JMVZ1aL71TiAN1pL3RKf5JBPquT-stWcktSN4ub8H9orIFIhynIh6pJUnh2okLnctAoY/s1600/ozicabcssanlatimlari.jpg" imageanchor="1" style="clear: left; float: left; margin-right: 1em;"><img border="0" height="145" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlJdjXFlo389Ze56Uv8ZrX53LBYXUWuOzrU9ZDUmCrUukVVlktADHKGvyIP7tErlJJwj6w680JMVZ1aL71TiAN1pL3RKf5JBPquT-stWcktSN4ub8H9orIFIhynIh6pJUnh2okLnctAoY/s200/ozicabcssanlatimlari.jpg" width="145" /></a>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.<br /><br /><br /><br />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.<br /><br /><pre style="background-color: #eeeeee; border: 1px dashed #999999; color: black; font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code>::-moz-selection {<br />background: #336699;<br />color: #FFFFFF;<br />}<br />::selection {<br />background: #336699;<br />color: #FFF;<br />}<br /><br />a::-moz-selection {<br />background: #333;<br />color: #FFFFFF;<br />}<br />a::selection {<br />background: #333;<br />color: #FFFFFF;<br />}<br /></code></pre>İş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.<br /><br /><br /><br />Özelliğin tek kötü yanı IE8 dahil Internet Explorer tarafından desteklenmemesi. Bunun dışında Firefox, Chrome, Safari ve Opera özelliği destekliyor.<br /><br /><br /><br /><b><span style="background-color: yellow; font-size: x-small;"><a href="http://wmaraci.com/blog/css-ile-secilen-yazilarin-rengini-degistirin-20.html" rel="nofollow" target="_blank">KAYNAK</a></span></b>

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ç…

Devamı »

CSS Opacity (Saydamlık) ve Hover Kodu

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlJdjXFlo389Ze56Uv8ZrX53LBYXUWuOzrU9ZDUmCrUukVVlktADHKGvyIP7tErlJJwj6w680JMVZ1aL71TiAN1pL3RKf5JBPquT-stWcktSN4ub8H9orIFIhynIh6pJUnh2okLnctAoY/s200/ozicabcssanlatimlari.jpg" imageanchor="1" style=""><img border="0" height="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlJdjXFlo389Ze56Uv8ZrX53LBYXUWuOzrU9ZDUmCrUukVVlktADHKGvyIP7tErlJJwj6w680JMVZ1aL71TiAN1pL3RKf5JBPquT-stWcktSN4ub8H9orIFIhynIh6pJUnh2okLnctAoY/s200/ozicabcssanlatimlari.jpg" width="0" /></a><br /><br />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ı <b>Ozicab Design Css Anlatımları #3</b> konusunda anlatacağım.<br /><br /><pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee;font-size: 12px;border: 1px dashed #999999;line-height: 14px;padding: 5px; overflow: auto; width: 100%"><code>img<br />{<br />opacity:0.4;<br />filter:alpha(opacity=40); /* For IE8 and earlier */<br />}<br /></code></pre><br /><br /><b>Üzerine Gelince Solan Resim Css Hover Opacity Kodu Ön izlemesi</b><br /><br /><a href='/' 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/AVvXsEiRsHJQ_Gosi0BzisCPbRMIPkjVp893nl5OWFmlBvO28TujgImc6Wu-bfE1iH-XCfsPedeE2XEPWGUiqUtyeHzNdCNE4_9bRmWZQ3kxUsarfTi9sYyw-R74Wh5hitlh_e24CU89rBzzpcw/s1600/haziranlogoocab.png" style="opacity: 1; "/></a><br /><br />Kod:<br /><br /><pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee;font-size: 12px;border: 1px dashed #999999;line-height: 14px;padding: 5px; overflow: auto; width: 100%"><code><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/AVvXsEiRsHJQ_Gosi0BzisCPbRMIPkjVp893nl5OWFmlBvO28TujgImc6Wu-bfE1iH-XCfsPedeE2XEPWGUiqUtyeHzNdCNE4_9bRmWZQ3kxUsarfTi9sYyw-R74Wh5hitlh_e24CU89rBzzpcw/s1600/haziranlogoocab.png' style='opacity: 1; '/></a><br /></code></pre><b>Üzerine Gelince Renklenen Resim Css Hover Opacity Kodu Ön izlemesi</b><br /><br /><a href="http://ocabbaroglu.blogspot.com" target="_self"><img alt="" body="" border="0" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRsHJQ_Gosi0BzisCPbRMIPkjVp893nl5OWFmlBvO28TujgImc6Wu-bfE1iH-XCfsPedeE2XEPWGUiqUtyeHzNdCNE4_9bRmWZQ3kxUsarfTi9sYyw-R74Wh5hitlh_e24CU89rBzzpcw/s1600/haziranlogoocab.png" style="opacity:0.4;filter:alpha(opacity=40)" /></a><br /><br />Kod:<br /><br /><pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee;font-size: 12px;border: 1px dashed #999999;line-height: 14px;padding: 5px; overflow: auto; width: 100%"><code><a href="http://ocabbaroglu.blogspot.com" target="_self"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRsHJQ_Gosi0BzisCPbRMIPkjVp893nl5OWFmlBvO28TujgImc6Wu-bfE1iH-XCfsPedeE2XEPWGUiqUtyeHzNdCNE4_9bRmWZQ3kxUsarfTi9sYyw-R74Wh5hitlh_e24CU89rBzzpcw/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><br /></code></pre>

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 istiy…

Devamı »

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

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlJdjXFlo389Ze56Uv8ZrX53LBYXUWuOzrU9ZDUmCrUukVVlktADHKGvyIP7tErlJJwj6w680JMVZ1aL71TiAN1pL3RKf5JBPquT-stWcktSN4ub8H9orIFIhynIh6pJUnh2okLnctAoY/s1600/ozicabcssanlatimlari.jpg" imageanchor="1" style="clear: left; float: left; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlJdjXFlo389Ze56Uv8ZrX53LBYXUWuOzrU9ZDUmCrUukVVlktADHKGvyIP7tErlJJwj6w680JMVZ1aL71TiAN1pL3RKf5JBPquT-stWcktSN4ub8H9orIFIhynIh6pJUnh2okLnctAoY/s200/ozicabcssanlatimlari.jpg" width="200" /></a>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..<br /><br /><br /><br />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.<br /><br /><br /><br />Küçük bir başlık (<b>h1</b>) kodlamasıyla başlayalım, kodda neresi nedir onları anlatarak yazacağım.<br /><br /><br /><br /><b>h1</b> {<br /><br />color: black;<br /><br />font: italic 11px Arial, serif; <br /><br />text-decoration: underline; <br /><br />background: #ddd;<br /><br />margin:0px 0px 0px 0px;<br /><br />}<br /><br /><br /><br /><span style="background-color: yellow;">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; </span><br /><br /><pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee;font-size: 10px;border: 1px dashed #999999;line-height: 14px;padding: 5px; overflow: auto; width: 100%"><code><style><br /> Css Kodunuz Buraya<br /></style> <br /></code></pre><span style="background-color: yellow;">kodlarını koyduğunuz taktirde istediğiniz yere ekleyebilirsiniz.</span><br /><br /><br /><br /><b>" color: black; "</b> 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.<br /><br /><br /><br /><b>" font: italic 11px Arial, serif; "</b> Css kullanarak yazımızı stillendirme kodumuz. Fontumuzun özelliklerini bu kodumuz ile belirliyoruz. Bu koddaki <i>italic</i> (eğri yazı) yazan yere <b>bold</b> 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.<br /><br /><br /><br /><b>" text-decoration: underline; "</b> Yazımızın <u>altı çizili</u> 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.<br /><br /><br /><br /><b>" background: #ddd; "</b> 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 <a href="http://ocabbaroglu.blogspot.com/p/renk-kodlari.html" target="_blank">buraya</a> tıklayın.<br /><br /><br /><br /><b>" margin:0px 0px 0px 0px; "</b> Css'de kenar boşluğu kodudur. Eğer sadece belirli bir kısıma boşluk vermek isterseniz; <span style="background-color: yellow;">margin-bottom:0px;</span> bottom aşağı, <span style="background-color: yellow;">margin-top:0px;</span> top yukarı, <span style="background-color: yellow;">margin-left:0px;</span> left sol, <span style="background-color: yellow;">margin-right:0px;</span> right sağ taraf boşluğudur. Değerleri kendinize göre değiştirebilirsiniz.<br /><br /><br /><br />Yukarıdaki CSS kodumuzun HTML Etiketi:<br /><br /><pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee;font-size: 10px;border: 1px dashed #999999;line-height: 12px;padding: 5px; overflow: auto; width: 100%"><code><h1> Buraya Başlığınız Gelecek </h1><br /></code></pre>Ş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. <b>Anlatım tamamen <a href="http://ocabbaroglu.blogspot.com/" target="_blank">Oğuzhan Cabbaroğlu</a> 'na aittir.</b> <b>O kadar uğraştım (ç)alıntı yaparken kaynak göster bare insafsız! </b>

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üleyenl…

Devamı »

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

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEireFpdwrcNuIAzsTPw65gpCO_y3u92_qhjheNNUbuyYTxD4nCl0FxKeV05upgBg1T5TMkJlfV4abHCluZ4SIWc4y3HwdMWISg16n8NrjmC2WuiAwgonUKFJynTnDiFQ2aCCb6OqYJPmWI/s1600/turk-lirasi-ozicab.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEireFpdwrcNuIAzsTPw65gpCO_y3u92_qhjheNNUbuyYTxD4nCl0FxKeV05upgBg1T5TMkJlfV4abHCluZ4SIWc4y3HwdMWISg16n8NrjmC2WuiAwgonUKFJynTnDiFQ2aCCb6OqYJPmWI/s200/turk-lirasi-ozicab.jpg" width="50" /></a><b>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.</b><br /><br /><br /><br />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.<br /><br /><br /><br /><a href="https://www.box.com/s/2f69366c1d00ebd85208">https://www.box.com/s/2f69366c1d00ebd85208</a><br /><br /><br /><br />Bağlantısından küçük dosyayı indirebilirsiniz.<br /><br /><div></div><pre style="background-color: #eeeeee; border: 1px dashed #999999; color: black; font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code>@font-face {<br /> font-family: 'AbakuTLSymSansRegular';<br /> src: url('abakutlsymsans.eot');<br /> src: url('abakutlsymsans.eot?#iefix') format('embedded-opentype'),<br /> url('abakutlsymsans.woff') format('woff'),<br /> url('abakutlsymsans.ttf') format('truetype'),<br /> url('abakutlsymsans.svg#AbakuTLSymSansRegular') format('svg');<br /> font-weight: normal;<br /> font-style: normal;<br />}<br /></code></pre><div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI5YUlpo9z8Aj2c9f7FIhlMZRLYDJW-Ak5cj-BUM22FOvB1II0kQyh_n9UK5rqen3z4jxHlP_f7XJZf6aV14icFHvA-94hHExObi00Hvqf6hbjdsF00ZyXh-rQa0Ijzx6IfyPk_L1oDx0/s1600/tlsimgeozicab.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI5YUlpo9z8Aj2c9f7FIhlMZRLYDJW-Ak5cj-BUM22FOvB1II0kQyh_n9UK5rqen3z4jxHlP_f7XJZf6aV14icFHvA-94hHExObi00Hvqf6hbjdsF00ZyXh-rQa0Ijzx6IfyPk_L1oDx0/s1600/tlsimgeozicab.png" /></a></div>Şeklinde sayfaya ekledik. Sembol olunca rakamların başına konuyor. araya biraz da mesafe koyalım.(padding-right:5px bunun için)<br /><br /><div></div><pre style="background-color: #eeeeee; border: 1px dashed #999999; color: black; font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code>p:before{<br /> font-family: "AbakuTLSymSansRegular", serif;<br /> font-size:24px;<br /> content:"t";<br /> padding-right:5px;<br />}<br /></code></pre>ile sayfamıza ekledik.<br /><br /><div style="background-color: white; color: #333333; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 1.6em; margin-top: 1em;">Örnek: <a href="http://www.fatihhayrioglu.com/fontface/tl_deneme.html" style="color: #1259c7;">http://www.fatihhayrioglu.com/fontface/tl_deneme.html</a></div><div style="background-color: white; color: #333333; font-family: arial, verdana, sans-serif; line-height: 1.6em; margin-top: 1em;"><span style="font-size: x-small;"><a href="http://www.fatihhayrioglu.com/font-face-yardimi-ile-ikon-eklemek-yeni-tl-sembolu-eklemek/" target="_blank">KAYNAK</a></span></div>

@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ü…

Devamı »