Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

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

(Grafik: Shutterstock)

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.

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 CSS 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 Fonts 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.

Finde einen Job, den du liebst zum Thema Webdesign, Webentwickler

3 Reaktionen
David
David

Danke, sehr hilfreiche Liste!

Antworten

grep
grep

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

Content-Setzer vs. Pixel-genauer Designer
Content-Setzer vs. Pixel-genauer Designer

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

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen