10 Herausfordernde, aber großartige CSS-Techniken

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Die meisten Designer und Webentwickler kratzen nur an der Oberfläche der leistungsstarken Sprache CSS. In Bezug auf Programmiersprachen hat CSS eine ziemlich einfache Lernkurve. Das bedeutet nicht, dass CSS keine mächtige Sprache ist. Manchmal sind es die kleinen Dinge, die einen großen Unterschied im Design einer Website ausmachen.

In diesem Beitrag werden wir 10 großartige CSS-Techniken für Webentwickler skizzieren, die sich auskennen.

Es gibt viele CSS-Techniken und Hacks für Anfänger. Jeder kennt die Routinetricks wie:

Diese einfachen Tricks sind alle in Ordnung und sehr wichtig, aber heute werden wir uns einige CSS-Techniken ansehen, die etwas anspruchsvoller sind. Das sind nicht die üblichen Techniken, die Sie einem CSS-Anfänger beibringen würden. Diese 10 Tricks sind etwas schwieriger, aber wenn sie gut gemacht werden, können sie Ihrem Website-Layout etwas ganz Besonderes hinzufügen.

1. Menüelemente fokussieren und verwischen

Beginnen wir mit einer Technik, die nicht zu fortgeschritten ist, um uns zu beruhigen. Das Fokussieren und Verwischen von Navigationsmenüelementen ist eine leistungsstarke Möglichkeit, dem ausgewählten Element Aufmerksamkeit zu schenken. Diese Technik unterscheidet sich von herkömmlichen Bild-Rollovers, da anstelle der Änderung des Status des schwebenden Elements die nicht ausgewählten Elemente geändert werden.

Der Kern dieses Effekts ist ein einfacher Rollover, bei dem für jeden der Links ein Bild verwendet wird. Jedes Bild ist 600 Pixel breit und hat drei verschiedene Zustände: statisch, aktiv und überrollt.

Ein Beispiel für ein Menüelementbild

Dadurch wird jede Navigationsschaltfläche 200 Pixel breit, sodass beim Überfahren einer Schaltfläche jedes andere Navigationselement um -200 Pixel verschoben wird, um das Hintergrundbild zu ändern. Es ist ein raffinierter Effekt, der sich von den meisten Rollover-basierten Navigationsmenüs deutlich unterscheidet.

2. Illustrative Menü-Rollover

Illustrationsbasierte Layouts sind aus gutem Grund der neueste Trend im Webdesign. Eine schöne Illustration kann ein sehr ansprechendes Weblayout sein. Manchmal fällt es illustrierten Layouts jedoch schwer, Animationen auf den Seiten anzuzeigen, da der Großteil des Designs auf Bildern basiert. Wir können ein bisschen CSS in der Navigation verwenden, um die Illustration zu animieren.

WebDesignerWall verfügt über ein hervorragendes Tutorial, das Ihnen nicht nur zeigt, wie Sie der Navigation Animationen hinzufügen, sondern auch das gesamte Navigationssystem in Photoshop erstellen. Das fertige Produkt ist ein verspieltes, lebendiges Navigationssystem, das das Design viel lebensechter und ansprechender macht. Der schwierige Teil beim Befolgen des Beispiels besteht nicht darin, mit dem CSS zu arbeiten, sondern die Änderungen in Photoshop vorzunehmen, damit die Rollover verbunden erscheinen.

3. Erweiterte Typografie-Optimierungen mit CSS

Typografie wird in einem CSS manchmal übersehen. Sie können jedoch viele kreative Dinge mit Text tun, indem Sie einfach CSS hinzufügen. Zum Beispiel:

Reflexionen

Sie können das Javascript überspringen und direkt zum CSS gehen, um Reflexionen im Text vorzunehmen. Zugegeben, es sieht nicht ganz so elegant aus wie die Javascript-Lösung, aber es hat das Potenzial, ganz nett zu sein.

Fließende Schlagzeilen

Sie können raffinierte Überschriften erstellen, die zusammenfließen, indem Sie einen geringen Buchstabenabstand für das erste Zeichen innerhalb einer Spanne verwenden. Hinweis: Nicht alle Zeichenkombinationen sehen fantastisch aus.

Zeichen fallen lassen

