Biggle's Blog

Web- und Software Development

by Mario Binder

Einfaches CSS Image-RollOver ohne Javascript

Hier ein kleines CSS Snippet, was man sicher öfter mal gebrauchen kann. Mit diesem Snippet erreicht man ein simples Imgage-RollOver, wo das Bild durch ein anderes ausgetauscht wird, wenn man mit der Mouse drüber fährt. Einfach deshalb, weil man sonst immer nur Beispiele mit fetten Javascriptcode findet, wenn man das mal braucht…

 

1
<a title="Facebook" class="img_rollover" href="http://www.facebook.com/MarioPriebe"></a>
1
2
3
4
5
6
7
8
9
10
/*CSS für ImageRollOver  */
a.img_rollover:link, .img_rollover{
	width:32px;
	height:32px;
        display:block;
	background-image:url(images/icon32_facebook_off-2.png);
}
a.img_rollover:hover{
	background-image:url(images/icon32_facebook_on.png);
}

Möchte man mehrere Icons / Images nebeneinander abbilden, setzt man noch ein float:left; in die Definition.

Viel Spaß beim entwickeln : )

by Mario Binder

CSS Klassen filtern mit PrimerCSS

Mit PrimerCSS kann man aus fertig geschriebenen HTML Code die CSS Klassen und IDs filtern. Damit ist es z.B. möglich die HTML zu schreiben, Klassen und IDs zu setzen und danach dann, die entsprechende CSS zu implementieren.

by Mario Binder

CSS Naked Day

Jo, wer ein reines Gewissen hat darf mitmachen : )

by Mario Binder

Flash in den Hintergrund zwingen

Flash hat die Eingenschaft, sich durch das <object>  immer in den Vordergrund zu drücken und egal welchen z-index man wählt, ist es nicht möglich einen CSS Container über das Flash zu legen.

Sei denn man fügt dem FlashObject folgenden xhtml validen Parameter hinzu:

<param name="wmode" value="transparent" />

Nun kann man mit z-index auch wieder die Ebenen bestimmen.
Beispiel:

1
2
3
4
<object type="application/x-shockwave-flash" data="test.swf" width=640" height="480">
<param name="wmode" value="transparent" />
<param name="src" value="test.swf" />
</object>

by Mario Binder

Bildmanipulation mit CSS

Sonderbare Tricks die man findet….

Wer Interesse hat, seine Bilder mittels CSS aufzupeppen, sollte sich mal die Tricks von Sohtanaka ansehen.

by Mario Binder

Online-Generatoren für den Hintergrund

Hier eine kleine Auswahl an Online Generatoren für den Webseiten-Hintergrund.

Einfach gewünschtes Muster generieren und wie gewohnt per CSS einbinden:

background:#FARBE url(PFAD/MUSTER.PNG) repeat;

gemusterte Texturen bekommt man bei bgpatterns


Mustertexturen bei TarganMaker

stripegenerator generiert gestreifte Hintergründe


weitere Streifenhintergünde bei StripeDesigner


und nochmal bei stripemania


Pixelknete generiert Punkte


und bei BGMaker zeichnet man seinen Hintergrund selbst