t3n News Entwicklung

Stile, Effekte, Font-Features: Mit diesen 10 CSS-Tricks rockst du dein nächstes Projekt

Stile, Effekte, Font-Features: Mit diesen 10 CSS-Tricks rockst du dein nächstes Projekt

Du bist auf der Suche nach CSS-Tipps und -Tricks, mit den du deinen Design-Workflow optimieren kannst? Wir haben zehn davon rausgesucht und sagen dir, was sie können.

Stile, Effekte, Font-Features: Mit diesen 10 CSS-Tricks rockst du dein nächstes Projekt

(Grafik: Shutterstock)

Es gibt viele CSS-Funktionen, die wir im Alltag benutzen, da kann es schon mal vorkommen, dass man die ein oder andere Funktion vergisst, Oder man ist einfach auf der Suche nach einer einfacheren Lösung für ein Design-Problem.

Du wolltest zum Beispiel schon immer mal Texte wie eine Printanzeige aussehen lassen oder willst wissen, wie du Bilder in bearbeitest? Dann bist du hier richtig, wir erklären dir, wie das geht.

Sprachstil von Screenreadern bestimmen

Screenreader sind praktisch, um Nutzern Texte vorlesen zu lassen – nicht nur für blinde oder sehbehinderte Menschen eine großartige Erleichterung. Doch was viele nicht wissen: Sie bieten etliche Funktionen, mit denen sich Stil und Sprache anpassen lassen. Vier Funktionen, die du kennen solltest.

voice-volume

Diese Angabe reguliert die Lautstärke, dabei wird zwischen silent, x-soft, soft, medium, loud und x-loud unterschieden.

voice-family

Ähnlich wie bei wählst du auch hier die Familie aus. Zur Wahl stehen male, female, child und inherit.

voice-rate

Mit dieser Angabe bestimmst du die Geschwindigkeit, mit der Inhalte wiedergegeben werden. Die Rate wird als Prozent-Wert oder Keyword angegeben: x-slow, slow, medium, fast oder x-fast

voice-stress

Diese Eigenschaft verändert die Dynamik der Stimme, die deine Texte vorliest – ein Kombination, die unter anderem aus Tonhöhe, Zeitvariation und Lautstärke besteht. Diese Varianten sind möglich: none, moderate, strong oder reduced.

Texte in Form bringen

text (Screenshot: HTML5 rocks)
CSS-Shapes ermöglichen dir Formungen wie im Print.  (Screenshot: HTML5 rocks)

In Druckerzeugnissen sind Anpassungen an Grafiken schon lange möglich und üblich, jetzt kannst du deine Website auch so aussehen lassen. Versuch es mit CSS-Shapes und lass deine Texte außerhalb oder innerhalb einer Grafik fließen. Aber bitte Vorsicht beim Einsatz, leider wird diese Funktion weder vom Firefox noch vom Internet Explorer unterstützt.

shape-outside

Der Text wird um ein Element gelegt und funktioniert mit dem shape-margin-Tag.

shape-inside

Der Text wird in ein Element gelegt und funktioniert mit dem shape-padding-Tag.

Mit shape-image-threshold wird der Grad an Deckkraft zur Erzeugung der Form herangezogen. Werte zwischen 0.0 (transparent) und 1.0 (abgedeckt) sind möglich. 0.0 ist der Standardwert.

Parallax-Effekt

Parallax-Effekte sind inzwischen nicht unüblich und immer häufiger zu sehen. Dabei handelt es sich nicht nur um coole Animationen, der Effekt ermöglicht auch das Nutzen vollflächiger Bilder. Er lässt sich auf vielen Wegen zustanden bringen – hier ist ein einfaches Beispiel:

div {
background-image: url("example.jpg");
background-attachment: fixed;
transform: scale(1.25);
}
body {
height: 100%;
overflow: scroll;
}

Falls du Design-Inspirationen für ein Parallax-Projekt brauchst, solltest du dir diesen Artikel nicht entgehen lassen.

Smoother Box-Shadow für bessere Performance

Ist es möglich, Box-Shadows zu animieren, ohne die Performance jedes Frames zu verlangsamen? Nein, ist es nicht. Die Animation wird die Performance bremsen.

Aber: Wir haben eine Möglichkeit gefunden, den gleichen Effekt mit minimalen Verlangsamungen zu erzielen.

/*Eine einfache Box mit Schatten für den Ausganszustand.*/
.box {
width: 100px;
height: 100px;
background-color: #ddd;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 5px;
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);}
/*Das versteckte pseudo-Element mit Schatten für den Endzustand.*/
.box::after {
content: "";
border-radius: 5px;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);}

Bis hier hin ist der stärkere Schatten von .box::after komplett versteckt und Interaktionen mit der Box sind nicht möglich.

Im nächsten Schritt wird die .box beim Hover vergrößert und das pseudo-Element wird eingeblendet.

.box:hover {
transform: scale(1.2, 1.2);
}
.box:hover::after {
opacity: 1;
}

