takoblog von takomat :: Neue Lebensformen für Medien » CSS http://blog.takomat.com Mon, 26 Jul 2010 14:55:23 +0000 en hourly 1 http://wordpress.org/?v=3.0 HTML 5 Canvas bzw “kann was!” http://blog.takomat.com/web_10_x/html-5-canvas-bzw-kann-was.html http://blog.takomat.com/web_10_x/html-5-canvas-bzw-kann-was.html#comments Thu, 06 Aug 2009 15:56:15 +0000 Sebastian Felix Schwarz http://blog.takomat.com/?p=370 HTML5 ist noch nicht mal ansatzweise etabliert, da tummeln sich schon die ersten Sehenswürdigkeiten im Netz.
Benötigt wird dazu natürlich ein aktueller Browser, Safari 4 oder Firefox 3.5

Für alle Web-versierten gehts hier zur Seite,

http://9elements.com/io/projects/html5/canvas/
Für alle die mehr wissen wollen:

The original particle engine was ported from a Flex/AS3 project that we’ve created to javascript. We’re using processing.js for particle rendering on canvas which is a very useful graphics library created by John Resig.

hier geht’s weiter: http://9elements.com/io/?p=153

]]> http://blog.takomat.com/web_10_x/html-5-canvas-bzw-kann-was.html/feed 1 CSS: Externe Links automatisch markieren http://blog.takomat.com/css/css-externe-links-automatisch-markieren.html http://blog.takomat.com/css/css-externe-links-automatisch-markieren.html#comments Wed, 15 Oct 2008 16:00:42 +0000 Marcin Jakubowski http://blog.takomat.com/?p=52 Durch eine kleine Abfrage in CSS ist es möglich Externe Links automatisch mit einem Extern-Symbol zu markieren. Dazu liest CSS den “href” des Links aus und prüft, ob ein “http:” darin enthalten ist. Ist das der Fall, wird der Style angewendet:

CSS-code:

1
2
3
4

a[href^="http:"] {
	background: url("ext_link.gif") top right no-repeat;
	padding-right: 8px;
}

So muss man nicht mehr alle Links von Hand markieren und spart dadurch Zeit und Aufwand!

]]> http://blog.takomat.com/css/css-externe-links-automatisch-markieren.html/feed 0 CSS: Überschrift durch Bild ersetzen, barrierefrei http://blog.takomat.com/css/css-uberschrift-durch-bild-ersetzen-barrierefrei.html http://blog.takomat.com/css/css-uberschrift-durch-bild-ersetzen-barrierefrei.html#comments Sun, 12 Oct 2008 13:30:31 +0000 Marcin Jakubowski http://blog.takomat.com/?p=60 Mit Hilfe von CSS kann man ganz einfach Text durch ein Bild ersetzen, ohne dass das die Suchmaschinen oder Screenreader stört. Dazu setzt man ein Bild als Hintergrundbild einer Überschrift z.B. H1 und blendet den Text mit einem kleinen Trick aus Das macht man, indem man den “text-indent” (Texteinzug) auf -9000px setzt. Somit ist der Text unsichtbar und wird durch das Hintergrundbild ersetzt.

CSS-code:

1
2
3
4
5
6

h1 {
	background: url(euer_hintergrund_bild.jpg);
	text-indent: -9000px;
	height:50px;
	width:150px;
}

XHTML-code:

1

<h1>Eure Überschrift</h1>
]]> http://blog.takomat.com/css/css-uberschrift-durch-bild-ersetzen-barrierefrei.html/feed 1 CSS: Transparenz auf DIV-Layern http://blog.takomat.com/css/css-transparenz-auf-div-layern.html http://blog.takomat.com/css/css-transparenz-auf-div-layern.html#comments Mon, 15 Sep 2008 14:04:36 +0000 Marcin Jakubowski http://blog.takomat.com/?p=57 Seit CSS2 ist es nun auch möglich Transparenzen außerhalb der MS-Filter zu nutzen. Das heißt, dass diese auch vom Firefox genutzt werden können.

CSS-Code

1
2
3
4
5

#transdiv {
	background-color: #000;
	filter:alpha(opacity=65);  //IE
	opacity:.65;   //Mozilla etc.
}

Der Container #transdiv hat nun einen schwarzen Hintergrund mit einer Deckkraft von 65%.

]]> http://blog.takomat.com/css/css-transparenz-auf-div-layern.html/feed 0