Sie können sogar Drop-Zeichen erstellen (sehen Sie "g"?), Indem Sie eine niedrige Zeilenhöhe und einen unteren Rand verwenden.

Sie können viele andere fortgeschrittene CSS-Techniken für Text im Blog 3.7Crea.tv sehen.

4. Dynamisch hervorgehobene Spalten in Tabellen

Crazy Egg hat ein unglaublich intuitives Design für ihre Anmeldeseite. Anstatt den Benutzer dazu zu bringen, auf eine andere Seite zu klicken, um den Anmeldevorgang zu starten, verwendet Crazy Egg CSS und einen Hauch von Javascript, um die Tabellenspalte sauber nach links zu verschieben, während anstelle der anderen Spalten ein Anmeldeformular angezeigt wird. Sehr praktisch, wenn der Besucher den Anmeldevorgang sofort auf kleinstem Raum starten soll.

Während Tabellen etwas sind, das moderne Designer normalerweise gerne vermeiden, können sie sich perfekt zum Organisieren vieler Daten eignen. Preistabellen sind ein großartiger Ort, um Tabellen zu verwenden, und wenn sie interessanter sind, trägt dies sicherlich zur Benutzererfahrung bei.

Fragen Sie den CSS-Mitarbeiter, er hat ein hervorragendes Tutorial, das den Code repliziert, einschließlich eines Live-Beispiels und einer herunterladbaren Quelle.

5. Dynamische Variablen in CSS

CSS ist nicht wirklich so mächtig eine Sprache für sich. Sicher, Sie können jede Menge raffinierte Tricks damit machen, aber es ist immer noch nur eine Stilsprache. Sie können keine Variablen speichern oder andere Dinge tun, die dynamische Sprachen wie PHP können. Sie können jedoch dynamische Sprachen verwenden, um CSS auszugeben und ihnen dynamische Variablen zu geben.

Mit der Funktion header() in PHP kann PHP CSS ausdrucken. Sie können verschiedene Arrays verwenden, um verschiedene Teile von CSS-Stilen anzuzeigen. Hier ist beispielsweise ein Standardfarbschema in CSS, das in PHP ausgegeben wird:

$persistent = array(
'bgmast' => 'bbd9ee',
'fgmast' => '4d4d4d',
'bgmenu' => 'e7e4d3',
'fgmenu' => '444',
'bgcont' => 'fff',
'fgcont' => '444' );

Und hier ist ein alternatives Farbschema:

$alternate1 = array(
'bgmast' => 'ddb',
'fgmast' => '000',
'bgmenu' => 'aa7',
'fgmenu' => 'fff',
'bgcont' => 'fff',
'fgcont' => '333'
);

Wenn Sie ein alternatives Farbschema anzeigen möchten, wechseln Sie einfach zwischen $persistent und $alternate1, um die Stile auszutauschen.

Weitere Informationen zum dynamischen Stilwechsel mit CSS und PHP finden Sie im vollständigen Tutorial des Digital Web Magazine.

6. Zitate mit CSS ziehen

Das Abrufen von Zitaten aus dem Text einer Webseite ist eine großartige Designtechnik, die einer Website ein schönes Stilelement hinzufügen kann. Viele Magazine, E-Books und andere Online-Veröffentlichungen verwenden Zitate, um einen Teil des wichtigsten Textes hervorzuheben, damit der Leser darauf aufmerksam wird. Zitate sind im Wesentlichen eine Augenweide für den Leser. Hier sind einige Möglichkeiten, wie ein Designer Zitate aus dem Artikel ziehen kann.

Manuell

Der Designer könnte manuell ein zusätzliches div erstellen, das ungefähr so aussieht:

1	<div class="quote">
2	This is the quoted text, floated right with some padding.
3	</div>

mit einem Stil, der aussah wie:

