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

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