Die Demo mit Code findest du auf CodePen.

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
3 Antworten
  1. von Content-Setzer vs. Pixel-genauer Designe… am 06.02.2016 (14:14 Uhr)

    Der Setzer lernte wie man auf grauem Zeitungspapier in dunkelgrauer Schrift Zeitungen optimal lesbar für Londoner Gaslampen oder Kerzen produzierte damit Sherlock Holmes und alle anderen Leser alles ratz fatz erfassen kann...
    Schon vor hunderten von Jahren wurde der Read-Flow optimalisiert.

    Der Webdesigner hat feste Formate und will pixelgenaue Webseiten in 1024x786 optamized 4 InetEx für WindowsME(oder was auch immer) in 16 Bit...

    Weil Boni-Manager ihre Emails ausdrucken lassen und ihre Eigenen Webseiten höchtens mal an einem BigPad und nicht an den Endgeräten von 90% ihrer Mitarbeiter und Kunden aufrufen oder am 99"-SmartTV im eigenen Wohnzimmer, werden Webseiten immer noch viel zu unflexibel entwickelt und sind am Handy meistens recht unbrauchbar. Moral kann man nicht kaufen. Ehre auch nicht. Für saubere Vorgaben fehlt das Know-How. Qualität wird nicht bezahlt. So sieht die Branche aus...

    Auch die meisten Business-Emails in HTML oder auch Endkunden-PDFs wie z.B. Preislisten sind am Handy schlechter lesbar und praktisch unbrauchbar als 95% aller Spam-Emails. Man muss extra Text-Reflow-PDF-Reader installieren und aufrufen usw. woran natürlich die meisten Endkunden scheitern und Computer mal wieder scheitern, das Leben zu vereinfachen was täglich zu messbaren entgangenen Aufträgen und unzufriedenen Kunden führt...

    Microformate haben sich bis heute ja auch leider nicht durchgesetzt :-(((

    Nett wären auch Vorbilder und Referenzen für beispielsweise Textflow bei großen Sites oder Projekten wo man sofort erkennt warum und wo das sinnvoll ist. Bei Wikipedia unter Lynx oder am Handy kommt erst der relevante Content. Bei 90% aller normalen Webseiten kommt die Linke Spalte und irgendwo in der Mitte der Einspaltigen Text-"Schlange" wo man endlos am Handy scrollen muss kommt dann irgendwo irgendwann der Text den man eigentlich lesen will. Wikipedia hat aber auch eine Linke Spalte/Navigation. Aber halt nicht bei Einspaltigkeit. Wikipedia könnte zwar an vielen Enden viel besser sein, dort sind sie aber eine positive Referenz.
    Theoretische Dinge sollte man je nach Nachvollziehbarkeit auch mit Referenzen hinterlegen wo das sinnvoll in der Praxis eingesetzt wird.
    Auch weil CSS-Befehle viele kleine Schrauben an einem großen Flugzeug also Webseite mit vielen Seiten sind und CSS viele Aufgaben erfüllt wie die zig Steuergeräte im Auto.


    Wer sich Webseiten vorlesen lässt, hat vielleicht was dagegen, wenn andere ihm die Lautstärke usw. vorschreiben. Sogar konservativste Mainstream-Medien haben A+/a--Symbole um die Schriftgröße individuell einstellen zu können.
    Typographie-Regeln gelten bei vielen verschiedenen von überall einströmenden Informationen auch und erst recht vermutlich für digital.

    Antworten Teilen
  2. von grep am 06.02.2016 (14:44 Uhr)

    Hallo 'Content-Setzer vs. Pixel-genauer Designe…',


    ich gehe mit ihren Ansichten weitestgehend d'accord; meine (Webseiten-)Besucher kommen größtenteils via Textbrowser - hierauf ist meine Seite auch primär optimiert.

    Für meine (Nischen-)Seite wäre es ein unverhältnismäßiger Aufwand besagte Seite auf jegliche mobile Geräte, bestmöglich zu optimieren ... und würde überdies den Code gewaltig aufblähen.

    Zugriffe von Nutzern mobiler Geräte sind bei meiner Webseite in der Minorität.


    Ciao, Sascha.

    Antworten Teilen
  3. von David am 07.02.2016 (12:15 Uhr)

    Danke, sehr hilfreiche Liste!

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS
Psychologie im Design: Diese 5 Tipps helfen dir bei besserem Interaction-Design
Psychologie im Design: Diese 5 Tipps helfen dir bei besserem Interaction-Design

Mit jedem Tag wird es wichtiger, dass du dich durch deine Designs mehr mit deinen Nutzern verbindest und ein „menschliches Element“ integrierst. Das Website- und User-Experience-Design-Erlebnis … » weiterlesen

Flat Design: 10 Tipps und Infos für bessere Grafiken
Flat Design: 10 Tipps und Infos für bessere Grafiken

Flat-Design ist ein Trend, über den man in den letzten Jahren viel gehört hat. Gucken wir uns diesen Trend doch mal genauer an: Wir zeigen dir, was Flat Design genau ist, wo es her kommt und wie du … » weiterlesen

Dialog-Design: 10 UX-Tipps und -Regeln, die du drauf haben solltest
Dialog-Design: 10 UX-Tipps und -Regeln, die du drauf haben solltest

Wir kennen sie alle: Diese Fenster, die meistens im falschen Moment auftauchen und nur nach Aufmerksamkeit schreien. Die Rede ist von Dialog-Fenstern. Doch mit dem richtigen Dialog-Design und … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?