CSS'de Selection Seçenekleri

Bir metini seçerken, tarayıcılar klasik olarak yazı rengini beyaz, arka planı ise mavi yaparlar. Bazı tasarımcılar için bu önemsizken bazıları da bu olaya kafayı takarlar. Bu yüzden selection ayarınızı yaparak metin seçerken ki tasarım uyuşmazlığını kaldırabilir, tasarımınıza uygun renkler kullanabilirsiniz.

Yaptığımız uygulamalar da aşağıda ki unsurları kullanacağım.

1-Yazı Rengini Değiştirmek

.color::selection {
color: red; }

2-Arkaplan Rengini Değiştirmek

.background::selection {
background: red;}

3-Yazıya Gölge Vermek

.shadow::selection {
text-shadow: 1px 2px 3px rgba red;}

Önizleme

Devamı »

Sadece CSS3 Kullanarak Slider Oluşturma

Merhaba arkadaşlar, CSS bilgimi gün geçtikçe geliştiriyorum. Bugün sizlere sadece CSS3 kullanarak nasıl slider oluştururuz onu anlatmaya çalışacağım. Artık jQuery ve JS'ye ihtiyaç duymadan CSS bilgimiz ile güzel bir slider yapalım :)

CSS

#images {
  width: 650px;
  height: 250px;
  position: relative;
  margin: 30px auto;
}
#images img {
  width: 650px;
  height: 250px;
  border:10px solid #CCC;
  position: absolute;
  top: 0;
  left: -400px;
  z-index: 1;
  opacity: 0;
  
  transition: all linear 500ms;
  -o-transition: all linear 500ms;
  -moz-transition: all linear 500ms;
  -webkit-transition: all linear 500ms;
}
#images img:target {
  left: 0;
  z-index: 9;
  opacity: 1;
}
#images img:first-child {
  left: 0;
  opacity: 1;
}
#slider a {
  text-decoration: none;
  background: #666;
  border: 1px solid #000;
  padding: 4px 8px;
  color: #FFF;
  border-radius:30px 30px 30px 30px
}
#slider a:hover {
  background: #FFF;
  color:#000;
  -webkit-transition: color 0.8s;
   -moz-transition: color 0.8s;
   -o-transition: color 0.8s;
   transition: color 0.8s;
}

HTML

<div id="images">
  <img id="image1" src="http://i.imgur.com/dL3io.jpg" />
  <img id="image2" src="http://i.imgur.com/qASVX.jpg" />
  <img id="image3" src="http://i.imgur.com/fLuHO.jpg" />
  <img id="image4" src="http://i.imgur.com/5Sd3Q.jpg" />
</div>
<div id="slider">
  <a href="#image1">1</a>
  <a href="#image2">2</a>
  <a href="#image3">3</a>
  <a href="#image4">4</a>
</div>

Canlı Önizleme


Arkadaşlar biliyorum şu resim geçişleri kısmı hiç hoş değil ^^

Devamı »

CSS3 Sosyal Ağ Butonları

CSS3 kullanarak kodladığım bu güzel sosyal ağ butonları çok kullanışlı. İsterseniz yazılarınızı paylaşmak içinde kullanabilirsiniz.

CSS

ul{
 display: inline;
 line-height: 40px;
}
a.dribbble{
 position: absolute;
 width: 170px;
 height: 26px;
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #F98CB6),color-stop(0,#F75F94));
 -webkit-border-radius: 3px;
 border-top: 1px solid #fbbad3;
 -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.3);
 font-family: "Arial";
 font-size: 13px;
 text-decoration: none;
 font-weight: 700;
 padding-bottom: 11px;
 padding-left: 10px;
 color: rgba(74,36,49,.9);
 text-shadow: 0 1px 1px rgba(255,255,255,.35);
}
a.dribbble:active{
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #F75F94),color-stop(0,#F98CB6));
}

