Skocz do zawartości
"Idzie nowe..." - o zmianach i nie tylko ×
Przeniesienie zakupów z IPS Marketplace / Moving bought items from IPS Marketplace ×
Hosting webh.pl - 20%

Efekty po najechaniu na logotyp

Gość TRUPEK

Przez Gość TRUPEK
w Style - pomoc

 Udostępnij
Przejdź do rozwiązania Rozwiązane przez Gość TRUPEK,

Rekomendowane odpowiedzi

Gość TRUPEK

Gość TRUPEK

Opublikowano
Opublikowano

Witam,

 

Czy mogę prosić o pomoc przy wprowadzeniu efektu po najechaniu na logotyp taki jak na tej stronce?

http://projektspark.pl/

Czy są również inne efekty, jeśli tak to gdzie mogę je zobaczyć?

Gość TRUPEK

Gość TRUPEK

Opublikowano
Opublikowano

A gdzie w styles.css wklejam ten fragment?

@-webkit-keyframes buzz-out {
10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform: translateX(1px) rotate(0);
transform: translateX(1px) rotate(0);
}
100% {
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0);
}
}
Gość TRUPEK

Gość TRUPEK

Opublikowano
Opublikowano

Wstawiam tutaj:

/* Text logo */


#logo a.textLogo{
	color: #fff;
	height: 130px;
	line-height: 130px;
	padding: 0 12px;
	display: block;
	text-decoration: none;
	font-size:  45px;
	letter-spacing: -1px;
	font-weight: 300;
	font-family: "Helvetica Neue", Arial, sans-serif;
	color: #fff;
	text-shadow: rgba(0,0,0,0.6) 0px 1px 3px, rgba(0,0,0,0.6) 0px 0px 14px;
}


#primary_nav {
	float: right;
	font-weight: 200;
	font-family: "Helvetica Neue", Arial, sans-serif;
	text-shadow: rgba(0,0,0,0.6) 0px 1px 3px, rgba(0,0,0,1) 0px 0px 8px;
	font-size: 16px;
	font-family: Tahoma;
	font-weight: bold;
	font-size: 14px;
	margin: 44px 10px 0 0;
}

	#community_app_menu > li { margin: 0 3px 0 0; position: relative; }
	
	#community_app_menu > li > a {
		color: #fff;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		display: block;
		outline: none;
		padding: 0px 15px;
		line-height: 40px;
		height: 40px;
	}

	#community_app_menu > li > a:hover,
	#community_app_menu > li > a.menu_active {
		background: url("{style_images_url}/trans40.png") repeat;
		background: rgba(0,0,0,0.4);
		-webkit-box-shadow: inset rgba(0,0,0,0.5) 0px 1px 3px, rgba(255,255,255,0.2) 0px 1px 0px, rgba(255,255,255,0.05) 0px 0px 0px 1px;
		-moz-box-shadow: inset rgba(0,0,0,0.5) 0px 1px 3px, rgba(255,255,255,0.2) 0px 1px 0px, rgba(255,255,255,0.05) 0px 0px 0px 1px;
		box-shadow: inset rgba(0,0,0,0.5) 0px 1px 3px, rgba(255,255,255,0.2) 0px 1px 0px, rgba(255,255,255,0.05) 0px 0px 0px 1px;
		color: #fff;
	}
	
	#community_app_menu > li.active > a {
		background: url("{style_images_url}/trans80.png") repeat;
		background: rgba(0,0,0,0.8);
		-webkit-box-shadow: inset rgba(0,0,0,0.7) 0px 1px 3px, rgba(255,255,255,0.25) 0px 1px 0px, rgba(255,255,255,0.05) 0px 0px 0px 1px;
		-moz-box-shadow: inset rgba(0,0,0,0.7) 0px 1px 3px, rgba(255,255,255,0.25) 0px 1px 0px, rgba(255,255,255,0.05) 0px 0px 0px 1px;
		box-shadow: inset rgba(0,0,0,0.7) 0px 1px 3px, rgba(255,255,255,0.25) 0px 1px 0px, rgba(255,255,255,0.05) 0px 0px 0px 1px;
		color: #fff;
		position: relative;
	}

	#primary_nav a.ipbmenu img{ margin-right: -6px; }

