✔ Frage zu animiertem Hover unter Safari

[Jan-Frederik Stieler]

HI,
auf der Seite unter Safari wird der Text „Font-Embedding for the Web is back!“ animiert. Wie bekommen die den das nur mit CSS hin?
Ist warscheinlich so eine Safari eigene Sache. Würd mich aber trotzdem interessieren.

PS: Weiß vielleicht jemand wann der Firefox auch das font-embeding unterstützt?

Gruß

 

[Maik]

Moin,

hier mal der relevante Auszug aus dem Stylesheet (http://www.fonts.info/info/css/embedding.css):

.animate {
 opacity: 0.3;
   text-shadow: #666 3px 3px 0px; 
  -webkit-text-fill-color:#666; 
  -webkit-text-stroke-width: 2px; 
  -webkit-text-stroke-color: #fff;
  -webkit-transition-property: opacity, text-shadow, -webkit-text-fill-color;
  -webkit-transition-duration: 2s, 2s, 2s; 
  color:#336666;
  font-family:"GraublauWeb",Verdana,sans-serif; 
	font-weight:bold; 
	font-size:100px;
	line-height:110px; 
	margin:0;
	padding:0;
	

}

.animate:hover {
  	opacity: 1;
  	text-shadow: #999 3px 3px 10px !important;
	-webkit-text-fill-color:#336666; 
	color:#336666;
}

Abgesehen von den browsereigenen "-webkit"-Eigenschaften, die in Chrome und Safari implementiert sind, ist dies ansonsten keine "Safari-eigene-Sache", da der "Farbwechsel" mit der opacity-Eigenschaft (Transparenz) gesteuert wird.

mfg Maik

 

[Jan-Frederik Stieler]

Hi,
also mir ging es um das faden. das wird ja über die -webkit Eigenschaft gesteuert. Hab grad dannach recherchiert.
Ist ja ganz nett das feature aber ist halt wieder so eine Browserabhängige Sache die man normalerweise mit Javascript steuert.

Gruß

PS: Hatte mir das CSS mit Firebug angesehen und der hat die -webkit Eigenschaften einfach nicht mit angezeigt. Deshalb war mir das ganze jetzt unklar wo der Effekt herkommt.