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ı »

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ı »

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ı »