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

Einführung HTML 5 Video

Das Google Dev Team hat ein >40Minütiges Video bereitgestellt, in dem etwas Geschichte über die Entwicklung im Web gesprochen wird und wo es hinführen wird.

Was sind wichtige Features und was bringen die Neuerungen durch  HTML5. All das wird geballt an zahlreichen Demos und anhand von jede Menge Code-Beispielen erklärt.

by Mario Binder

Golem Video XHTML valide einbinden

Hin und wieder embedded man ja mal ein Video in sein Blog. Wie man das XHTML valide macht, habe ich ja schon öfter beschrieben. Dazu gibt es aber auch eine komfortablere Lösung, und zwar das Plugin “Viper Video Quicktags“.

Leider kann das Plugin keine simplen swf Dateien einbinden und so kam es, dass nach dem Einbinden vom einem GolemVideo, es im Validator mit 25Fehlern “knallte”.

Nun, wer das grüne Favicon liebt, kann sich zum swf / Video einbinden, folgenden Code in seinen Bookmarks speichern ; )

1
2
3
4
5
<object type="application/x-shockwave-flash" data="http://video.golem.de/player/videoplayer.swf?id=2174&autoPl=false" width="480" height="270">
  <param name="src" value="http://video.golem.de/player/videoplayer.swf?id=2174&autoPl=false" />
  <param name="AllowFullScreen" value="true" />
  <param name="AllowScriptAccess" value="always" />
</object>

by Mario Binder

CSS Naked Day

Jo, wer ein reines Gewissen hat darf mitmachen : )

by Mario Binder

5 unbekannte HTML Tags

Ja es gibt noch den einen oder anderen HTML Tag, den man nicht wirklich kennt oder eher selten benutzt.

instantfundas.com stellt fünf dieser vor. Den, den ich nicht kenne ist dieser hier der das Eingeschlossene komplett umdreht… coole Spielerei bei der sogar das W3C mitmacht : )

 

<bdo dir="rtl">text</bdo>

Example

Mal sehen ob Du das lesen kannst.