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