Werbung:

Du befindest dich hier: codes/css/css_tricks

CSS Tricks und Kniffe

Hier findest du eine Ansammlung von neuen CSS3 Befehlen, welche zum Teil schon von den Brwosern Unterstützt werden.

Bilder Spiegeln

Beispiel

01:
02:
03:
04:
05:
06:
07:
08:
09:
10:
11:
12:
13:
<!-- 
Diese Eigenschaften Funktionieren bisher
nur im Internet Explorer 
-->
<p>Orginal Bild<br />
<img src="101.jpg"></p>

<p>Horizontal<br />
<img src="101.jpg" style="filter:FlipH();"></p>

<p>Vertikal<br />
<img src="101.jpg" style="filter:FlipV();">
</p>
Min-Height
1:
2:
3:
4:
5:
#beispiel {
    min-height:500px;
    height:auto; !important
    height:500px;
}
Autoclear
01:
02:
03:
04:
05:
06:
07:
08:
09:
10:
11:
12:
.beispiel:after {
    content: “.”;
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.beispiel {display: inline-table;}
/* Hides from IE-mac \*/
* html .beispiel {height: 1%;}
.beispiel {display: block;}
/* End hide from IE-mac */
Reset CSS (alles gleich setzen)
01:
02:
03:
04:
05:
06:
07:
08:
09:
10:
11:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,p,blockquote,th,td {margin:0; padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;font-weight:normal;
}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;}
q:before,q:after {content:”;}
Scrolling Render IE
1:
2:
3:
html {
    background : url(null) fixed no-repeat;
}
Opacity
1:
2:
3:
4:
5:
6:
7:
8:
#transdiv {
    /* IE Anweisung */
    filter:alpha(opacity=75);
    /* FF Anweisung */
    -moz-opacity:.75;
    /* Opera Anweisung */
    opacity:.75;
}
PRE Tag
1:
2:
3:
4:
5:
6:
7:
pre {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap !important; /* Mozilla, seit 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Li Background Repeat IE
1:
2:
3:
4:
5:
<!–[if lt IE 7]>
<style>
#leftnav li { zoom: 1;} /* haslayout=true */
</style>
<![endif]–> 
Gut zu Wissen
01:
02:
03:
04:
05:
06:
07:
08:
09:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
@charset “UTF-8″;
  /* ———————————————————————-
 WinIE7
 ———————————————————————- */
 *:first-child+html beispiel{property:value;}
  /* ———————————————————————-
 WinIE6 &amp; Mac IE
 ———————————————————————- */
 * html beispiel{property:value;}
  /* ———————————————————————-
 WinIE6
 ———————————————————————- */
 /*\*/
 * html beispiel{property:value;}
 /**/
  /* ———————————————————————-
 MacIE
 ———————————————————————- */
 /*\*//*/
 beispiel{property:value;}
 /**/