1	.quote {
2	float:right;
3	padding-left:15px;
4	....

mit anderen Stilen, die möglicherweise benötigt werden. Das manuelle Erstellen eines zusätzlichen div ist keine gute Idee, da dies mehr Zeit in Anspruch nimmt und der Quelle doppelten Inhalt hinzufügt.

Javascript

Sie können auch Javascript verwenden, um pull quotes aus dem Text zu ziehen. Das beseitigt zwar das Problem des doppelten Inhalts und erfordert nicht, dass Sie ein anderes div fest codieren. Sie müssen jedoch noch ein wenig Javascript einfügen.

Designmeme bietet ein hervorragendes Tutorial zum Abrufen von Anführungszeichen mit nur ein wenig CSS und CSS 2: vor dem Pseudoelement, um ein Anführungszeichen anzuzeigen.

<p class="pullquote" title="Only this, and nothing more.">Once upon a midnight dreary, while I pondered weak and weary, Over many a quaint and curious volume of forgotten lore, While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. ‘'Tis some visitor,’ I muttered, ‘tapping at my chamber door – Only this, and nothing more.’</p>

Hier ist die pullquote-Klasse:

.pullquote {
width:550px;
line-height:1.5;
font-size:1.2em;
text-align:justify;
}

zusammen mit der: vor Pseudoklasse:


.pullquote:before {
content:"201C" attr(title) "201D";
font-family: "Times New Roman", Times, serif;
font-size:1.2em;
text-align:center;
background:#333;
color:#fff;
display:block;
float:left;
width:7em;
margin: 0.25em 1em 0.5em 0;
padding:1em;
}

Jedes Mal, wenn Sie einen Absatz mit der Klasse "quote" haben, wird jeder Text, den Sie in das title-Attribut eingeben, in einem Anführungszeichenfeld (mit geschweiften Anführungszeichen) angezeigt.

Den Rest des hervorragenden Tutorials zu CSS pull quotes finden Sie bei Designmeme.

7. Ändern Sie die Stile basierend auf der Tageszeit

Das Ändern des Erscheinungsbilds Ihrer Website basierend auf der Tageszeit ist nicht nur eine unterhaltsame Möglichkeit, Ihrem Design Tiefe zu verleihen, sondern auch eine Möglichkeit, die Erfahrung des Besuchers zu personalisieren. Bisher gibt es zwei Möglichkeiten, dies mit CSS zu erreichen: Mit Javascript oder PHP (oder einer anderen dynamischen Sprache).

Beide Ansätze machen im Wesentlichen dasselbe, mit ein paar kleinen Unterschieden. Mithilfe von Javascript können Sie die Zeit des Besuchers nutzen, um das entsprechende Stylesheet anzuzeigen. (Wenn Sie die Zeit Ihres Servers nutzen möchten, verwenden Sie die PHP-Version).

Hier ist der Javascript-Code von katgal, der das Stylesheet je nach Zeit des Benutzers alle 3-4 Stunden ändert.


<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function getCSS()
{
datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);
thehour = datetoday.getHours();

if (thehour > 20)
display = "tree_twilight.css";
else if (thehour > 17)
display = "tree_sunset.css";
else if (thehour > 14)
display = "tree_afternoon.css";
else if (thehour > 11)
display = "tree_noon.css";
else if (thehour > 7)
display = "tree_morning.css";
else if (thehour > 4)
display = "tree_sunrise.css";
else if (thehour > 1)
display = "tree_twilight.css";
else
display = "tree_sunset.css";

var css = '<';  css+='link rel="stylesheet" href=' + display + ' \/';  css+='>';

document.write(css);
// End -->
}
</script>
<script language="javascript">getCSS();</script>
<noscript>
<link rel="stylesheet" href="tree_sunset.css" type="text/css">
</noscript>

Mit dieser Methode können Sie verschiedene Stylesheets anzeigen

Von 5 bis 8 Uhr
Von 8 bis 12 Uhr
Von 12 bis 15 Uhr
Von 15 bis 18 Uhr
Von 18 bis 21 Uhr
Von 21 bis 5 Uhr

8. Ändern Sie die CSS-Stile basierend auf dem Wetter

Das Ändern des Erscheinungsbilds Ihrer Website basierend auf der Tageszeit ist Erdnüsse im Vergleich zu der Möglichkeit, das Erscheinungsbild Ihrer Website basierend auf dem Wetter zu ändern. CSS-Tricks hat ein erstaunliches Tutorial, das zeigt, wie man ein Design basierend auf den aktuellen Wetterbedingungen von Yahoo! Wetter.

Das Tutorial zeigt anhand von CSS- und PHP-List, wie Sie die Klassen des Layouts je nach Wetterlage wechseln können. Erstellen Sie einfach einen Stil (das Beispiel zeigt ein Header-Bild), der den entsprechenden Wetterbedingungen entspricht. Es wird ein solches Stylesheet verwendet