/*Twitter*/
a.twitter{
 position: absolute;
 width: 170px;
 height: 26px;
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #65acc8),color-stop(0,#4586ae));
 -webkit-border-radius: 3px;
 border-top: 1px solid #a1cdde;
 -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.3);
 font-family: "Arial";
 font-size: 13px;
 text-decoration: none;
 font-weight: 700;
 padding-bottom: 11px;
 padding-left: 10px;
 color: rgba(25,45,55,.9);
 text-shadow: 0 1px 1px rgba(255,255,255,.35);
}
a.twitter:active{
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #4586ae),color-stop(0,#65acc8));
}
/*Facebook*/
a.facebook{
 position: absolute;
 width: 170px;
 height: 26px;
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #4669ab),color-stop(0,#304886));
 -webkit-border-radius: 3px;
 border-top: 1px solid #8ea4cd;
 -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.3);
 font-family: "Arial";
 font-size: 13px;
 text-decoration: none;
 font-weight: 700;
 padding-bottom: 11px;
 padding-left: 10px;
 color: rgba(21,31,53,1);
 text-shadow: 0 1px 1px rgba(255,255,255,.35);
}
a.facebook:active{
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #304886),color-stop(0,#4669ab));
}
/*Forrst*/
a.forrst{
 position: absolute;
 width: 170px;
 height: 26px;
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #58853e),color-stop(0,#3c592a));
 -webkit-border-radius: 3px;
 border-top: 1px solid #99b489;
 -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.3);
 font-family: "Arial";
 font-size: 13px;
 text-decoration: none;
 font-weight: 700;
 padding-bottom: 11px;
 padding-left: 10px;
 color: rgba(22,33,16,1);
 text-shadow: 0 1px 1px rgba(255,255,255,.35);
}
a.forrst:active{
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #3c592a),color-stop(0,#58853e));
}
/*Designmoo*/
a.designmoo{
 position: absolute;
 width: 170px;
 height: 26px;
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #eb5a5f),color-stop(0,#e13c41));
 -webkit-border-radius: 3px;
 border-top: 1px solid #f39a9e;
 -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.3);
 font-family: "Arial";
 font-size: 13px;
 text-decoration: none;
 font-weight: 700;
 padding-bottom: 11px;
 padding-left: 10px;
 color: rgba(69,22,24,1);
 text-shadow: 0 1px 1px rgba(255,255,255,.35);
}
a.designmoo:active{
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #e13c41),color-stop(0,#eb5a5f));
}
/*Flickr*/
a.flickr{
 position: absolute;
 width: 170px;
 height: 26px;
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #ea66ac),color-stop(0,#da3868));
 -webkit-border-radius: 3px;
 border-top: 1px solid #f3a2cd;
 -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.3);
 font-family: "Arial";
 font-size: 13px;
 text-decoration: none;
 font-weight: 700;
 padding-bottom: 11px;
 padding-left: 10px;
 color: rgba(74,4,32,1);
 text-shadow: 0 1px 1px rgba(255,255,255,.35);
}
a.flickr:active{
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #da3868),color-stop(0,#ea66ac));
}
/*Using Sprites*/
.icons{
 position: absolute;
 display: block;
 background-image: url(http://u1308.hizliresim.com/1d/8/r8x9p.png);
 background-repeat: no-repeat;
 height: 26px;
 width: 25px;
 right: 10px;
 bottom: 5px;
}
.icons.dribbble{
 background-position: 0 0;
}

.icons.twitter{
 background-position: -25px 0;
}

.icons.facebook{
 background-position: -50px 0;
}

.icons.forrst{
 background-position: -75px 0;
}

.icons.designmoo{
 background-position: -100px 0;
}

.icons.flickr{
 background-position: -125px 0;
}

a:hover { 
   -webkit-transition: color 0.8s;
   -moz-transition: color 0.8s;
   -o-transition: color 0.8s;
   transition: color 0.8s;
   color:#FFFFFF}

HTML

<ul>
  <li><a href="#" class="dribbble">Dribbble<span class="icons dribbble"></span></a></li>
  <br/>
  <li><a href="#" class="twitter">Twitter<span class="icons twitter"></span></a></li>
  <br/>
  <li><a href="#" class="facebook">Facebook<span class="icons facebook"></span></a></li>
  <br />
  <li><a href="#" class="forrst">Forrst<span class="icons forrst"></span></a></li>
  <br />
  <li><a href="#" class="designmoo">Designmoo<span class="icons designmoo"></span></a></li>
  <br />
  <li><a href="#" class="flickr">Flickr<span class="icons flickr"></span></a></li>
    </ul>

Canlı önizleme

Devamı »

Blogger CSS3 Geçişli Arama Kutusu

CSSBeyin adlı blogumda şimdi paylaşacağım arama kutusuna benzer bir paylaşımda bulunmuştum. Ve bir takipçimiz "Blogger için entegre edebilir misin?" ricasında bulunmuştu. Sonunda vakit buldum entegreyi tamamladım. Fakat bir farkı var. Oradaki ile birebir değil.

Bir önceki yazım olan CSS3 Transitions kullanılarak oluşturulmuştur. Eğer CSS3 Transitions paylaşımlarımı iyi kavrarsanız sizde yapabilirisiniz.

CSS Kodları

#search input[type="text"]:hover {width:208px;border:1px solid #CCC;}
#search input[type="text"] {
background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRPusgRIixpXileM8jnv4XOOpkYAOjpvteSqq5vfPZDtCu0L4bFGxNS3ZMfmMneZDSZ66NlsX2dI6MG3cqwyjpd1pH3pn9ZrRgCk-wU6pZF29ePgONnNSHAAH_px-F0c0luY_mLMnYnh5q/s0/search_32x32-32.png")no-repeat center left;
font-size: 13px;
color: #222;
width: 0px;
padding: 10px 0px 11px 35px;
z-index: 9;
border: 1px solid #fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
margin-bottom: -1px;
position: absolute;
top: 0px;
right:20px;}

HTML Kodları

<form action="http://blogismi.com/search/" id="search" method="get">
<input name="q" placeholder="Ne Aramıştınız ?" size="40" type="text"></form>

Devamı »

CSS3 Transitions Özelliği: Hareketlendirme ve Hover Ayarları

Daha önceleri şu yazımda sizlere CSS3 Transition kullanarak opaklık hoverlarını görsel olarak nasıl ayarlayabileceğimizi göstermiştim.

Bu yazımda ise yine CSS3 Transition kullanarak nesneye hareket katacağız.

Sağa Hareket Ettirme Özelliği

.element {
color:#333;
-moz-transition:all .3s;-o-transition:all .3s;-webkit-transition:all .3s}

.element:hover {padding-left:20px}

Kodlarımız arasında bulunan
*padding-left kısmını padding-right olarak değiştirirsek elementimiz sola doğru hareket eder. (Ters mantık var)

Aşağı Hareket Ettirme Özelliği

.element {
color:#333;
-moz-transition:all .3s;-o-transition:all .3s;-webkit-transition:all .3s}

.element:hover {padding-top:20px}

Kodlarımız arasında bulunan
*padding-top kısmını padding-bottom olarak değiştirirsek elementimiz yukarı doğru hareket eder.

Devamı »

CSS3 Tooltip Sosyal Medya Butonları

Her geçen gün CSS3'ün özelliklerini keşfettikçe kodlara daha çok hayran oluyorum. Mesela bugün bloguma Özgür'ün blogunda gördüğüm CSS3 Animated'ı uyguladım. (Bloga girişte soldan sağa doğru kayması.) Çokta hoşuma gitti. Eğer bir sıkıntı çıkarmaz ise bu şekilde devam edeceğim. Havalı girişler iyidir iyi :D

Konumuza dönelim bugün siz okurlarıma CSS3 Tooltip kullanılarak hazırlanmış sosyal medya butonlarını vereceğim. Eğer tooltip mantığını çözerseniz hemen her yerde kullanabilirsiniz.

HTML Kodları

<center>

  <ul style="margin: 0 auto" class="sosyal-buton" id="sosyal-cssanime">

     <li><a href="#" rel="nofollow" target="_blank" title="Facebook"><img src="http://4.bp.blogspot.com/-iL1yn4RuH78/T7Kd0GRPNeI/AAAAAAAAC_0/4edv38UA2-A/s1600/facebook.png">
    <strong>Facebook</strong></a> 
    </li>
     <li><a href="#" rel="nofollow" target="_blank" title="Twitter"><img src="http://3.bp.blogspot.com/-LgqftoheYqw/T7Kd3rmV6xI/AAAAAAAADAk/dBVNeD8mn7A/s1600/twitter.png">
    <strong>Twitter</strong></a> 
    </li>
    <li><a href="#" rel="nofollow" target="_blank" title="Google+"><img src="http://3.bp.blogspot.com/-4O2a3av0u48/T7jUo_Jvu5I/AAAAAAAADBs/O9Q-WNyBm34/s1600/googleplus.png">
    <strong>GooglePlus</strong></a> 
    </li>
 
    </ul>
</center>

CSS Kodları

/* Sosyal Butonlar */
    ul.sosyal-buton { list-style:none;margin 0auto;display:inline-block; }
    ul.sosyal-buton li { display:inline; float:left;  }
    ul.sosyal-buton li a {background-repeat:no-repeat; display:block; width:48px; height:48px; position:relative; text-decoration:none; }
   
 ul.sosyal-buton li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
 
    #sosyal-cssanime:hover li { opacity:0.2; }
    #sosyal-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
    #sosyal-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
    #sosyal-cssanime li:hover { opacity:1; }
    #sosyal-cssanime li:hover a strong { opacity:1; top:-10px; }
    /* Sosyal Butonlar */

Butonlarımızın canlı önizlemesi için bu adresi kullanın.

Devamı »

CSS Hizalama Yöntemleri (Align)

Kutu özellikli nesnelerde hizayı ayarlamak için text-align kullanılabilir. Fakat bu dersimizde farklı yollardan nasıl hizalama yapılır bundan bahsedeceğiz.

Margin Kullanarak Ortalamak

Kutu özellikli elementler sağ ve sol dış boşluk (margin) değerleri auto yapılarak ortalanabilir. Tarayıcı bu durumda sağ ve sol boşlukları kendi ayarlayacağı için yazı ortalanacaktır. Ancak bu durumda genişlik yani width hiçbir zaman 100% olmamalıdır. Aksi takdirde kenarlık tarayıcı tarafından ayarlanamaz. Örneğe bakalım:

.center
{
margin-left:auto;
margin-right:auto;

width:70%;

background-color:#b0e0e6;
}

Yukarıdaki örnek çalıştırıldığında tarayıcı otomatik olarak 15% sola 15% sağa boşluk verir ve genişliğe göre bunu oranlar.

Position Kullanarak Sağa ve Sola Yaslamak

Normal akıştan farklı olacak bir position: absolute; kodu kullanarak belirttiğimiz genişlikte bir kutunun sağa ya da sola yaslanmasını sağlayabiliriz. Örneğin 500 piksellik bir kutuyu sağa yaslamak isteseydik:

.center
{
position: absolute;

right; 0px;

width: 500px;

background-color:#b0e0e6;
}

Sağdan 0 piksel boşluk bırakılacağını right: 0px; ile belirtmiş olduk.

Float Kullanarak Sağa ve Sola Yaslamak

Float HTML elementlerini sağa veya sola kaydırarak listelememizi sağlar. Kaydırma özelliğini hizalamak için kullanabiliriz:

.right
{
float: right;

width: 300px;

background-color:#b0e0e6;
}

Kod çalıştığında 300 piksellik bir kutu sağa yaslanmış olacaktır.

Devamı »

Sosyal Medya Butonları (CSS/HTML)

Tarafımca CSS dökümlerini yaptığım ve oldukça beğendiğim sosyal medya butonlarını siz takipçilerim ile paylaşmak istedim. Hepimiz biliyoruz ki bizim için sosyal medya önemli bloglarımı daha büyük kitlelere ulaştırmak için sosyal medya profillerimizi blogumuzda yayınlamalı böylelikle takipçilerimiz son haberleri sosyal medyadan aracılığımız ile öğrenmeli. Bunu da bu güzel butonlar ile sağlayabiliriz.

Canlı Demo

Check out this Pen!

Demo adresinde bulunan CSS ve HTML sekmelerini kullanarak kodlara ulaşabilirsiniz.

Devamı »

CSS Filtreler İle Resimlerinize Efekt Verin

CSS'nin gelişimi ile hiç bir program ya da editöre ihtiyaç duymadan sadece CSS'den yararlanarak resimlerimize efektler kazandırabiliyoruz. Bu imkanı CSS3 Filtreler ile uygulayacağız.

Filtreleri Kullanmak

filter: filtreadi(deger);

Şuanda en düzgün sonuç veren tarayıcılar webkit motorunu kullanan tarayıcılardır, daha doğrusu filtreler bir tek webkit motorunu kullanan tarayıcılarda çalışıyor. İlerleyen zamanlarda tarayıcılar bu olaya destek verecektir, işte diğer tarayıcıların ön ekleri ve kullanımları;

-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: filter(value);

Bulanıklık Vermek İçin: Blur

img {
   -webkit-filter: blur(2px);
   -moz-filter: blur(2px);
   -ms-filter: blur(2px);
   -o-filter: blur(2px);
    filter: blur(2px);
}

img:hover {
 filter: blur(0); 
-webkit-filter: blur(0); 
-moz-filter: blur(0); 
-o-filter: blur(0); 
-ms-filter: blur(0); 
}

Gri Tonlama Vermek İçin: Grayscale

img {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

img:hover {
filter: grayscale(0); 
-webkit-filter: grayscale(0); 
-moz-filter: grayscale(0); 
-o-filter: grayscale(0); 
-ms-filter: grayscale(0); 
}

Parlaklık Vermek İçin: Birghtness

img {
     -webkit-filter: brightness(0.5);
     -moz-filter: brightness(0.5);
     -o-filter: brightness(0.5);
     -ms-filter: brightness(0.5);
      filter: brightness(0.5);
}

img:hover {
     -webkit-filter: brightness(0.9);
     -moz-filter: brightness(0.9);
     -o-filter: brightness(0.9);
     -ms-filter: brightness(0.9);
      filter: brightness(0.9);
}

Doygunluk Vermek İçin: Saturate

img{
    filter: saturate(50%);
    -webkit-filter: saturate(50%);
    -moz-filter: saturate(50%);
    -o-filter: saturate(50%);
    -ms-filter: saturate(50%);
}

img:hover {
    filter: saturate(80%);
    -webkit-filter: saturate(80%);
    -moz-filter: saturate(80%);
    -o-filter: saturate(80%);
    -ms-filter: saturate(80%);
}

Nostalji Vermek İçin: Sepya

img { filter: sepia(100%);
  -webkit-filter: sepia(100%);
  -moz-filter: sepia(100%);
  -o-filter: sepia(100%);
  -ms-filter: sepia(100%);
}

img:hover { filter: sepia(10%);
  -webkit-filter: sepia(10%);
  -moz-filter: sepia(10%);
  -o-filter: sepia(10%);
  -ms-filter: sepia(10%);
}

Gölge Vermek İçin: Drop Shadow

img {
-webkit-filter: drop-shadow(9px 9px 20px black);
-moz-filter: drop-shadow(9px 9px 20px black);
-o-filter: drop-shadow(9px 9px 20px black);
  -ms-filter: drop-shadow(9px 9px 20px black);}

img:hover{
  -webkit-filter: drop-shadow(9px 9px 20px blue);
-moz-filter: drop-shadow(9px 9px 20px blue);
-o-filter: drop-shadow(9px 9px 20px blue);
-ms-filter: drop-shadow(9px 9px 20px blue);
}

Vermiş olduğum örnekler CSS Filtreler'den sadece birkaçı internette daha fazlasını bulabilir ve rahatlıkla kullanabilirsiniz.

Efektlerin Canlı Önizlemesi

Devamı »

CSS İle Oluşturulmuş Sade Hover Verilmiş İkonlar

CSS Transitions özelliği kullanarak kodlanmış bu güzel ve rengarenk ikonlarımızı tasarımlarınız da rahatça kullanabilir veya ilham kaynağı olarak görebilirsiniz :).

Demoİndir



Kaynak : Codrops

Devamı »

CSS Optimizasyonu İle Sitenizi Hızlandırın

Merhaba arkadaşlar, bu yazımda sizlere CSS Optimizasyonu yaparak sitelerimizi nasıl hızlandıracağımızı basit ama önemli olan bu yollar ile anlatacağım. Başlıyorum.

1-Ortak Özellikte Olan Stilleri Bir Arada Tanımlamak

Aşağıdaki kod satırında aynı özelliğe sahip iki etiket var h1 ve h2.

h1{
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:18px;
    font-weight:800;
    color:#039;            
}
h2{
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:18px;
    font-weight:800;
    color:#039;            
}

Yukarıdaki kodları optimize ederken aşağıdaki örnekteki gibi virgül (,) operatörünü kullanabilirsiniz.

h1, h2{
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:18px;
    font-weight:800;
    color:#039;            
}

2- CSS Compressor İle Kullanılmayan CSS Kodlarını Temizlemek

Kullanılmayan her bir css kodu sitenizin hızını yavaşlatacaktır. Bu neden ile CSS Compressor kullanarak kullanılmayan veya fazlalık kod satırlarını temizleyeceğiz.

Öncelikle bu adresten sitemize giriyoruz. Daha sonra CSS kodlarımızı boş alana ekleyerek Compress butonuna basıyoruz ve işlemin tamamlanmasını bekliyoruz. İşlemimiz tamamlandığında CSS Compressor temizlenen kodları liste şeklinde bize rapor ediyor.

Daha sonra arındırılmış CSS kodlarımızı alıp rahatlıkla kullanabiliriz. Bu yazımda CSS kodlarınızı, dosyalarınızı optimize ederek sitelerinizi hızlandırmak için birkaç ipucu verdim. Umarım yardımcı olabildim.

İyi bloglamalar..

Devamı »

miniBLOG Teması (CSS/HTML)

Blogger'a entegre amaçlı minimalist tasarımlı temalar arıyordum bu tema ile karşılaştım. Vakit bulamadığımdan dolayı, vakti olan bir kişinin bloggera entegre eder düşüncesiyle paylaşmak istedim. Umarım aranızdan bir kişi bu güzel temayı entegre eder.

Gerçekten adı üzerinde miniBLOG ve benim çok hoşuma gitti. Üzerinde oynamalar yapılırsa tadından yenmez.

Önizlemeİndir

Devamı »

Sosyal Medya Tabs Buton (PSD - CSS)

Mirona Tartan'ın tasarımı olan bu güzel sosyal medya butonları hepinizin hoşuna gideceğini umuyorum. Üstelik CSS dökümü yapılmışta :)

İndir

Devamı »

Sosyal Medya İkon Seti (PSD - CSS)

Bugün hoşuma giden ve CSS dökümünü bulduğum sosyal ikon setlerini sizlerle paylaşmak istiyorum. İkon setimiz hem PSD hem CSS olarak size vereceğim. Demo olarak yazıya eklediğim resimi gösterebilirim.

Kaynak Dosyasını İndir

Devamı »

Blogunuzdaki Tüm Videoların Boyutunu Ayarlayın

Merhaba arkadaşlar, yeni tasarıma geçtiğim için eklediğim bazı videolar eski tasarımın boyutu nedeniyle taşma ve kaymalara uğramıştı. Bunu nasıl kısa yoldan halledebileceğimi düşünürken yine imdadıma CSS koştu. Sağolsun hiç yalnız bırakmadı beni eheheh :)