#primary_extra_menucontent,
#more_apps_menucontent, .submenu_container {
	background: #173455;
	font-size: 12px;
	border: 0;
	min-width: 140px;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	-moz-border-radius: 0 0 4px 4px;
	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	border-radius: 0 0 4px 4px;
}
	#primary_extra_menucontent li, .submenu_container li,
	#more_apps_menucontent li { padding: 0; border: 0; float: none !important; min-width: 150px; }
	
	#primary_extra_menucontent a,
	#more_apps_menucontent a, .submenu_container a { 
		display: block;
		padding: 8px 10px;
		color: #c5d5e2;
	}

	#primary_extra_menucontent a:hover,
	#more_apps_menucontent li:hover a, .submenu_container li:hover a { background: #1d3c5f; color: #fff; }
	
	#primary_extra_menucontent li:last-child a,
	#more_apps_menucontent li:last-child a{
		-moz-border-radius: 0 0 4px 4px;
		-webkit-border-bottom-right-radius: 4px;
		-webkit-border-bottom-left-radius: 4px;
		border-radius: 0 0 4px 4px;
	}

	#community_app_menu .submenu_container, #more_apps_menucontent.submenu_container { width: 260px; }
	#community_app_menu .submenu_container li, #more_apps_menucontent.submenu_container li { width: 260px; }

#secondary_navigation{
	background: rgba(0,0,0,0.3);
	box-shadow: inset rgba(0,0,0,0.6) 0px 1px 3px, rgba(255,255,255,0.1) 0px 1px 0px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	overflow: hidden;
	line-height: 37px;
	margin-bottom: 15px;
	clear: both;
	font-size: 11px;
}

#secondary_navigation a{
	color: #888;
	line-height: 37px;
	height: 37px;
}

#secondary_navigation a:hover{ color: #ccc; }

	#secondary_navigation #breadcrumb li {
		float: left;
	}

	#secondary_navigation #breadcrumb li a {
		padding-left: 12px;
		;
		background: url('{style_images_url}/secondary_nav.png') no-repeat 0 0;
		display: block;
		outline: none;
		text-decoration: none;
	}
	

	#secondary_navigation #breadcrumb li.first a{
		margin-left: 0;
		background: none;
		padding-left: 0px;
	}
	
	#secondary_navigation #breadcrumb li span{
		display: block;
		padding-right: 17px;
		padding-left: 4px;
		background: url('{style_images_url}/secondary_nav.png') no-repeat 100% 0;
	}
	
	#secondary_navigation #breadcrumb li > span{ padding-left: 4px; background: none transparent; }
	
	#secondary_navigation #breadcrumb li.first a span{
		padding-left: 12px;
		-webkit-border-top-left-radius: 3px;
		-webkit-border-bottom-left-radius: 3px;
		-moz-border-radius: 3px 0px 0px 3px;
		border-radius: 3px 0px 0px 3px;
	}
	
	#secondary_navigation #breadcrumb li a:hover{
		background-position: 0 -43px;
	}
	
	#secondary_navigation #breadcrumb li a:hover span{
		background-position: 100% -43px;
	}
	
	#secondary_navigation #breadcrumb li a:active{
		background-position: 0 -86px;
	}
	
	#secondary_navigation #breadcrumb li a:active span{
		background-position: 100% -86px;
	}

#secondary_links{ overflow: hidden; padding-right: 4px; }
#secondary_links li{ float: left; margin: 0; }

#secondary_links a{
	padding: 0 12px;
	display: block;
}

#secondary_links img { 
	vertical-align: top;
	width: 16px;
	height: 16px;
	position: relative;
	margin: 10px -4px 0 -4px;
}

#secondary_links a#quickNavLaunch img { opacity: 0.6; }
#secondary_links a#quickNavLaunch:hover img { opacity: 1; }

	.breadcrumb li .nav_sep { margin: 0 5px 0 0; }
	.breadcrumb li:first-child{ margin-left: 0; }
	/*.breadcrumb.top { margin-bottom: 10px; }*/
	.breadcrumb.bottom { margin-top: 10px; width: 100%; display: none; }

