CSS-Tipps

Responsive Bilder mit CSS

    img {
       height:auto;
       max-width:100%;
       width:auto
    }

Befindet sich ein Bild innerhalb einer Tabelle, muss die Tabelle ebenfalls angepasst werden:

    table {
       table-layout: fixed;
       max-width:100%;
       width:100%;
    }

Box-Shadow

.box-shadow {
-webkit-box-shadow: 2px 2px 2px 2px #000000;
-moz-box-shadow: 2px 2px 2px 2px #000000;
box-shadow: 2px 2px 2px 2px #000000;
}

Border-Radius

.border-radius {
-moz-border-radius: 8px;
border-radius: 8px;
}

 Text-Schadow

.text-shadow {
text-shadow: 1px 1px 1px #000000;
background-color: white;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#000000);
}

 Erläuterung zu Text-Shadow:

.text-shadow {
text-shadow: 1px 1px 0px #000;
/* Versatz links – Versatz oben – Unschärfe (Blur) – Farbe */
}

Textschatten kombinieren

.shadow {
text-shadow: -1px -1px 0px #101010, 1px 1px 0px #505050;
/* Schatten #1 Versatz links – Versatz oben – Unschärfe (Blur) – Farbe,
Schatten #2 Versatz links – Versatz oben – Unschärfe (Blur) – Farbe */
}

Font-Face

@font-face {
font-family: ‚arial, helvetica, sans-serif‘;
src: url(‚MyFonts.eot‘) format(‚eot‘),
url(‚MyFonts.woff‘) format(‚woff‘),
url(‚MyFonts.ttf‘) format(‚truetype‘);
}

 Multiple Columns

/* Nur FF, GH und Safari*/
.multicolumns{
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
}

CSS  Hacks für den IE:

selector {
eigenschaft: wert;   /* real browsers */
_eigenschaft: wert;   /* ie6 */
*eigenschaft: wert;   /* ie6 ie7 */
eigenschaft: wert\9;  /* ie9 */
}

IE 10 und Conditional Comments

Der IE 10 unterstützt keine Conditional Comments mehr. Um den Browser in CSS direkt anzusprechen:

1. Im Body-Bereich der HTML-Datei Folgendes eintragen:

<!–[if !IE]><!–>
       <script>if(/*@cc_on!@*/false){document.documentElement.className+=‘ ie10′;}</script>
<!–<![endif]–>

2. In der CSS-Datei die Angaben erweitern:

    .ie10 .selector {  
       eigenschaft:wert;
    }