tag:blogger.com,1999:blog-64752381034459686782024-03-19T19:56:40.833+03:00Ocabbaroglu - Teknoloji, İnternet, İpuçlarıHer şeyi tek bir yerde bulamam deme, burası her şeyi tek bir yerde bulacağın muhteşem site!Oğuzhan Cabbaroğluhttp://www.blogger.com/profile/08492847284784551599noreply@blogger.comBlogger5125tag:blogger.com,1999:blog-6475238103445968678.post-81760773755356006972012-07-26T19:10:00.002+03:002012-07-26T19:12:18.813+03:00CSS ile Seçilen Yazıların Arka Plan Rengini Değiştirin<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinPC_b-YuoBT1e5xM14wvYpVgPx_UUrEGx3jskLB4R10fIiMxZG1MeRbtN5ttCTig7v5FVnvWdjHtxKooWLi3h1M-g64AJbacEsDgFt_Nk3mWgFD-AEXZ0E6aB8MebcRfgUhyphenhyphenWNbalxFs/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/AVvXsEinPC_b-YuoBT1e5xM14wvYpVgPx_UUrEGx3jskLB4R10fIiMxZG1MeRbtN5ttCTig7v5FVnvWdjHtxKooWLi3h1M-g64AJbacEsDgFt_Nk3mWgFD-AEXZ0E6aB8MebcRfgUhyphenhyphenWNbalxFs/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 />
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 />
<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 {
background: #336699;
color: #FFFFFF;
}
::selection {
background: #336699;
color: #FFF;
}
a::-moz-selection {
background: #333;
color: #FFFFFF;
}
a::selection {
background: #333;
color: #FFFFFF;
}
</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 />
Ö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 />
<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>Oğuzhan Cabbaroğluhttp://www.blogger.com/profile/08492847284784551599noreply@blogger.com0tag:blogger.com,1999:blog-6475238103445968678.post-9444197719707906522012-07-05T13:28:00.002+03:002012-07-05T13:31:12.292+03:00CSS Opacity (Saydamlık) ve Hover Kodu<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinPC_b-YuoBT1e5xM14wvYpVgPx_UUrEGx3jskLB4R10fIiMxZG1MeRbtN5ttCTig7v5FVnvWdjHtxKooWLi3h1M-g64AJbacEsDgFt_Nk3mWgFD-AEXZ0E6aB8MebcRfgUhyphenhyphenWNbalxFs/s200/ozicabcssanlatimlari.jpg" imageanchor="1" style=""><img border="0" height="0" width="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinPC_b-YuoBT1e5xM14wvYpVgPx_UUrEGx3jskLB4R10fIiMxZG1MeRbtN5ttCTig7v5FVnvWdjHtxKooWLi3h1M-g64AJbacEsDgFt_Nk3mWgFD-AEXZ0E6aB8MebcRfgUhyphenhyphenWNbalxFs/s200/ozicabcssanlatimlari.jpg" /></a><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 />
<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
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
</code></pre><br />
<b>Üzerine Gelince Solan Resim Css Hover Opacity Kodu Ön izlemesi</b><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/AVvXsEhbtQgy7AOzXWKkdeq3ilhcprOYMWYTNRyvBs-fjQynBiUttXSqlM-U3rojZvGiiGvlBD_gZg-HAE779Zch25xF21omOfQNhDB0nnhBdKoF2b48eV-j8nXLtFiLZzvPvmaQ66W7KiBcVHQ/s1600/haziranlogoocab.png' style='opacity: 1; '/></a><br />
Kod:<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/AVvXsEhbtQgy7AOzXWKkdeq3ilhcprOYMWYTNRyvBs-fjQynBiUttXSqlM-U3rojZvGiiGvlBD_gZg-HAE779Zch25xF21omOfQNhDB0nnhBdKoF2b48eV-j8nXLtFiLZzvPvmaQ66W7KiBcVHQ/s1600/haziranlogoocab.png' style='opacity: 1; '/></a>
</code></pre><b>Üzerine Gelince Renklenen Resim Css Hover Opacity Kodu Ön izlemesi</b><br />
<a href="http://ocabbaroglu.blogspot.com" target="_self"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbtQgy7AOzXWKkdeq3ilhcprOYMWYTNRyvBs-fjQynBiUttXSqlM-U3rojZvGiiGvlBD_gZg-HAE779Zch25xF21omOfQNhDB0nnhBdKoF2b48eV-j8nXLtFiLZzvPvmaQ66W7KiBcVHQ/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 />
Kod:<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/AVvXsEhbtQgy7AOzXWKkdeq3ilhcprOYMWYTNRyvBs-fjQynBiUttXSqlM-U3rojZvGiiGvlBD_gZg-HAE779Zch25xF21omOfQNhDB0nnhBdKoF2b48eV-j8nXLtFiLZzvPvmaQ66W7KiBcVHQ/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>
</code></pre>Oğuzhan Cabbaroğluhttp://www.blogger.com/profile/08492847284784551599noreply@blogger.com9tag:blogger.com,1999:blog-6475238103445968678.post-31482685644649582672012-06-30T12:58:00.004+03:002012-06-30T13:02:35.638+03:00Ozicab Design CSS Anlatımları #1 - CSS'e Giriş<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinPC_b-YuoBT1e5xM14wvYpVgPx_UUrEGx3jskLB4R10fIiMxZG1MeRbtN5ttCTig7v5FVnvWdjHtxKooWLi3h1M-g64AJbacEsDgFt_Nk3mWgFD-AEXZ0E6aB8MebcRfgUhyphenhyphenWNbalxFs/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/AVvXsEinPC_b-YuoBT1e5xM14wvYpVgPx_UUrEGx3jskLB4R10fIiMxZG1MeRbtN5ttCTig7v5FVnvWdjHtxKooWLi3h1M-g64AJbacEsDgFt_Nk3mWgFD-AEXZ0E6aB8MebcRfgUhyphenhyphenWNbalxFs/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 />
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 />
Küçük bir başlık (<b>h1</b>) kodlamasıyla başlayalım, kodda neresi nedir onları anlatarak yazacağım.<br />
<br />
<b>h1</b> {<br />
color: black;<br />
font: italic 11px Arial, serif; <br />
text-decoration: underline; <br />
background: #ddd;<br />
margin:0px 0px 0px 0px;<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 />
<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>
Css Kodunuz Buraya
</style>
</code></pre><span style="background-color: yellow;">kodlarını koyduğunuz taktirde istediğiniz yere ekleyebilirsiniz.</span><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 />
<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 />
<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 />
<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 />
<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 />
Yukarıdaki CSS kodumuzun HTML Etiketi:<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>
</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>Oğuzhan Cabbaroğluhttp://www.blogger.com/profile/08492847284784551599noreply@blogger.com2tag:blogger.com,1999:blog-6475238103445968678.post-53723425828241273952012-04-26T14:29:00.005+03:002012-04-26T14:39:04.006+03:00@font-face yardımı ile yeni TL sembolü eklemek<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBlh6xjCH7dOyh-Fm9p6NjKpKIF4uvWVyP82m2jl1VsiO4M1pOMn2VV5t39Nw4PHaPkfiQX6FxBHxj8swCATp6jxul3ItsZchVtNnv6jwm141wQ11OpS4n0o_teJz-2WyKaqDH0FsVuz8/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/AVvXsEjBlh6xjCH7dOyh-Fm9p6NjKpKIF4uvWVyP82m2jl1VsiO4M1pOMn2VV5t39Nw4PHaPkfiQX6FxBHxj8swCATp6jxul3ItsZchVtNnv6jwm141wQ11OpS4n0o_teJz-2WyKaqDH0FsVuz8/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 />
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 />
<a href="https://www.box.com/s/2f69366c1d00ebd85208">https://www.box.com/s/2f69366c1d00ebd85208</a><br />
<br />
Bağlantısından küçük dosyayı indirebilirsiniz.<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 {
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;
}
</code></pre><div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglNg1j_mQPzpQ2ff5nVWCFWBc7zTUMK050LwHGd6hZNcIsktQ2ZdQnRu5AU3Vy19Uz5oub7kKKhQkbcjGll83z6jndkShsVN869h6pPZzPLjQOD_wlsCZU-pWcRAYb_5a6x9XWG406K7I/s1600/tlsimgeozicab.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglNg1j_mQPzpQ2ff5nVWCFWBc7zTUMK050LwHGd6hZNcIsktQ2ZdQnRu5AU3Vy19Uz5oub7kKKhQkbcjGll83z6jndkShsVN869h6pPZzPLjQOD_wlsCZU-pWcRAYb_5a6x9XWG406K7I/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 />
<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{
font-family: "AbakuTLSymSansRegular", serif;
font-size:24px;
content:"t";
padding-right:5px;
}
</code></pre>ile sayfamıza ekledik.<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>Oğuzhan Cabbaroğluhttp://www.blogger.com/profile/08492847284784551599noreply@blogger.com0tag:blogger.com,1999:blog-6475238103445968678.post-85655832012099570612012-01-22T11:06:00.002+02:002012-04-26T14:29:37.300+03:00Yuvarlak kenarlı kutular (border-radius) oluşturmak<div style="background-color: white; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 1.6em; margin-top: 1em;">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.</div><div style="background-color: white; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 1.6em; margin-top: 1em;">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.</div><div style="background-color: white; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 1.6em; margin-top: 1em;">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.<span id="more-1795"></span></div><div class="cssozelliktanimi" style="background-color: white; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 1.6em; margin-top: 1em; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px;"><strong>Yapısı :</strong> <border-radius>{1,4} [ / <border-radius>{1,4}]?<br />
<strong>Aldığı Değerler :</strong> [ <uzunluk> | <yüzde> ] [ <uzunluk> | <yüzde> ]?<br />
<strong>Başlangıç değeri:</strong> tanımlama yok<br />
<strong>Uygulanabilen elementler: </strong>tüm elementler ve tabiki tablo elementine border-collapse değeri collapse olarak atalı ise uygulanır<br />
<strong>Kalıtsallık:</strong> Yok</div><div style="background-color: white; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 1.6em; margin-top: 1em;"><strong>Tek değer atanmış ise,</strong> dört köşeyede aynı değer uygulanır.<br />
<strong>İki değer atanmış ise,</strong> ilk değer sol üst ve sağ alt köşeye; ikinci değer sağ üst ve sol alt köşeye uygulanır.<br />
<strong>Dört değer atanmış ise,</strong> sırası ile sol üst, sağ üst, sağ alt ve sol alt köşelere uygulanır.<br />
<strong>Üç değer atanmış ise,</strong> ikinci değer sağ üst ve sol alt köşeye uygulanır.</div><div class="tarayiciuyum" style="background-color: white; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 1.6em; margin-top: 1em; padding-bottom: 7px; padding-left: 7px; padding-right: 7px; padding-top: 7px;"><strong style="border-bottom-color: rgb(71, 71, 71); border-bottom-style: solid; border-bottom-width: 1px; padding-bottom: 5px;">Tarayıcı Uyumu:</strong><br />
Internet Explorer 9<br />
Firefox 2+<br />
Safari 3+ (kısmen)<br />
Opera 10.50+<br />
W3C’s CSS Level 3+<br />
CSS Profile 3.0</div><div style="background-color: white; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 1.6em; margin-top: 1em;"><b>Uygulama:</b></div><div style="background-color: white; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 1.6em; margin-top: 1em;"></div><div style="color: #333333; line-height: 1.6em; margin-top: 1em;">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. </div><div style="color: #333333; line-height: 1.6em; margin-top: 1em;">Bu durum bazen çok uzun kodlar üretmemize neden oluyor. İleride umarım bu durum düzelir. </div><div style="color: #333333; line-height: 1.6em; margin-top: 1em;">İlk örneğimizi yapalım.<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>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;
}
</code></pre></div><div class="separator" style="clear: both; text-align: left;"><b>Örnek:</b></div><div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSseMu7AuqlFcoTGGWOpYbv_9mrxrHuBfUq6BO4IzThKssaXxkbmqyIxKYZ92kynxik1UMq53_MLVcOd19H9MtI0QEaadBOm-lKvRSsMVvt2NaCvJO0lQ4oEz8f3j24hLgMFZK833Qnyk/s1600/radiuskutu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSseMu7AuqlFcoTGGWOpYbv_9mrxrHuBfUq6BO4IzThKssaXxkbmqyIxKYZ92kynxik1UMq53_MLVcOd19H9MtI0QEaadBOm-lKvRSsMVvt2NaCvJO0lQ4oEz8f3j24hLgMFZK833Qnyk/s1600/radiuskutu.png" /></a></div>Oğuzhan Cabbaroğluhttp://www.blogger.com/profile/08492847284784551599noreply@blogger.com0