Artık blogumdaki tüm videolar 2 hareketimle istediğim boyutta ve konumda oluyorlar nasıl mı ? Hemen anlatayım. Öncelikle çoğu video embed (kaynak) kodları iframe kodunu içerir. Bunu düşünerek bir css stili oluşturdum şöyle ki,

iframe {width:565px; height:320px;}

Yukarıdaki kod sayesinde blogumda bulunan tüm videolar 565px genişliğinde, 320px yüksekliğinde olacak. Eğer video playerı isterseniz de kodlarımız arasına margin: px değeri vererek konumunu ayarlayabilirsiniz.

Devamı »

Bir CSS Kodunu Sadece Seçtiğimiz Elemente Uygulama

Merhaba arkadaşlar, web dillerinden devam ediyoruz. Bugün sizlere bir CSS stilini sadece seçtiğimiz elementler de kullanılabilir yapmayı anlatacağım umarım yararlı bir yazı olur. Size öncelikle bir div ve stilin nasıl işe oluşturulduklarını göstereceğim daha sonra ise konumuza geçeceğiz.

<div class="css">aerakman</div>

Yukarıdaki div elementi içinde yer alan class="css", o div elementi için CSS özellikleri belirtmemizi sağlayan bir yoldur. CSS kodlarımızı içeren dosyamızda şu ifade varsa geçerlidir:

