sprites SN icons mit hover

[Cheffchen]

Hallo,

na in dem erstmal ein richtiges bild zeichnest mit einem theoretischen raster, bei dem beispiel 30*100px links/rechts normal/hover. Das heist damit können jetzt icons bis max 30*100px gemacht werden, kleiner natürlich auch z.b. 25*25.
Oben sind 4 button und darunter das ein bild, der rest paasiert mit 2 zeilen css pro button.
Hier der Link. Sprites test


Also zuerst musst dich entscheiden wie größ die größten SN icons werden, max. höhe und max. breite und dann kannst loszeichnen :O).

Chffchen

 

[sinankurt]

Ich glaube ich bin zu dumm: Gibt es da keine vorerstelle Icons, die einfach nur ein helles weiß darüber zeichnen? Denn sonst muss ich ja Profi in Mediengestaltung sein, oder? :-)

 

[Cheffchen]

Hallo,

Ich glaube ich bin zu dumm

sag doch nicht sowas :O).

Gibt es da keine vorerstelle Icons, die einfach nur ein helles weiß darüber zeichnen?

klar kann man die normalen icons nehmen und die da für nehmen bzw. die hover dann aufhellen. Obwohl viele die dann gleich etwas anpassen und anhübschen wenn sie das schon machen um halt was eigenes zu haben aber wenn das nicht kannst und kein kennst geht natürlich 0815 auch.
Habe das mal schnell mit deinen icons geändert, hover ist einfach grau, mann könnte sich natürlich überlegen ob man das nicht dreht normal grau hover bunt da ja dein(e) Blog(s) eher S/W ist.

Sprites test

was hälst davon

Cheffchen

 

[sinankurt]

Wow, wie machst du das alles so schenl?! Ich würde für so etwas einige Tage brauchen!

Wäre es aber nicht besser, wenn sie aus unfarbig zu farbig werden

 

[Cheffchen]

Hallo,

...Wäre es aber nicht besser, wenn sie aus unfarbig zu farbig werden

Habe ich das nicht damit gemeint :O)

...mann könnte sich natürlich überlegen ob man das nicht dreht normal grau hover bunt da ja dein(e) Blog(s) eher S/W ist.

Schau mal jetzt.

Das ist ja zu beispiel auch ein vorteil von dem, wenn man was an dem aussehen ändern möchte, brauch man nicht an 12 dateien rummachen sondern nur an einer.
Ich habe den code auch mal aufgeräumt da der ja fertig ist, vielleicht bekommst es ja selber hin, wenn nicht frag :O).

Cheffchen

 

[sinankurt]

Frage: Wie mache ich das jetzt? Hast ja den Code weggeräumt ^.^

 

[Cheffchen]

Hallo,

1. zuerst gehst oben auf den link und speicherst das große bild per rechtsklick auf deinem rechner und spielst das hoch. Am besten in den Ordner wo deine css drin ist mit der immer arbeitest.
2. fügst den codeblock A in die css ein und wieder hochspielen.
3. Jetzt wirds interessant, jetzt gehst ins Template für den kopf/haeder und suchst das div icon wo die 3 SN icons drin sind.
4. als erstes zum test nur das rss
   ersetze das

   <A style="DISPLAY: block" href="http://feeds.feedburner.com/Quartel"><IMG title=RSS alt=RSS src="http://www.quartel.de/rss.png"></A>

   mit

   <a class="SN35 rss" href="http://feeds.feedburner.com/Quartel" target="_blank"></a>

5. jetzt müsste der rss icon neu sein.
   wenn das passen sollte brauchst nur noch die anderen sachen im Template ausstauschen aber eins nach dem anderen :O)

A

.SN35{
 height: 35px;
 width: 35px;
 border: 0 solid #FF0;
 display: block;
 float: left;
 margin-right: 8px;
 background: url('sprites35.png');
}
.SN35.google{
 height: 24px;
 width: 24px;
 background-position: 0 0;
}
.SN35.google:hover{
 background-position: 35px 0;
}
.SN35.misterwong{
 height: 24px;
 width: 24px;
 background-position: 0 -35px;
}
.SN35.misterwong:hover{
 background-position: 35px -35px;
}
.SN35.delicious{
 height: 24px;
 width: 24px;
 background-position: 0 -70px;
}
.SN35.delicious:hover{
 background-position: 35px -70px;
}
.SN35.rss{
 height: 32px;
 width: 32px;
 background-position: 0 -105px;
}
.SN35.rss:hover{
 background-position: 35px -105px;
}
.SN35.facebook{
 height: 32px;
 width: 32px;
 background-position: 0 -140px;
}
.SN35.facebook:hover{
 background-position: 35px -140px;
}
.SN35.twitter{
 height: 32px;
 width: 32px;
 background-position: 0 -175px;
}
.SN35.twitter:hover{
 background-position: 35px -175px;
}

ps; hier das andere :O)

<A href="http://www.facebook.com/pages/Quartel/227439220617041"><IMG title=Facebook alt=Facebook src="http://www.quartel.de/facebook.png"> </A>

in

<a class="SN35 facebook" href="http://www.facebook.com/pages/Quartel/227439220617041" target="_blank"></a>

und

<A href="http://twitter.com/#!/QuartelBlog"><IMG title=Twitter alt=Twitter src="http://www.quartel.de/twitter-2.png"> </A>

in

<a class="SN35 twitter" href="http://twitter.com/#!/QuartelBlog" target="_blank"></a>

Mach aber vorher eine sicherung von der template datei.

Cheffchen

 

[sinankurt]

Ich wollte es machen, aber leider werden die grauen icons alle als nur ein bild gespeichert :-(

 

[Cheffchen]

Hallo,

leider werden die grauen icons alle als nur ein bild gespeichert

:O) genau das ist das ja Sprites, so brauch der Besucher oder besser der Browser vom Besucher nicht 20 einzelne kleine icons laden sondern nur 1 datei wo alle icons drauf sind mit den nächsten vorteil das es beim hover nicht flagert da das hover icon geladen werden muss.
Der rest passiert dann per css.

Befolge einfach stur die Anleitung aus #7 für denn rss icon :O).

Cheffchen