.header {
width: 782px; height: 150px;
/* DEFAULTS TO SUNNY */
background: url(images/header-sunny.png) no-repeat center center black;
}
.header-rain {
background: url(images/header-rain.png) no-repeat center center black;
}
header-snow {
background: url(images/header-snow.png) no-repeat center center black;
}
.header-sunny, .header-fair {
background: url(images/header-sunny.png) no-repeat center center black;
}
.header-partly-cloudy, .header-cloudy, .header-mostly-cloudy {
background: url(images/header-partlycloudy.png) no-repeat center center black;
}

und sobald es die Wetterbedingungen über PHP/XMl zieht. Dieses PHP-Snippet wird im Layout verwendet, um die richtige Wetterklasse anzuzeigen.

1	<div class="header header-<?php echo $weather_class; ?>">
2	</div>

9. Perfekter Seitendruck mit CSS

Eine übersehene Funktion auf der Website ist der Link "Diesen Artikel drucken". Es gibt viele Menschen, die das Internet nutzen und immer noch gerne nützliche Artikel ausdrucken und in Papierform speichern. Um das zu erreichen, müssen Sie CSS/XHTML-Seitenumbrüche verwenden.

David Walsh verfügt über einen hervorragenden Code, der das CSS anzeigt, das für effektive Seitenumbrüche beim Drucken von Seiten erforderlich ist.

@media all
{
.page-break    { display:none; }
}

@media print
{
.page-break    { display:block; page-break-before:always; }
}

Und um den Code zu verwenden, fügen Sie einfach <div class="page-break"></div> hinzu, wann immer Sie die Seite brechen müssen, wie folgt:

<h1>Page Title</h1>
<!-- content block -->
<!-- content block -->
<div class="page-break"></div>
<!-- content block -->
<!-- content block -->
<div class="page-break"></div>
<!-- content block -->
<!-- content -->

David gibt auch einige großartige Beispiele für Orte, an denen Druckpausen auf der Seite hinzugefügt werden können.

Zwischen Seitenabschnitten (h2- oder h3-Tags, abhängig von Ihrem Site-Format)
Zwischen dem Ende eines Artikels und nachfolgenden Kommentaren / Trackbacks
Zwischen langen Inhaltsblöcken

Verwandt

Lesen Sie einige Artikel von David, wie Sie Ihre Website druckerfreundlicher gestalten können.

10. CSS-Balkendiagramme

Balkendiagramme erstellen ein schönes Bild für eine Gruppe ansonsten langweiliger Statistiken. Apples to Oranges hat eine Möglichkeit gefunden, Balkendiagramme nur mit CSS genau anzuzeigen. Es ist eine elegante Lösung für das, was sonst fest codiert oder mit Javascript erstellt werden müsste.

Der Grundgedanke hinter dem Tutorial ist, dass Sie eine Klasse wie .graph erstellen

.graph {
position: relative; /* IE is dumb */
width: 200px;
border: 1px solid #B1D632;
padding: 2px;
}
.graph .bar {
display: block;
position: relative;
background: #B1D632;
text-align: center;
color: #333;
height: 2em;
line-height: 2em;
}
.graph .bar span { position: absolute; left: 1em; }

und zeigen Sie es auf der Seite wie folgt an:

1	<div class="graph">
2	<strong class="bar" style="width: 24%;">24%</strong>
3	</div>

Das einzige "flüssige" Teil des Beispiels ist das Hinzufügen des Stils = "24%" zur <strong> Anweisung. Jeder Prozentsatz hätte das richtige Diagramm korrekt angezeigt. Einfach und elegant.

Es gibt viele komplexere Beispiele für das Erstellen von Balkendiagrammen aus CSS im Apples to Oranges-Blog, wenn Sie sich abenteuerlustig fühlen.

Abonnieren Sie den NETTUTS RSS Feed für weitere tägliche Webentwicklungs-Tutorials und Artikel.

Glen Stansberry ist ein Webentwickler und Blogger, der oft Probleme hatte, als er mit CSS zugeben möchte. Weitere Tipps zur Webentwicklung finden Sie in seinem Blog Web Jackalope.