Kreative Lösungsansätze für den täglichen Gebrauch
Es muss nicht immer eine Grafik sein. Mit ein paar wenigen Code-Zeilen lässt sich schon oft der Look einer gesamten Website aufpeppen. Hier zeigen wir Ihnen einige kleine Helferlein für den täglichen Einsatz in diversen Webprojekten.
Cross Browser Opacity
Ein Effekt, der sich auf modernen Websites zunehmender Beliebtheit erfreut, sind transparente Elemente. Damit das auch in allen gängigen Browsern funktioniert, empfiehlt es sich immer die Optimierung möglichst flexibel zu gestalten. So bringen Sie Transparenz in Ihre Klassen:
.class {
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Moderne Browser */
opacity: 0.5;
/* IE 8 */
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
}
Mehrspaltige Texte
Eine schnelle Möglichkeit, Text in mehreren Spalten anzuzeigen, bietet dieser kleine Code. Sie können einfach die Anzahl der Spalten editieren. Die Höhe wird automatisch berechnet. Bitte beachten Sie, dass diese Anweisung vom IE leider noch ignoriert wird.
.multi-col {
-moz-column-count: 3;
-moz-column-gap: 25px;
-webkit-column-count: 3;
-webkit-column-gap: 25px;
}
<p class=”multi-col”>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
CSS für iPad Orientierung
Optimierung für das iPad wird im Webdesigner-Alltag immer normaler. Um die Arbeit mit den verschiedenen Orientierungen etwas zu vereinfachen, können Sie je nach Orientierung eine andere CSS-Datei greifen lassen.
<head> <link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”> <link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”> </head>
Bilder drehen
Oft kann es sehr nützlich sein ein Bild oder eine Grafik drehen zu können. So könnte man z.B. eine Pfeil-Grafik mehrfach verwenden. Auch der Einsatz als Hover-Effekt kann sehr interessant sein. Dazu müssen Sie nun nicht mehr Photoshop bemühen, sondern können diese paar Zeilen verwenden.
.flip {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: “FlipH”;
}
Zentrierte Website
Um eine Website zentriert, also in der horizontalen Mitte des Browsers darzustellen, gibt es viele Möglichkeiten. Doch diese ist ebenso einfach wie effektiv.
CSS:
#center {
width: 850px;
margin: 0 auto;
}
HTML:
<body>
<div id=”center”>
<!– Inhalt der Website –>
</div>
</body>
Top Schatten
Verleihen Sie Ihrer Website eine moderne Tiefe. Mit dieser Anweisung gestalten Sie einen kleinen Schatten am oberen Rand des Browsers – natürlich ohne den Einsatz von Grafiken.
body:before {
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
content: “”;
z-index: 100;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}
Einfacher Textschatten
CSS bietet interessante Schatteneffekte für Textelemente. In seiner einfachsten Form sieht das so aus:
.textshadow {
color: #eeeeee;
/* Moderne Browser */
text-shadow: #444444 2px 2px 0px;
/* IE 8 */
filter:dropshadow(color:#444444, offx=2, offy=2);
}
Einfacher Boxschatten
Mit diesem kleinen Code erhalten Sie eine sehr vielseitig einsetzbare Waffe im täglichen Kampf um einen modernen Look. Ob Sie diese Klasse einem Div Container oder sogar einem Bild zuweisen, bleibt Ihnen überlassen. Sie können erstaunliche Ergebnisse erzielen.
.shadow {
/* Moderne Browser */
-moz-box-shadow: 3px 3px 4px #111;
-webkit-box-shadow: 3px 3px 4px #111;
box-shadow: 3px 3px 4px #111;
/* For IE 8 */
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#111111′)”;
/* For IE 5.5 – 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#111111′);
}
Pfeil-Cursor auf klickbaren Elementen
Wem die standardmäßig gezeigte Hand mit dem Zeigefinger auf klickbaren Elementen nicht gefällt, kann sie z.B. durch einen einfachen Pfeil austauschen.
a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
cursor: pointer;
}
CSS mit PHP komprimieren
Bei großen Websites mit viel CSS im Einsatz können die Style-Dateien schon mal etwas größer werden und so die Ladezeiten der Seiten negativ beeinträchtigen. Hier kann eine Kompression via PHP Abhilfe schaffen. Starten Sie Ihre CSS-Datei einfach mit diesem Code und speichern Sie sie mit der Endung “.php”. Natürlich muss auch der Aufruf im HTML auf die neue “style.php” erfolgen.
HTML:
<link rel=’stylesheet’ type=’text/css’ href=’style.php’ />
CSS:
<?php
ob_start (“ob_gzhandler”);
header(“Content-type: text/css; charset: UTF-8″);
header(“Cache-Control: must-revalidate”);
$offset = 60 * 60 ;
$ExpStr = “Expires: ” .
gmdate(“D, d M Y H:i:s”,
time() + $offset) . ” GMT”;
header($ExpStr);
?>
body { color: #000000; }
Mit CSS jedes Foto zum Polaroid machen
Früher musste man, wenn man Bilder ungewöhnlich präsentieren wollte, stets zu einem Grafikprogramm greifen. Das hatte den Nachteil, dass Änderungen nicht ohne größeren Aufwand durchzuführen waren. Doch mit Hilfe von ein bisschen CSS lassen sich auf einfache Weise tolle Effekte erzielen, wie z.B. ein Foto wie ein Polaroid aussehen zu lassen.
Zunächst einmal braucht man ein Bild. Dieses ist praktischerweise schon mit einem Grafikprogramm in das richtige Format gebracht worden. Für einen echten Polaroid-Effekt empfiehlt es sich, ein Seitenverhältnis von 1:1 zu wählen.
Die Bildgröße spielt nur eine Rolle, wenn kein CMS wie z.B. WordPress benutzt wird. WordPress erstellt automatisch beim Hochladen kleinere Versionen deines Bildes entsprechend deiner Vorgaben. Diese kann man leicht unter Einstellungen > Medien verändern.
Das HTML-Grundgerüst
Das Polaroid besteht eigentlich nur aus einem <div>-Container, der die CSS-Klasse “polaroid” bekommt. In diesen Container wird einfach das Bild mit <img> eingebunden. Bei einem Original-Polaroid ist unter dem Bild immer etwas Platz zum Beschriften. Darauf möchte man natürlich nicht verzichten. So kommt eben noch ein <p>-Tag mit in den Container. Er ist jedoch nicht zwingend erforderlich.
Jetzt ist der HTML-Teil schon fertig.
<div> <img src="Bild.jpg"> <p>Bildbeschriftung</p> </div>
Mit CSS zum Polaroid
Im nächsten Schritt muss nur noch die CSS-Klasse “polaroid” ausgestaltet werden.
.polaroid {
display: inline-table;
background-color: #FFF;
border: 1px solid #444;
padding: 0.5em;
box-shadow: 0px 0px 8px #999;
}
Die meisten Attribute wie background-color oder border sind selbsterklärend. Etwas getrickst wird nur mit der Zeile “display: inline-table“. Normalerweise wird ein <div> immer auf die ganze, zur Verfügung stehende Breite ausgedehnt. Das ist natürlich für unseren Zweck völlig ungeeignet. Doch mit dem Trick, das <div> wie eine Tabelle zu behandeln, wird nur so viel Platz beansprucht, wie der Inhalt auch wirklich braucht.
Für den weißen Rand sorgt das Attribut “padding: 0.5em“. Ganz nach Belieben kann man hier auch einen Pixelwert eintragen. Damit das Polaroid etwas plastischer wirkt, kann man mit “box-shadow” noch einen Schatten hinzugefügt.
Eine Kleinigkeit bleibt noch übrig. Die Bildbeschriftung.
.polaroid p {
text-align: center;
margin: 0.5em 0 0 0;
}
Mit text-align wird nur für die Zentrierung des Textes gesorgt. Also nichts Besonderes. Wichtig ist hier, mit "margin: 0.5em 0 0 0" für einen Abstand der Beschriftung nach oben zu sorgen. Das soll bezwecken, dass die Schrift nicht direkt unter dem Bild klebt.
Polaroid mit runden Ecken
Jetzt kommt noch eine kleine Erweiterung, um zu zeigen, dass man mehr mit deinem Polaroid machen kann. Dazu hat man der Einfachheit halber eine zusätzliche Klasse “polaroid-round” geschrieben, die man dem <div>-Tag mit auf den Weg geben kann.
.polaroid-round {
border-radius: 1em;
}
Jetzt hat das Polaroid also runde Ecken. Doch was ist mit dem <img>? Das soll natürlich auch etwas abgerundet werden.
.polaroid-round img {
border-radius: 0.75em;
}
Mögliche Probleme
Dein Bild hat z.B. die Maße 400×400 Pixel. Nun möchte man es allerdings etwas kleiner darstellen. Da bietet es sich an dem <img>-Tag einfach die Attribute width und height mitzugeben. Doch Vorsicht. Bitte keine Prozentangaben, stattdessen immer Pixel.
<img src="Bild.jpg" width="200px" height="200px">
Kommentarfunktion ist geschlossen.