takoblog von takomat :: Neue Lebensformen für Medien » CSS-Schnippsel http://blog.takomat.com Mon, 26 Jul 2010 14:55:23 +0000 en hourly 1 http://wordpress.org/?v=3.0 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