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