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

<div class="post-body entry-content"><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="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>div#kutu {<br /> width: 400px;<br /> padding: 20px;<br /> border-radius: 10px; /* Standart */<br /> -moz-border-radius: 10px; /* Firefox */<br /> -webkit-border-radius: 10px; /* Safari ve Chrome */<br /> background: #F00;<br /> margin-bottom: 10px;<br />}<br /></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/AVvXsEjsiB-gvJcePx0ihMECDtcC-TQkf4SSlpQnWH_IrxURTMKYsz57lbv5Q06IFYlLm-EtxeeOxpp9k7R7brAPrJzmGSAOWHHJEtvfuJzIfw-aiCcAi34gPn7fFlvz918XDQW8zjKyZ82Y8GQ/s1600/radiuskutu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsiB-gvJcePx0ihMECDtcC-TQkf4SSlpQnWH_IrxURTMKYsz57lbv5Q06IFYlLm-EtxeeOxpp9k7R7brAPrJzmGSAOWHHJEtvfuJzIfw-aiCcAi34gPn7fFlvz918XDQW8zjKyZ82Y8GQ/s1600/radiuskutu.png" /></a></div><div style="clear: both;"></div></div>

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

Devamı »

CSS3 yardımı ile Popüler Yayınlar Gadget'ı yapımı

<div class="post-body entry-content">İşte popüler yayınlar gadget'ı için güzel bir stil daha. Bu stili uygulamak için ne javascript ne de başka bir eklentiye gerek var. Sadece CSS3'ün güzel nimetlerinden faydalanarak bu gadget'ı oluşturuyoruz.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsV4lyibf2Sl_eRGRXkh03MGPfCIE-5zvp_yTwtZQSpnMOXx7T2BuGHl4U9yZBsZvucxIdaCWPiTu49NyealSNj8EA0h87kLYU4j29DhN3WPLDA6ZnNANyP4m-20OiXECu5m1gIwCvKYs/s1600/populerozicab.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="color: black;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsV4lyibf2Sl_eRGRXkh03MGPfCIE-5zvp_yTwtZQSpnMOXx7T2BuGHl4U9yZBsZvucxIdaCWPiTu49NyealSNj8EA0h87kLYU4j29DhN3WPLDA6ZnNANyP4m-20OiXECu5m1gIwCvKYs/s1600/populerozicab.png" /></span></a></div><br />Öncelikle Tasarım kısmına gidip;<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>]]></b:skin><br /></code></pre><div><br /></div>Kodunu bulup öncesine aşağıdaki kodları ekliyoruz.<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>#PopularPosts1{max-width:300px} #PopularPosts1 dd{float:left;border-bottom:none;margin:8px 8px 0 8px;background:none;display:block;padding:0} #PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);} #PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}<br /></code></pre><div></div>Tasarımınızda bir Popüler Yayınlar gadget'ı yoksa ekleyin, varsa aşağıdaki gibi olmasına dikkat edin.<br /><div><br /><div><img height="215" src="http://4.bp.blogspot.com/--_xRA14UBdg/Ttt8fRVdfpI/AAAAAAAACjg/OpjfGESQXhI/s400/css-3-blogger-popular-posts-gadget.png" width="400" /> </div></div><div><br /></div>Son olarak, Tasarımda Widget Şablonlarını Genişlet kutusunu işaretlemeden aşağıdaki kodu buluyoruz. <br /><div><br /></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><b:widget id='PopularPosts1' locked='false' title='Popular Posts'type='PopularPosts'/><br /></code></pre><div><b><br /></b></div><div>Şununla Değiştiriyoruz</div><div><br /></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><b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <dd> <b:if cond='data:showThumbnails == &quot;false&quot;'> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> </div> <div style='clear: both;'/> <b:else/> <!-- (4) Show snippets and thumbnails --> <b:if cond='data:post.thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='60px' width='60px'/></a> <b:else/> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' height='60px' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png' width='60px'/></a> </b:if> </b:if> </b:if> </dd> </b:loop> </ul> <div class='clear'/> <b:include name='quickedit'/> </div> </b:includable> </b:widget><br /></code></pre><div><b><br /></b></div><div style="clear: both;"></div></div>

CSS3 yardımı ile Popüler Yayınlar Gadget'ı yapımı

İşte popüler yayınlar gadget'ı için güzel bir stil daha. Bu stili uygulamak için ne javascript ne de başka bir eklentiye gerek var. Sade...

Devamı »

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

<div class="separator" style="clear: both; display: none; text-align: center;"><img src="http://icons.iconarchive.com/icons/double-j-design/blueprint/128/adobe-blueprint-css-icon.png" /></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="http://icons.iconarchive.com/icons/double-j-design/blueprint/128/adobe-blueprint-css-icon.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://icons.iconarchive.com/icons/double-j-design/blueprint/128/adobe-blueprint-css-icon.png" /></a></div>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 rgb(153, 153, 153); margin-bottom: 20px; margin-top: 20px; overflow: auto; padding: 5px; width: 2350px;"><code style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;">::-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 />}</span></code><br /></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 style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 12px;" />Ö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 style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 12px;" /><a href="http://wmaraci.com/blog/css-ile-secilen-yazilarin-rengini-degistirin-20.html" target="_blank"><span style="font-size: x-small;">Kaynak</span></a>

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

Devamı »