.css {
      font: 15px Tahoma, Verdana;
      color: gray;
   }

Nokta (.) ile başlayan bir stil oluşturduk ve adını css olarak verdik. Bu demek oluyor ki class="css" ile belirttiğimiz tüm elementler 15 piksel büyüklüğünde Tahoma yazı tipi ve gri(gray) renginde olacaktır.

Ancak başlıkta da belirttiğim özelliği kullanarak yukarıda ki stil de vermiş olduğum özellikleri seçtiğimiz tek bir element de gerçekleştirebiliriz. Bunun için:

Örneğin, sadece div elementlerin de geçerli olmasını istiyorsak,

div.css {
      font: 10pt Tahoma, Verdana;
      color: blue;
   }

.css olarak adlandırdığımız kodumuzun başına div getirmemiz yeterli olacaktır. Bu sayede .css isimli CSS kodu sadece div elementlerin de geçerli olacaktır.

Devamı »

CSS İle Reklam Alanı Oluşturalım

Bir sitede forumda rast geldiğim konudan dolayı araştırma yaptım ve bu yazıyı yazma gereği duydum. Hiç bir resim kullanmadan sadece CSS kodları ile 125x125 reklam alanı oluşturacağız.

CSS Kodları

.reklam-125{font-family:Arial,Verdana,sans-serif;font-size:13px;font-weight:bold;display:block;height:125px;line-height:125px;width:125px;border: 1px solid #DDDDDD;text-align:center;background:#e9e9e9}
.reklam-125:hover{border: 1px solid #ccc;color:black;background:#E0E0E0}

Nasıl Kullanabilirim ?

Yukarıda vermiş olduğumuz CSS kodlarını şablonunuz da uygun yere ekleyiniz.Daha sonra ise HTML/JavaScript Gadgetı'na aşağıdaki kodu ekleyerek ve gerekli düzenlemeleri yaparak kullanabilirsiniz.

Boyutları değiştirerek aynı şekilde 468x60 ve 300x250 gibi reklam alanları da oluşturabilirsiniz.

<a class="reklam-125" href="LINK" rel="nofollow" target="_blank">Reklam Alanı</a>

Önizleme için tıklayınız.

Devamı »

Code Beautifier İle CSS Kodlarınızı Düzenleyin

Bu güzel siteyi WMAracı'nın eski konularını kurcalarken gördüm.Kendim kullandım çok iyi oldu.Site açılışında gerçekten gözle görülür bir artış hissettim.

Code Beautifier Nedir ? Ne İşe Yarar ?

Bu site CSS kodlarınızdaki gereksiz ve fazla kodları temizleyerek sitenizin daha hızlı açılmasını sağlar.Bu işlem sırasında CSS dosyalarınızın işlevini değiştirmez.

Nasıl Yaparız ?

CSS kodlarınızı isterseniz olduğu kopyalayıp yapıştırabilir ya da link olarak sunabilirsiniz. Process CSS butonuna tıkladığınız da kısa süre içerisinde işlem tamamlanacaktır. İşlem sonucunda Code Beautifier CSS kodunuzun işlem öncesi kaç boyutta olduğunu ve işlem sonrası kaç boyuta indiğini gösterir.Bunu yüzdelik olarak da ifade ediyor. Sağ tarafta bulunan Compression (code layout): bölümünden CSS kodlarını hangi derecede temizleyeceğinizi ayarlayabilirsiniz.

Bu güzel ve yararlı siteye buradan ulaşabilirsiniz.

Devamı »

CSS İle Yeni Sekmede Açılan Linkleri Belirtin

Çoğu WordPress alt yapılı sitede gördüğüm bu CSS kodunu blogger da kullanmayı düşündüm.Bence bu CSS kodu hepinizin işine yarayacak ve okurlarınızda sizlerde memnun kalacaksınız.

Okurlarınıza verdiğiniz linkin yeni bir sekmede açılacağını aşağıdaki örnekteki gibi belirtebilirsiniz.

Örnekteki işlemi gerçekleştirmek için aşağıdaki CSS koduna ihtiyacınız var;

a[target="_blank"]:before,
a[target="new"]:before
{
    content: url(http://www.srte.psu.edu/images/new_window_icon.gif);
}

Devamı »

CSS İle İçe Doğru Gölge(İnset) Vermek

Transition özelliği ile kutuların sadece dışına gölge vermeyi görmüştük.Şimdi ise bunu CSS İnset özelliği ile içe vermeyi öğreneceğiz.

CSS Kodları:

-moz-box-shadow: inset 0px 0px 20px #000;     /* Mozilla */
-webkit-box-shadow: inset 0px 0px 20px #000;  /* Chrome ve Safari */
box-shadow: inset 0px 0px 20px #000;          /* Standart CSS Kodu */

Bu kodlarımızda da her zamanki gibi renk seçimi ve gölgenin miktarını seçerek işlemlerimizi bitiriyoruz.İstersek bu özelliği aşağıdaki örnekteki gibi hover efekti olarakta verebiliriz.

Devamı »