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

01: 02: 03: 04: 05: 06: 07: 08: 09: 10: 11: 12: 13:  <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 & Mac IE ———————————————————————- */ * html beispiel{property:value;} /* ———————————————————————- WinIE6 ———————————————————————- */ /*\*/ * html beispiel{property:value;} /**/ /* ———————————————————————- MacIE ———————————————————————- */ /*\*//*/ beispiel{property:value;} /**/