#backgroundPicker{
	background: #000;
	background: rgba(0,0,0,0.6);
	float: right;
	height: 37px;
	width: 37px;
	text-align: center;
	cursor: pointer;
	-moz-border-radius: 0px 4px 4px 0px;
	border-radius: 0px 4px 4px 0px;
}

#backgroundPicker img{ opacity: 0.7; }
#backgroundPicker:hover{ background: #000; }
#backgroundPicker:hover img{ opacity: 1; }

.ipsHeaderMenu {
	background: #ffffff;
	padding: 10px;
	-moz-border-radius: 0 0 6px 6px;
	-webkit-border-bottom-right-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	border-radius: 0 0 6px 6px;
	overflow: hidden;
	width: 340px;
	text-shadow: none;
}

.ipsHeaderMenu.boxShadow{
	-webkit-box-shadow: rgba(0,0,0,0.4) 0px 0px 10px;
	-moz-box-shadow: rgba(0,0,0,0.4) 0px 0px 10px;
	box-shadow: rgba(0,0,0,0.4) 0px 0px 10px;
}

	.ipsHeaderMenu .ipsType_sectiontitle { margin-bottom: 8px; }
	
	#user_notifications_link_menucontent.ipsHeaderMenu,
	#user_inbox_link_menucontent.ipsHeaderMenu {
		width: 300px;
	}

Odświeżam itd. ale niestety nic się nie dzieje. Próbowałem na początku w i na końcu i nadal nic.

Prizmo Doświadczony

Prizmo

Opublikowano
Opublikowano (edytowane)

Dodaj na końcu ipb_styles.css kod który podałeś wyżej.

Nie musi być akurat w miejscu gdzie zczytuje logo.

 

Dodaj jeszcze kod do defaultHeader :

 

zamien to:

<img src='{parse replacement="logo_img"}' alt='{$this->lang->words['logo']}'  />

na:

<img src='{parse replacement="logo_img"}' alt='{$this->lang->words['logo']}' class='shake' />

Standardowa całość

<a href='{$this->settings['board_url']}' title='{$this->lang->words['go_home']}' rel="home" accesskey='1'><img src='{parse replacement="logo_img"}' alt='{$this->lang->words['logo']}' class='shake' />
Edytowane przez Prizmo

"Ale ja mam oryginalny klucz patrz!"

http://scr.hu/1p4s/in3pa

 

Gość TRUPEK

Gość TRUPEK

Opublikowano
Opublikowano

Chyba działa poprawnie, ponieważ inni użytkownicy twierdzą, że u nich jest ok. Ja odświeżam cache , przebudowałem styl itd. ale nadal nie ma u mnie tego efektu, tak samo było z wprowadzeniem avatarów domyślnych... Poczekam trochę i zobaczymy czy będzie działać.

Gość TRUPEK

Gość TRUPEK

Opublikowano
Opublikowano

Kod od Juri wklejony wg Prizmo działa na stówkę za co dziękuję Chłopaki ale kiedy wklejam ten kod już niestety nie ma efektu.

@-webkit-keyframes buzz-out {
10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform: translateX(1px) rotate(0);
transform: translateX(1px) rotate(0);
}
100% {
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0);
}
}
@keyframes buzz-out {
10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform: translateX(1px) rotate(0);
transform: translateX(1px) rotate(0);
}
100% {
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0);
}
}
.buzz-out {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.buzz-out:hover, .buzz-out:focus, .buzz-out:active {
-webkit-animation-name: buzz-out;
animation-name: buzz-out;
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

Kod pobrany z https://github.com/IanLunn/Hover/blob/0cb2937b120e217a789c3402c3e4ca8f4ba8cdf9/css/hover.css

  • 3 tygodnie później...
  • Rozwiązanie
Gość TRUPEK

Gość TRUPEK

Opublikowano
  • Rozwiązanie
Opublikowano

Problem rozwiązany, niestety jak zwykle leżał w przegapieniu literówki.

Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.
 Udostępnij
Tematy

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę.