Subsilver2 logo'ya css3 mouse ile 360 derece dairesel efekt

phpBB 3.0.x sürümleri için uygun olan hazır ya da küçük kod parçalarını bu forumda paylaşabilirsiniz.
Forum kuralları
- Yeni bir başlık açarken lütfen konu başlığına "Acil yardım", "Acele yardım" tarzlarında içerisinde "yardım" kelimesi geçen cümleler yazmayınız. Bu tip başlıklara kesinlikle cevap verilmeyecektir. Lütfen konu başlığına içeriği en iyi özetleyen anlaşılabilir bir cümle yazınız.

- Ayrıca yeni başlıklarınızı kesinlikle ilgili forumlara açınız. Örneğin, phpBB3 kurulum ve çalıştırması hakkında bir sorununuz varsa "3.0.x Destek Forumu" forumuna başlık açınız; phpBB3 temasından kaynaklı bir sorunuz varsa "3.0.x Stil/Tema Geliştirme & Tartışma & Yardım" forumuna başlık açınız; phpBB3 mod/eklentileriyle ilgili sorununuz varsa "3.0.x MOD Destek" forumuna başlık açınız. Bu kurala uymayan kullanıcıların başlıkları silinebilir ve kullanıcı uyarı alabilir ya da süresiz uzaklaştırılabilir.

- Site kurallarımızı okumadan kesinlikle forumlarımıza herhangi bir katılım yapmayınız.
Kilitli
satcell
Kayıtlı Kullanıcı
Mesajlar: 769
Kayıt: 25.01.2009, 20:42
Konum: samsun

Subsilver2 logo'ya css3 mouse ile 360 derece dairesel efekt

Mesaj gönderen satcell »

En yeni web tarayıcıları css3 özelliklerini destekliyor,css3 subsilver2 temada logo üzerine mouse ile gelindiğinde 360 derece yada istediğiniz derecede dairesel hareket ettirebilirsiniz şimdi bu özelliği subsilver2 tema da nasıl uygulayabilirsiniz yazıyorum.

stylesheet.css

bul

Kod: Tümünü seç

#logodesc {
	background-color: #C1CAD2;
	background-image: url('./images/background.gif');
	background-repeat: repeat-x;
	background-position: center bottom;
	padding: 0 25px 15px 25px;
	
}

sonrasına ekle

Kod: Tümünü seç

#log {
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
}

#log:hover{
transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
overall_header.html

bul

Kod: Tümünü seç

<td><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>

bununla değiştir

Kod: Tümünü seç

<td><a href="{U_INDEX}"><div id="log">{SITE_LOGO_IMG}</div></a></td>

Ön belleği temizle

---------------------------------
360 yazan yerleri istediğiniz sayı ile değiştirebilirsiniz.
Örnek site http://www.satcell.org
Kaynak burdaki uygulama http://www.zenelements.com/blog/css3-transition/
Kilitli

“3.0.x Kod Parçaları” sayfasına dön

Kimler çevrimiçi

Bu forumu görüntüleyen kullanıcılar: Hiç bir kayıtlı kullanıcı yok ve 5 misafir