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;
}